Image Optimization

Owned by Rachel Hart (Unlicensed)
Apr 27, 2020
2 min read

Having large image files on your website can slow down your site, eat up your users’ mobile data, and hurt your search engine rankings. At the same time, we understand that imagery can help users’ experience with your site and support your brand.

Here are a few ways to make sure your images display well on any device without bogging down your site with giant files.

Use Appropriate Image Dimensions

One of the biggest contributing factors to large image files is that the dimensions are bigger than they need to be. Even photos taken with your phone these days are often much larger than we need. Your first step to reducing file size is to resize the image according to our recommended https://georgiagov.atlassian.net/wiki/spaces/KB/pages/769654795 .

Compress with Free Online Tools

You can greatly reduce your file size with little to no effect on quality with free online image compressors. On the DSGa team, we frequently use these:

Do you know the difference between JPEGs and PNGs?
Typically, JPEGs work best for photographs, and PNGs work best for flat, graphic images. You can also include transparency in PNGs, but can’t in JPEGs.

Optimize Your Images in Photoshop

While free tools work just fine in most cases, you might sometimes notice small changes to your image after compressing with an automatic tool. For example, certain colors might become more dull after compressing with one of these tools.

If you have access to and experience using Adobe Photoshop, you might be able to achieve some more consistent results. Here’s how we recommend reducing your file size in Photoshop

  1. Open the “Save for Web” window. In newer versions of the software, this is listed as a legacy feature, but we still find it useful. Access this in the menu under File > Export, or use the keyboard shortcut:

    1. on Mac: Cmd+Option+Shift+S

    2. on Windows: Ctrl+Alt+Shift+S

  2. Compare the quality of the optimized image to the original with the 2-Up tab

  3. Adjust settings to create the smallest file size while maintaining quality. We recommend:

    1. Select the correct file type from the dropdown

    2. Adjust the Quality (you can often take it down to 50-60% with little noticeable difference)

    3. Check the “Optimized” box

    4. Adjust the Image Size (if you haven’t already)

  4. Save!