Optimizing Images for your Site

Why you need to optimize images for your website

Before I explain how to optimize images for your website, let’s talk about why you should do it. There are two main reasons:

  1. Website hosting fees – the more images you have on your site, the more server space your website will need. Optimize those images before uploading them so you don’t rack up extra fees with your website host.
  2. Website speed – have you ever waited for a slow website to load? Don’t make your website visitors wait! By optimizing the images for your website, you’re improving the user experience.

Images in this Blog Post

I downloaded a bunch of gorgeous, free images from Unsplash. Check them out if you need free, high-quality images for your website. The downloaded files are huge! They range in size from 1 MB to 7 MB. Keep reading to learn how to optimize them for web usage. Don’t have fancy software? I’ve got you covered, check out Option #3, for optimizing images with free software.

Option #1 – Adobe PhotoShop Lightroom

Optimizing Images for your Site

Adobe Photoshop Lightroom: exporting images from your image library.

Lightroom is a popular program for photographers to organize, manage, and edit their photos. In Lightroom, you can select multiple photos to export, re-name, and resize them. If you’ve been using Photoshop to resize images, switching to Lightroom could save you a lot of time.

FYI: In this post, my notes and screenshots reference the latest and greatest version of Lightroom. If you’re using an older version, it should still work. Let me know in the comments if you have any issues.

If you haven’t used Lightroom before, follow Adobe’s helpful tutorial for importing images to Lightroom.

Exporting Images in Adobe Lightroom

Optimizing Images for your Site

Image export settings in Adobe Photoshop Lightroom

  1. In your Lightroom library, select the images you want to export
  2. Keep those images selected, right-click on one of the images and click Export
  3. Review the settings in the Export menu:
    • Export Location: select where to save the exported files on your computer
    • File naming: re-name the images if you want
    • File settings: Color Space should be sRGB
    • File settings: I recommend limiting the file size to 250k or 275k
    • Image sizing: tick off Don’t Enlarge to ensure no images are stretched
    • Image sizing: use the Long Edge option to set a maximum size for the images. I recommend 2000px, at a resolution of 72 pixels per inch

Option #2 – Adobe Photoshop

Optimizing Images for your Site

Adobe Photoshop: Save for web panel

If I have lots of images to optimize, I use Lightroom. If I need to optimize one image, I usually use Photoshop.

Photoshop’s Save for Web panel has been around for years. Depending on what version of Photoshop you have, it may be in a different spot. Instructions in this post are for the latest version of Photoshop.

  1. Go to File > Export > Save for Web (Legacy)
  2. Image Size (bottom right): set your image to a maximum width of 2000px. Go smaller if possible!
  3. Quality (top right): set this to 30, and tick off the Optimized checkbox
  4. Zoom in and out on the image – does it still look good at 30% quality? If not, increase the quality.
  5. Click Save… to export your image

Option #3 Pixlr

Optimizing Images for your Site

Image editing with Pixlr: click Adjustment to see the editing options.

Pixlr is lovely, totally free image editing tool. You can use it in your browser, or download the apps for your Mac or PC computer, iPhone or Android phone.

For this blog post, I’m using the free in-browser version of Pixlr. Sign up for an account to get started.

  1. Login to Pixlr
  2. Click Web Apps in the menu or go to https://pixlr.com/web
  3. Click Launch Web App
  4. Click Browse to upload your photo
  5. Click Adjustment to see your editing options
  6. Click Resize
    • Tick off Keep porportions
    • Set the width to maximum 2000px
  7. Click Save (top left corner)
  8. Adjust the quality slider to 40%
  9. Click Save download the new image

Reviewing Your Exported Images

Take a look at the images you exported. Compare them to their full resolution version. Do they all look good?

Occasionally the exported images will lose a little bit of sharpness or become pixellated. If that happened for you, go back into Lightroom / Photoshop / Pixlr and try exporting them again. Experiment with the Quality slider. If you used the Limit File Size option in Lightroom, try using the Quality option instead at 45%.

Does reducing the quality of your images to 45% sound insane? Try it, and see how it looks. You might be surprised at little the image quality changes. You want to squash those giant file sizes, and keep the image quality.

Optimizing The Exported Images

Now, you should have a nice, small file from Lightroom, Photoshop or Pixlr. Next, you’re going to make it even smaller.

I use ImageOptim to make the image sizes as small as possible. It’s a free program for Mac. If you’re not on a Mac, check out ImageOptim’s tips on alternative programs for Windows and Linux.

  1. Launch ImageOptim
  2. Drag your exported images into ImageOptim
  3. ImageOptim magically reduces the file sizes while retaining the quality

That’s all you need to do! ImageOptim often reduced the file sizes by 30-50%, all while keeping the image’s quality.

The Results… From 5MB to 177 KB

Optimizing Images for your Site

Can you believe how small this image file is? The picture still looks great, and the tiny file size will save space on your website host, and help your site run as fast as possible.

  1. Original image size: 5 MB
  2. Image exported via Lightroom: 232 KB
  3. Image exported via Photoshop: 199 KB
  4. Image exported via Pixlr: 202 KB
  5. Optimized with ImageOptim: 177 KB

Written by Melissa Jean Clark for Braizen.


Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.