One of the usual suspects to a slow website is large un-optimized images. Fortunately, this is a fairly easy fix and can lead to improved SEO. Let’s take a minute to talk about the different image formats for web design.
THE MOST COMMON IMAGE FORMATS IN WEB DESIGN ARE:
Jpeg
Jpeg is a commonly used method of lossy (meaning you lose some data every time you resave the image) compression for digital images. Jpeg is typically best for photographic images, large or small.
Png
Png’s are a raster graphics file format that supports lossless (meaning the image retains all data regardless of saves or transfers) data compression. Best for complex design elements that require a transparent background such as a logo.
Gif
Gif’s can come in handy for small elements with a limited number of colors. Gif’s support animation and transparency as well, but typically are not a good choice for photographic images. It is possible to make a high quality gif, but typically the size does not end up web friendly.
So let’s look at an example of how to reduce the file size in Adobe Photoshop:
1. We have an image that we would like to use in a blog post. The high resolution image measures 1624×1080 px and is 72dpi (web screen resolution, if your image is 300dpi it is a print image and is too large for the web), and it weighs 900kb (way too large). If we had 20 of these images around the site that is slightly under 20mb and will drastically slow down the site. You can check this information by control+click and select “Get Info” (On Mac), or right click and select “Properties” (OnWindows):
2. Next, open the document in Photoshop, and go to Image > Image Size… That will bring up the image size settings. We need to first check and make sure the resolution is set to 72 and that all three of the lower boxes are checked (this will prevent distortion):
3. Next, we know that this will be a featured image within the blog post that never reaches the full screen width so we know that the image does not need to be more that 750 pixels in width. Change the width to match your needs. Doing this already cuts the file size in half.
4. Next, go to File > Save For Web And Devices. This will bring us to the web optimization menu:
5. Next, ensure that you are viewing the image at 100% zoom in the left box. Since this is a photograph we will save this image as a jpeg:
6. Next we want to manually adjust the quality of the image. In our case we are working with a high quality image so we have plenty of room for downsizing. Adjust the quality slider to the lowest point before you can personally see pixelation. In our case this number was 50:
7. Next, hit save. Make sure the format is set to “Images Only”, and set the settings to “Default Settings.
In our case we were able to take the image all the way down from 900kb to 60kb. Compound this savings over 20 images and we end up saving 16.8 MB which intern drastically boosts site speed.
To optimize PNG images we recommend simply using Tiny PNG.
