 I think we can go ahead and get started. First of all, I'm so impressed that there are so many of you, and it is dinner time. So thank you for coming to this session today about how to make your website faster by saving images correctly, or at least better. There are multiple ways to save images, and I hope today we'll just give you a glimpse in how you might be able to make better decisions when you're saving images for the web. My name is Jessica Tate. I am an art director at ThinkShout based in Portland, Oregon. At ThinkShout, we do strategy, design, UX, and development for mission-driven organizations. So as an art director, I touch a lot of the strategy and the UX in the design and help partner and implementation in building websites for clients like the Humane Society and the Southern Poverty Law Center. Those are my Instagram and Twitter handle if you want to connect with me on social media. So this is what our internet looks like today. If you notice, there are lots and lots of images. In fact, if you look at the statistics right now, the current internet weight every time you load a page, about 60% of all of the internet is bogged down with images. So I think we have a social responsibility as content creators, developers, designers, strategists, whatever it may be, to get our images as small as possible so that we can continue to make sure that the websites that we're building are quick and fast. Especially if you look at the United States versus the rest of the world, the United States has a lot of desktop traffic where often you're plugged into Wi-Fi so you don't notice it as much. But as soon as you go to other parts of the world, most of the traffic comes through mobile devices, which I'm sure we've all had that experience on our phone where we go to a website and it loads really, really slowly because the images aren't optimized for that particular device. So I wanna start us at the very beginning, right? Like if we're gonna talk about images, it's helpful to really understand when you're saving images, what the different rules are, what the file types are, and hopefully, having a level setting will give us an understanding for you to be more knowledgeable when you're going to upload images to your website or digital platform. So I wanna start off with what is a JPEG? Specifically, does anyone know what it stands for? Yeah? Yeah, close, Joint Photography Experts Group. It has that missing E that sometimes appears or doesn't appear if you're on a Windows machine or a Mac machine, although even then sometimes that E magically appears or disappears. This is just a really fancy name. I don't really know why they called it this. But what I do know is that the JPEG came into the scene in 1992. Really no purpose to that fact other than I think it's interesting to watch how we're continuing to evolve as our industry continues to grow. So when do you use a JPEG specific to all other file types that you could use on the image or on the web as images? And you wanna use it with full color photography. So that's kind of the first takeaway. Whenever you're working with photos like any of the screenshots that I showed previously of browsers, anytime you have full color photography you wanna select JPEG because in general, as a rule of thumb, it's gonna compress the image the best out of like PNGs or GIFs or other types of file formats. Now as soon as I say JPEG, I myself come from a print background as a designer and a lot of designers get kind of wary about JPEGs because there's this thing called lossy compression which is just really fancy to say if you open a JPEG and save it you're gonna continue compressing that image every time you open and save, open and save, open and save to the point where if you do it enough times your image could look really, really bad. Every time you open and save it it compresses it 10 to one so you can imagine the multiplying effect if you continue to edit and save that image. What I will say is I've been building websites since 2007 I've used images on all of the websites since 2007 and I've saved JPEGs multiple times and not really ever noticed the effects of the lossy compression so I would just be wary of it but as like a general rule of thumb I don't think that should steer you away from using JPEGs because it will compress if you have to open it and save it again. So now that we understand JPEGs the second big file type is PNGs. Does anyone know what a PNG stands for? Yeah, portable network graphic. So there are two common types of PNGs, technically three, I'll talk about that in a second but the two primary common types of PNGs are the PNG8 and the PNG24. The PNG8 only holds 256 colors and it does also have an alpha channel associated with our transparency channel. Compared to JPEGs, PNGs do support transparency and JPEGs do not. So you might pick a PNG8 if you're trying to do something like a simple graphic versus a PNG24, the 24 means that it gets to be able to hold a lot more color. In fact, it's very comparable to a JPEG in that sense that you get the full spectrum. There is a third type of PNG that is PNG32 and apparently it has more color than the human eye can perceive so my question is why would you use it? The goal is to get the website as fast as possible but certainly if you wanted to you could both the eight and the 24 also have the option to have transparency associated with it. Now I will know if you are using transparency in your image it does tend to make the image more weighty sometimes. So when do you use a PNG8 specifically? When you need small flat graphics that don't have a lot of color associated with them. You'll notice in this image it has a white background but if you needed to have a transparent background you could. One thing I'll also know about the PNG8 when it's selecting that 256 colors it's not picking 256 of the same color every time you save. It will pick for this particular image a bunch of reds, a bunch of blues and a bunch of yellows. So it is specifically customizing those colors based on the image that you were trying to save. I mention this because this is actually the same with most images in that the more color density you have in an image, same goes true for the JPEGs, the weightier the image is going to be because it has to have actually more physical data to make up that image. So one of the tricks if you're trying to make your website really, really super fast is pick an image that doesn't have a ton of color variation. We were actually just working on compressing a website with a GIF that had a ton of color in it and I was like oh it's so weighty and there was nothing I could do about it because it just had literally every color of the rainbow. In fact it had a rainbow in the image. The other type of PNG is PNG24 which we briefly started to talk on. This is when you need to have a full color photo. So often you're left with the decision between do we need a JPEG or do we need a PNG? And the PNG24 specifically you want to use when you need to have an alpha channel but it's still like kind of a full color photo. It means that your image will probably be a little bit more weighty than the JPEG will but often that need for the alpha channel weighs out, weighs out, ha, it's more important than using an actual JPEG without a transparency. PNGs offer lossless compression. So this might be why I think the internet was really focused on PNGs a while back and it was because of this idea of lossless compression compared to the JPEG that tends to have the compression that saves every single time. PNGs do this really cool math algorithm where every time you save that image it runs the exact same algorithm every time so you're gonna be left with the same compression result every time. What this means in simple terms is if I do two plus two equals four every time you add two and two together it's going to be four and it's not gonna be three or two or one. So that's kind of the difference of what a JPEG does versus a PNG. So it's kind of a cool like math thing of how the lossless compression works. We have GIFs or GIFs which I'll talk about in a second. So does anyone know what a GIF stands for? Yeah. Really, really close? Yeah. Graphic interchange format. I think most recently the internet has seen a huge arrival or revival of GIFs because of delightful things like BBA and his little lighter. You can also have really cool interactions for GIFs like swirling animations that just keep going on forever and ever. Today we use GIFs primarily for animation and I'm gonna stop that animation in case it makes anyone dizzy. Kind of a fun history of GIFs and PNGs is actually they had a battle a while back. GIFs came in, I had to go rogue and not use my speaker notes because I'm gonna share my screen in a second but I believe it was in the 70s, don't quote me on that but that's really when GIFs came to life and they were under some sort of trademark or they were in a closed source environment so no one could actually use GIFs and continue to build upon them. So the people that started PNGs actually came as a result of needing to work with something like a GIF and wanted to continue to build upon it as a community and because of that PNGs ended up being more successful and when I mean successful I mean they actually compressed better than GIFs do. Now if you notice I didn't talk about animation when I talked about PNGs because PNGs don't have animation associated with them. So today we really only see GIFs use when you need some sort of animation, potentially SVGs which we'll talk about in a second but really that's where GIFs tend to shine so you can show really cool visual things through just an image format without having to use a video. So when you use a GIF we kind of already talked about this but you use it with animation and maybe potentially really really simple graphics although I would recommend when you're using maybe Photoshop to export an image just double check like try to export both a PNG and a GIF to see what is actually smaller when you export it because that's the goal. If we want to make our website faster we have to make all of our images as small as possible so that we reduce the actual weight and the low time of the page. So what is an SVG? Anyone? Yeah, scalable vector graphics. They are used for things most commonly like social media icons now. I'm sure you are all very familiar with an SVG but if Photoshop is to JPEGs like raster images then Illustrator is to SVGs. As a designer SVGs makes my heart very happy because it means I can have really crisp icons and really clean logos as opposed to the days when you had to have like a PNG logo and it was always really fuzzy and you're like, why can't I get more quality in the typography? So I personally love using SVGs for a little bit of time SVGs weren't supported on all the browsers. Nowadays it's supported everywhere except for IE8 and lower. If you are using IE8 you probably are missing out on a lot of the internet but I will say check your analytics. See if you do have a user base that's using the IE8. I know some companies like force employees to stay on like older systems for one reason or another. So potentially have a fallback of a PNG if you are relying heavily on SVGs. It also supports interactivity and animation what's really fun. So I personally don't have a lot of experience animating with SVGs but I'm really excited to see where our industry is gonna take it since it is kind of a new idea. SVGs were also developed by the W3C which I think is kind of interesting and fun. And personally I also like SVGs because of the potential it has to partner with CSS. So you can take one icon that's a white and upload it to a website and you're able to change the color dynamically through CSS. Once again keeping the page low time down because you're actually only uploading one particular graphic. Now what? So we have a base understanding of what our image file types are. Hopefully that was a helpful refresher. JPEGs use full scale photography, PNGs, some graphics, SVGs for fun awesome crisp vectors. But how do we actually start saving for the web and what are our rules that we should be following when we're saving for the web? So I mentioned all this already but the goal, we need to get images as small as possible into the story. The smaller we can get our images the faster our page is going to load especially because so many of the websites that I know I'm designing for right now really rely on images because the trend of modern web design likes a lot of nice white space, clean typography and images to convey emotion. So when I say small as possible I mean both weight so what is the actual weight of the file and the actual size of that image. So I'm here to recommend there are three golden rules when saving images for the web and if you stick to these three rules you will be a pro at saving images for the web as well. The first one, I want you to save with the correct file type. Hopefully this should feel somewhat familiar since we just talked about what all the different file types are and how you should be saving images. That will give you a good like first initial gut check of how you can start to get your images smaller than, like for example if you have a PNG and a JPEG and you have a full color photo the JPEG is probably gonna do a better job compressing that image. Once again, just a blanket statement. It might not always be true so just double check it but that's a good rule of thumb. Oh yeah, BB8. The second rule is save at the correct size. So this starts to get pretty complicated when we talk about responsive design in Retina so I'm gonna do my best in the next kind of two minutes or five minutes to talk about that. The first thing I'll mention is that when you are saving an image the designer or whoever has built the site there's probably an intended max size for that image but with responsive design there is this idea of wanting images to be forever big and they can go on billboards. I would like to recommend at least one of the approaches that I say is that there is probably a size by which you don't need to make it any bigger and it's okay if the image starts to get a little bit blurry. So right now kind of the rule of thumb that I recommend is no larger than a 2000 pixel wide image. Only because I see a lot of the websites being shown on like conference room TVs and conference room TVs tend to be like 1920. Of course there's 4K. It keeps getting more and more complicated but in general if you start to think about okay what is the max size that this design can support and if it has to go bigger and start losing some quality then maybe that's okay. So if you are for example saving a hero image on travel Oregon you might save out your image at 2000 pixels by 1000 pixels. As you start to scale down your site and as you start to have those various break points kick in like a smaller desktop screen or a iPad or a phone you will want to re have those images display at the correct size for that particular viewpoint. Now you can imagine this means that we might be saving thousands of images so you can have it at each particular size. Probably just a few break points is at least a great starting point. So generally when I am designing and recommending break points it's around three to five different break points depending on the client's budget and really the approach and actually quite honestly the design and what the design requires. So that will continue down. So if you have a grade of images like seen here you want that image uploaded at 300 pixels by 240 pixels. You don't need to upload it any bigger than that if that is the max size that that image is ever gonna be at say like a max break point of 2000 pixels. So especially when you considering having a page like Amazon where there's just pictures upon pictures upon pictures if you've ever I'm sure you have gone into the inspector you'll notice that the pictures that they're displaying aren't any larger than what that particular viewpoint is giving you. So this is just a caution in that make sure when you are designing and building sites that you're not trying to squeeze a like 7000 pixel image there because no one's ever gonna see it and it's only gonna add to the weight of your page. Retina comes into play I recognize. So we talked about saving it at the exact size for a standard device. Now we all maybe know that retina and the general rule of thumb is to save it double. So in this particular example you might want to have like a 600 by 480 image. The question I would ask is why are you supporting retina? I don't think every website needs to support retina or needs to support retina everywhere. For example a really heavy image website like a news website the images are definitely important and add a lot of value but you don't need to load every single image as retina potentially. If you are showing an art gallery website where the images are really important are the main type of content then maybe you do wanna support retina or maybe you wanna find places where you optionally support retina. So maybe you support retina for a hero image because it's gonna see and get a lot of traffic but for other images throughout the website or the page you don't support retina. There are a couple different ways that you can support retina. So I mentioned you can save out the image double. The viewport will still remain the same to still for everyone else it will still look like a 300 pixel by 240 pixel image. So you could do that everywhere on the site. The risk is that everyone is downloading twice the images. I think probably the preferred path would be to use like an image source set where if someone has a retina device they are seeing those images versus other people who don't get to see those images. So that's kind of like the one downfall and where I personally start to struggle when I think about creeping a website as fast as possible. I of course am displaying right now on a retina computer but I don't necessarily know if I want my pages to load slower just because I have a retina device. So really think about when you support retina images and maybe it is the right decision but maybe there's a reason why you might not want to support it everywhere. The last rule is to use pixels to crop your image. This feels kind of obvious but actually there might be some hidden kind of thinking behind here. So there is this great DPI myth that exists and I think it becomes from people like me who come from a print design background that pixels are not related to DPI. So as print designers we hear that you need to save images at 300 DPI as developers or as people that build for the web. There's this word or this magical number of 72 DPI. I'm here to tell you that that's a myth. 72 DPI doesn't exist and I'm gonna prove it to you in case you think I'm crazy. So this is why I couldn't have speaker notes because I'm gonna show you my screen. Okay, so this is Chrome. I just dropped images into Chrome so that you can see it actually in a browser and showing it in the flash. So this image that we're looking at right here has 5,000 DPI associated with it. It looks nice as you would expect with an image that has 5,000 DPI. The size is consistent. But would you believe me if I went to this tab and said this image has 36 DPI. Same size, looks just as great. Seems okay. Here is a 300 DPI image. And here is a 72 DPI image. So the funny thing is when you're actually saving images for the web and you run it through things like optimizely or the Photoshop Safer Web, it actually discards the DPI information because it doesn't actually need it. DPI is only related to actually printing out the image. So if I open Photoshop, I can show you what these images look like with image size. That kind of like thing I'll show you in a second. Just in case you still don't believe me. So this is the 72 JPEG. I apologize, it's really small. I wish I could make it bigger. I'll just talk you through it. So if I go to image size here, you can see here that the resolution is 72 pixels per inch. But if I come up to the dimensions, we can see the dimension of this image is about 5,100 by 3,400 at 72 DPI. If I hit cancel, this is the one that is the 36 DPI. You do image. Oops, not canvas size. This one also 5,100 by 3,400, but the resolution is 36. I think you get the idea. We're running out of time. But the point is that when you are looking at images for the web, the only thing you care about is the width and height resolution of the image. If you were trying to put a hero image that isn't a wide enough resolution. So for example, say, someone gives you a 500 pixel wide image and they're like, can you put this in that 2,000 pixel space? That's not gonna work. There's not enough width resolution to put there. But this image would work just fine in a hero space because you could crop it down to that 2,000 pixel size. Speaking of, I feel like this wouldn't be a demo if I didn't actually show how to save an image for the web and how I think you can get images optimized even smaller than what we just talked about as the three rules. So I'm gonna open this image right here. This is an image we're gonna pretend that we're uploading a new hero image to that travel Oregon example that we saw. So we want this image to now be the new hero. So just to look at what this image currently is, it's probably really small for you. But for me, I can see that this image is about like 4,800 pixels wide and an ungodly amount tall, like 5,000 tall. So if we're gonna save it for that hero space, we know we wanna save it using the three rules. The first rule, we wanna save for the correct file type. So because this is a full color photo, we want to save a JPEG. We want to save at the correct, no I'm forgetting the rules, correct size. So we want to make sure and crop this photo to exactly 2,000 by 1,000 because that's the space we have available to us in the hero. If we were going to save this photo out for also iPad and a phone and other desktop sizes, we would want to go ahead and save out those as well unless you're using some sort of integration technically that will automatically give you those other sizes. And then the third, we wanna make sure that we are using those pixels to measure this image and that we have enough crop pixel to be able to do so. Knowing that this is a 4,800 pixel wide image and a 5,000 pixel wide image that's tall, we have plenty of pixel to work with. So because we don't care about DPI and because we don't care about all of the print stuff that I was previously taught, all we have to do in Photoshop specifically is go to the crop tool. You'll see mine is defaulting to width and height resolution, which is great because that's all we care about when we're saving images for the web. So I'm gonna put for my width 2,000 pixels because once again, we want to use pixels to measure and then I'm gonna do 1,000 pixels tall, then I can adjust my crop so it'll have a nice crop. Hit return twice. And now we have an image that is following our second rule which is saving for the correct size and really the third rule because we're using pixels to make sure that the image is working just fine. If I were to go up to image image size just to show you, this resolution is at 300 but that's not affecting our dimensions at all. So hit cancel. Now I'm going to save this image. So Photoshop, gosh darn them, is starting to put safer web as legacy. Why? I don't know, but the safer web is my personal still favorite way to save images. You can use export and select JPEG, which we know this is and you can adjust the quality but I don't love this option because you're not actually able to get the image as small as like optically possible. I'll show you what I mean by that. So if I go for a safer web legacy, we get this two up view. The view up at the top is the original image and the view at the bottom is the going to be exported image. So right now my Photoshop has defaulted this to GIF because I was saving out GIFs earlier. So we know that we want this to be a JPEG. So I'm going to select JPEG. And just for this purpose, I'm going to put this quality at 100 because most often the quality will default to 100. If I look down here in the left, which is going to be really small, but this image, if I just hit save right now, it's going to be 1.3 megabytes. That is a huge image and probably way, way, way too big for our websites. I recommend targeting between 100 and 200 kilobytes for an image. You can imagine even if you have five images on a website all at 200 kilobytes, that's one meg, which still to me feels like a lot. Luckily with smaller images, like we saw in that grid, you can get those images down to like 30 kilobytes. So it feels a little bit better when you start to use more images, which I assume is how Amazon is able to use so many images because they're really making sure that even the smaller images are as small as possible. So the way that we can make sure that this is small as possible is I'm going to zoom in. And this projector is decent. So I think we're going to be able to see it. So our goal is to optically match the original to the exported version the best we can without making the quality too bad. So if I start moving this quality slider down, instantly you'll notice even to just go to 67 quality, our JPEG has dropped to 387 kilobytes. That's pretty good for a hero image at 2000 pixels wide, but I think we can make it look even better. Optically on my retina screen visually, these two don't look any different. I'm looking at kind of the pixelation in the sky that feels the same. I'm looking at her jacket and the hair and the details, especially like around hair parts, you'll see pixelation start to come through. So our goal is to drop the quality as much as we can before we like optically start to see like pretty significant pixelation. So I think we can get this even smaller. And maybe just for, okay, so right here at 33, you can definitely start to see artifacting around, it's hard to see up there. I can definitely see some artifacting around her head, which I can imagine this photographer probably wouldn't be very happy about. So I'm gonna pull the quality back up. And that's pretty good. This might be because of this image, once again, the amount of color that's in an image. We have kind of a rainbow sky going on. Means that the weight of the image might actually be a little bit weightier than we would like. And that's just simply due to the nature of this having a lot of color. So at 45 quality, we're looking at 200 kilobytes. If I'm zoomed back out to, that's 100% on my screen, it looks optically just the same. So we've gone from like this original image before even saving it is 5.2 megabytes and we're now down to 200 kilobytes. So I'm gonna hit save, call it something smart. And then I can show you, I pull it in a browser what our image would look like. Oops. So that is our 200 kilobyte, 2000 pixel wide image saved, optimized for the web. So one of the questions I always get is why do you use Photoshop? I personally like to use Photoshop because I can optically do that. A lot of the other tools that you integrate doesn't give you that ability to get the images as optically as small as possible. They'll like discard metadata information which certainly Photoshop Safer Web does as well. But this will allow you to, if you're really excited about it, get your images as small as possible. And now we're out of time. So hopefully that was really helpful and hopefully that empowers you to start saving images for your websites and your digital platforms.