How to Save and Optimize Images for Web Without Losing Quality

For many websites, images account for most of the downloaded bytes needed to display a web page. It’s for this reason that saving your images in the right way can give you big results in terms of performance improvements. The best method for doing this is to optimize the images on your website, either before you’ve uploaded them, or going back and uploading a new, smaller version of them. This process is not as difficult as it may sound.

Before you optimize your image, remove any unnecessary ones.

The first general rule that I practice in design or site performance is to remove any unnecessary imagery. These can come from a variety of places.

• Images of text. You should stop using these altogether, except for specific cases like a logo, or if you want to make your content easily shared as an image on social media. If you have a certain look that you’re aiming for with your text, consider using web fonts. Google Fonts is my favorite source of free, quality web fonts. Not only will you reduce the load time of your page, but your SEO will improve now that Google can actually read the text that was once in an image.
• Icons produced with images. There are a few options here. My preferred method is to use an icon set produced from a font file, like FontAwesome, which is also free. There are other options for free font-based icon sets, but FontAwesome is the only one I’ve ever used. You can also save your icons as .svg files, but that’s more complicated. More about .svg files later in this post.
• Lastly, eliminate any images that don’t help you achieve the goal of your website. I see unnecessary images all over the web. Keep in mind that just because images are engaging, it doesn’t mean that you always need to use an image. If it helps to support your goal, then an image is necessary. If it’s extraneous, remove it.

Once you’ve determined the images you’ll put on your website, determine the appropriate file type.

I won’t get into the technical explanation of optimizing images, but simply stated, an image is optimized through various methods of reducing the overall file size. Although this does mean that the image quality decreases, that’s not necessarily a bad thing. (You don’t need a massive image with tons of detail to display a 100×100 pixel image.) It does, however, mean that you must know what your (and your user’s) threshold is for image quality. Optimizing images is referred to as “an art, not a science” and this is where the “art” comes in. This is a subjective decision made for every image on your website.

So, let’s say you have a bunch of images you want to put on your website that you took with your iPhone or digital camera. These images are very large, and need to be reduced before you put them online.

First, it’s important to decide what type of file you’ll want your final image file to be. So, let’s consider image file formats. There are 5 different kinds of image formats appropriate for online use.

• .gif – Useful only if you need animation. If you don’t need animation, don’t save your images in this format.
• .png – Useful if you need fine detail at a high resolution. However, this means it holds onto more bytes, resulting in a larger file size. I typically only use PNG files when I need to preserve transparency in an image. Otherwise, I use JPG files 99% of the time.
• .jpg – Saving as a JPG is the best catch-all solution for saving images. The only trick here is determining your threshold for quality. For example, saving down to 40% quality will get you a much smaller file size, but it may make your image blurry. Sticking to 80% quality in image compression software is a good general rule.
• .svg – This is actually the best way to save your files, but is more complicated. Converting your image to SVG means it turns it into a vector file, making it scalable to any size you want. I have limited experience working with SVG files, but to my knowledge, it only make sense when working with simple line art like logos or icons. You can read more about SVG here.
• .ico – this is usually only used when creating a favicon file. If you don’t know what this means, it’s okay. You can ignore this type and only consider the above three.

Next, save your image at the appropriate size.

Like I referenced earlier in this post, you don’t need a gigantic image with a lot of detail if your final image size only needs to be 100×100 pixels. If your final image needs to be 100×100, save it at 72dpi at 200×200. This is a simple formula to account for retina screens. Again, there are lots of technical explanations of saving images for retina out there, but this post is meant to be simple, and to the point. I use Photoshop to create images at the size I need them.

This step does not apply to SVG formats.

Then, compress!

If you’ve saved your image as a PNG or JPG, you will also want to compress your images. If you are using any of the other formats, you can skip this step.

I did a compression test using three different images I took with my iPhone. Below, I compare three different ways of optimizing these images.

1000KB = 1 MB

Note – Save for Web is a method used in Adobe Photoshop for preparing images to be used online. You can read more about Save for Web here. Optimizilla is a free online tool that will take your original images and compress them, which also prepares them for online use.

From this test, it appears that Save for Web is not as effective at compressing images as a tool like Optimizilla, in most cases. Interestingly, Save for Web PLUS Optimizilla yields less success than Optimizilla alone, at least for this test. This is good news because it takes out the most complicated step, one that not everyone has access to use (Photoshop’s Save for Web).

Keep it simple, and you’ll be fine.

There’s no one definitive answer for ideal image optimization. It can be a complicated subject matter. However, for most of your image needs, you can feel good about saving them as JPGs, and then compressing them with a free online tool, like Optimizilla.