Before I explain how to optimize images for your website, let’s talk about why you should do it. There are two main reasons:
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.
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.
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.
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.
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.
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.
That’s all you need to do! ImageOptim often reduced the file sizes by 30-50%, all while keeping the image’s quality.
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.
Written by Melissa Jean Clark for Braizen.