Transcripts
1. Welcome to the class: Hi, I'm Vanessa Bias. I own and operate Bias creative company, a one-person full-service design studio soon to be based at Los Angeles, California. In this class, we'll cover different methods for optimizing your photographs and graphics for the web to help you website or email designs load faster without sacrificing too much quality. Let's get started.
2. Why Optimize?: If you're like me, you live in a metropolitan area where unlimited high speed Internet is a reality for most of our community. However, there are many places in the world where just having an Internet connection is a luxury. Even in the United States, there are some communities where high speed Internet is uncommon. As a web designer, it's your responsibility to ensure a good experience for your users and that includes the ever growing global audience who may happen upon your website. Shaving a few seconds off your web page load time could make all the difference in your visitor's experience and on your bounce rate.
3. Scan your website's page load time: For your class project we will use a free page weight tool from imgix. This will show us the heaviest images on your website and tell you what you can do to optimize. So to get started, we are just going to type in the URL here for the website. This is my website. You can use your own and it's going to optimize or analyze in the background rather, it will just take less than a minute. So for the desktop page weight report, you can actually see that the page weight from my website or the homepage at least is pretty light. However, there is a potential savings of 91 percent. If you scroll down, you can see where it currently is and where it could be as far as kilobytes go. You'd also see the difference in the weight of the code on the page versus the weight of the images on the page. The worst-performing image on my website is the hero image at the top of the page. So it looks like what we can do is we can actually resize it smaller to fit the container and we can change the output format. If you scroll down, you can actually see three images that are ordered by image weight savings. So use this tool to scan your website and then follow along with me as I optimize some of the images on my own website in the next few videos.
4. Optimizing PNGs: To get started, we're going to optimize the hero image that was the biggest culprit for page weight during the image scan. Back here I have Adobe Photoshop open. It's the original PSD that I use to build this image. We're going to say for web and on a Mac it is Shift, Command, Option S. Then it's going to pull open your safer web window. If you know anything about the different image formats, you'll know like, if it's a photograph, you'll want to use a PNG-24 or JPEG. If it's very limited in its color pallet, you'll want to use a GIF or a PNG. I am going to go with PNG-8 because this actually does not have that many colors in it. We're at the default 256 colors. I'm going to click on "Save" and we are going to save it. You can see here the image saved out at about 43 kilobytes. If we go over to tinypng.com, this is actually a great tool for optimizing your JPEGs and your PNGs. We are going to just drag that image right into here. As you can see, it went from 42.6 kilobytes to 35.2 kilobytes. Another thing to note is that the file size of the image is actually the correct size that's needed. The original scan showed the image was about 2,000 pixels, and we didn't need a picture that big.
5. Optimizing static GIFs: Okay. Now I'm going to optimize. It wasn't an image that was included as one of the heaviest images on the page. But I think this will be a great example to show good use for GIFs, whatever you want to call it. I'm going to optimize this image here. There's black and white logo. This image is actually saved right now as a JPEG, which I have opened here in Photoshop. I save for web. You can actually see if it's a JPEG at a 100 percent quality, it is about 34.96 kilobytes. What I'm going to use, I'm going to save it as a GIF. You can play around with the colors here, 256 colors will get you 22 kilobytes, which is smaller, but we don't need 256 colors for an image that's only two colors. What I'm going to do is I'm going to bring this down to 100. You can see even zooming in, the quality is still good. There's a reason you don't want to do two colors. That's because it's going to decrease some of that sharpness and you're going to start getting these jagged bitmap lines. I think 100 is pretty good. Or break it apart, bring it down to 75, and that's still pretty good. This is now at 18.85 kilobytes, and that's about half of what the original image size was.
6. Optimizing JPEGs: Now I'm going to show you how to optimize a JPEG. This image here is saved as a JPEG, and it actually should be because it does include photographs in highly complex images in it. There's a lot of colors going on here. So you want to keep it as a JPEG or a PNG 24. But let's see what a JPEG does right now. If we use safe free up shortcut, can see it's going back to the original or the last saved format, which is a gift, and it doesn't really look quite good. You see a lot of the pixilation here, because it's trying to create a photograph with very limited colors. We are going to change it to a JPEG. Right now at maximum quality is 122.8 kilobytes. There is this button here where it's optimized. You can see it's chews off about five kilobytes to have that checked off. What we'll do is we can bump some of those colors down just a little bit. If you want to see them side-by-side, you click on two up. You can see the original image versus as you are changing the settings on the side over here, you see if it goes all the way down, you can see all of that artifact thing that's going on, all that pixilation. We don't want that. We are going to just starting from zero, slowly increase the quality until it gets to a point that we're okay with how it looks. I don't want to say about 65 percent right now is good for me. The original being 469 kilobytes at the original size, saved down to 48.62 as an optimized JPEG. You can use tiny PNG on JPEGs. When it finished saving, it saved about 51 kilobytes. We're going to do is, we're just going to take that and drag it, and as you can see, it went from 50 kilobytes down to 44 kilobytes, saved 14 percent. We see what it downloaded. You can see, there is a little bit more artifacts there than there was originally, it's one of the reasons I like to use tiny PNG for PNGs, or PNG 24 is if you can save as that, rather than saving as a JPEG, but still smaller than it was originally.
7. What is a WEBP?: Something else that's interesting to share right now is a new image format that's going around called WebP. This is considered to be superior to PNGs because the file size is about 26 percent smaller and 25-34 percent smaller than JPEGs. The only problem with WebPs right now is that it is not fully compatible with most of the popular browsers. As you can see, it is fully compatible with Chrome, fully compatible with Chrome for Android, UC Browser for Android, Opera Mini, and Samsung Internet but it's not compatible with Safari, Firefox, Internet Explorer, or Edge. Hopefully this new image format gains traction and becomes readily available and everyone's able to use it but at the moment, it's currently not fully functional for all users.
8. Final project: Now that you have the basics of optimizing your images for the web, it's time to work on your project. First, use page [inaudible] to review your webpage's areas for improvement. Take a screenshot of your results to add to your project. Then, use what you've learned to optimize your images. Make note of before and after of the image sizes, and make note of anything else that you might have changed, like the image file format. Next, re-upload all of your images to your website, replacing the original files. Finally, re-run the page weight tool to see just how much your website speed has improved, or there may have been anything you overlooked. Take a screenshot to showcase the before and after of your webpages improvements. I'll be posting my project as an example. I hope you enjoyed this class covering the basics of optimizing your graphics and photographs for the web.
Venessa B., Designer & Marketer
