Everyone wants a fast website. Visitors and Google expect your site to be fast, so don't let your images slow your site down! Optimizing your images for display on the web will help your website to load fast. Plus it's quick, and easy! This tutorial is for Photoshop CC, however it's will work for older versions as well.
This is the image we will be working with. Does it look familiar? Yes, it is the background from one of our fantastic clients, Caroline Sunshine! You can see the background in action on her site.
Save for Web
Conveniently, Photoshop has an aptly named function called "Save for Web". This enables you to save your image in a number of web friendly formats, as well as providing options to help reduce file sizes. To find "Save for Web" head on over to File > Save for Web.
Make Your Selection
Save for Web will give you the option to save your file as a .gif, .jpg, .bmp, or .png. Each file format has a variety of save settings that can be tweaked to fit your needs.
Generally, unless your image will be animated you'll save in either .jpg or .png. Bitmaps usually have huge file sizes and are not well supported on the web. If you've ever tried to upload an image for a user icon on a social media network it probably required either a .gif, .png, or .jpg. If you'd like more insight into image file formats, check out our previous blog post on the topic.
We want our image to have as small a file size as it can possibly have, while at the same time retaining it's detail and looking sharp. It can be a tricky balancing act especially with large images!
Let's try .png first. As you can see it gives you two options. You almost always will want to use png-24, the only exception is if your image has very few colors in it. If you look in the lower left hand corner you can see the image size. In this format it's 1.019 M. It also tells you approximately how long it will take for this image to download given a certain internet connection speed. On a 56k modem this would take 190 seconds....that's a long time! Fortunately, high speed internet is much more common than it once was. However, mobile networks still aren't nearly as fast as one might hope!
Lets try a different file type. This time we'll try .jpg on the lowest setting.
This is the lowest default .jpg setting. You can manually override the default settings if you aren't happy with them. Notice how much smaller our file size is! Now it's only 21.55k and loads in 5 seconds on a 56k connection! That's pretty good! Unfortunately, take a look at our image! It's all pixelated! That's not good enough! We need to try another setting.
Here we are on the high .jpg setting. Medium .jpg might have worked too but there was still a slight bit of pixelation. Notice our new file size: 92.85k and an 18 sec load time on 56k connections. It's much smaller and faster than our initial .png size, but still larger than the lower quality .jpg setting. The improved image quality, however, makes up for the larger file size. As fast as we want our image to load, we can't sacrifice image quality. Once you are satisfied with your image all you have to do is hit save and save your file.
Using Photoshop's "Save for Web" option makes it easy to save images for the web. The handy preview will show you exactly what your images will look like at it's current save settings. You can improve your site's speed by taking a few moments of care when saving your images for the web.