Optimizing photos for your website

Featured | Photography | Rhino Group Blog
Photography BG

Why optimize images?

 

So you’ve taken some great photos that represent your business, maybe some examples of work you’ve performed for your customers, or other images that will help bolster the appearance of your website. You upload them to your site and add them to your pages, but now your site is loading at a snail’s pace. What happened?

Today’s cameras typically capture images with sizes between 5 and 15 Megabytes. It may not seem large if you’re making printouts, but when the image needs to be delivered over the internet, it must be considerably smaller to load and display quickly on a webpage; especially for users viewing from a mobile phone.

To solve this problem we’re going to shrink and compress our images so the file size is ‘web-friendly’. Your impatient users will be rewarded with files that download quick and use little bandwidth.

Another important benefit of image optimization is the potential for improvements in your search engine rankings. Modern search engines include page-load speed as part of their ‘grading’ mechanism for your site. Fast-loading images help to make fast-loading websites and Google loves speedy websites.

 

So let’s discuss a couple methods to shrink your image sizes and tune your website for performance.

 

1. Optimizing images before uploading

 

Here’s some quick target specs for fast-loading web images:

72 DPI – JPG format

While the target dimensions for a photo depend on its location, you can still use some basic guidelines and adjust from there.

Location of photoTarget width
Page content – aligned left or right1024px
Page content – full width1280px
Hero banner1920px
Product photo1920px

 

If you use a CMS like WordPress, it will take your uploaded image and automatically resize it into a thumbnail, medium, and large size. The dimensions for those sizes are easily configured in the Admin > Settings > Media section. Due to this convenient, built-in feature I would recommend WordPress users upload a 1920 pixel wide image in all cases. Keep in mind that WordPress does not compress the images during this resize process, so that still needs to be done beforehand.

Note: Uploading a large photo for a product will help accommodate any image zooming functionality that might be part of the e-commerce software.

 

Web-based image optimizers

 

kraken.io
https://kraken.io/web-interface

Kraken has a web-based uploader that does a great job shrinking the file size of your images. Just drag and drop your photos right into the browser window and kraken takes care of the rest. There’s also an Expert mode for fine-grained control of quality and other settings.

Note: The drawback of this solution is that the Free version limits you to file sizes less-than or equal to 1MB. This usually means you need to scale and shrink your images a bit before running them through kraken. We use it for a final optimization after an initial export from Photoshop.

 

Compressnow
https://compressnow.com/

Compressnow is a really simple online tool allowing you to upload your photos, set a compression level and get optimized images in return. Best of all, it’s totally free.

 

ImageOptim
https://imageoptim.com/online

This is an online companion to the Mac desktop tool below. It’s simple, but it’s free and works well. Plus, it doesn’t have the same file size limitation of kraken.

 

 

Desktop image optimizers

 

 

Photoshop (WIN | MAC)
https://www.adobe.com/creativecloud/photography.html

The ever-popular. Being an old timer, they don’t make it like they used to, but fortunately, the image export still works the same.

File > Export > Save for Web will bring up this dialog with some compression options:

 

 

 

 

RIOT (WIN)
http://luci.criosweb.ro/riot/

This tool is tailored specifically for compressing images. It’s only available for Windows OS, however.

 

ImageOptim (MAC)
https://imageoptim.com/mac

 

This is a free and open-source Mac app that is dead-simple to use. It removes invisible junk like EXIF data and shrinks your images while maintaining good quality.

 

 

 

2. Optimizing images after uploading

 

WordPress Plugins

 

WP Smush
https://wordpress.org/plugins/wp-smushit/

This plugin can be used to bulk compress all of the images that you’ve already uploaded or configured to automatically compress media uploads on-the-fly. One feature I love is that it allows you to set a max width and height and WP Smush will resize your images as it compresses them. It even integrates with many media gallery plugins.

 

EWWW Image Optimizer
https://wordpress.org/plugins/ewww-image-optimizer/

This plugin has a very similar feature set to WP Smush if you would like to try something different or have issues with your Smush install. They also offer a paid version that will compress images in the background on their remote server using more advanced algorithms.

 

How do you know if your images are compressed enough?

It’s difficult to know whether you’ve done all you can to optimize your images without using some tools to evaluate your sites performance. Here’s a few that will give you some feedback on file sizes and whether you have some room for improvement:

 

One last thing to keep in mind.

There is a drawback to optimizing image sizes. The more you compress your photos, the more the  quality will be reduced. It’s always a balancing act trying to get the best performance to quality ratio, so be sure to evaluate your image quality after doing any bulk compression operations.

Share

Share on facebook
Share on twitter

Related Articles

Ready
to grow??

Schedule a digital strategy meeting

Get in touch

Take a moment to fill out this form and tell us about your digital project. Our team will review the request and get back to you as soon as possible.