How To Optimize Images For Your Website
Website speed is really important and a slow site can cost you visitors. It affects how long people stay on your site, it can cause high bounce rates, it affects where your site is placed in the search results, and Google is even testing a red ‘slow’ label for search results that will warn potential visitors before they click over to a site.
Earlier this year I ran some speed tests for the Seniors Ignite website because I had noticed that some of the pages were taking very long to load. Our test site was loading in just under 2 seconds, so that ruled out any web hosting issues.
Images were one of the culprits causing slow load times.
There were about 4GB worth of images total, and after I went through and re-optimized them, that dropped to about 1.5GB.
That’s a pretty significant difference.
Sizing images for the web can be tricky, especially with high-resolution Retina displays. Every image that is added to a web page has to be downloaded by site visitors – which increases loading times.
It also increases bandwidth which can put a strain on web servers, especially shared ones – and that can drive up hosting costs.
There is no way to get around having a lot of images on a photography site, and photographers understandably choose quality over size.
So, how can you balance the need for a fast website and not sacrifice image quality?
This article covers the right way to save and optimize images for the web, including the best tools that make it fast and easy.
How to Optimize images for your website
Size images before uploading them.
It will save you more time and it gives you more control.
File formats: JPEG or PNG
When to use JPEG
JPG’s are best for photos. JPEG’s are “lossy” which means some data is discarded from the image to reduce the file size.
When to use PNG
PNG’s are best for graphics, like logo’s, background patterns and anything with a transparent background. PNG’s are “lossless” which means all the color information is retained. This also means a bigger file size.
RGB Mode
Before you save an image, make sure your Image Mode is set to RGB. Adobe 1998 and CMYK do not display well on the web. You can check by going to the Image Menu in Photoshop: Image > Mode
What’s the best image size?
The size for the image will depend on what it’s being used for. You’ll want to use images that are sized appropriately for the content area or space where they’ll be displayed.
For example, the blog content area for Seniors Ignite is 650 pixels wide. We want to create an image that is sized for that space, and that is sized large enough for Retina displays.
For non-retina displays, the image doesn’t need to be any bigger than 650 pixels wide. For Retina devices however, it will need to be twice as big, or 1300 pixels wide in order for it too look good.
iPhone & Retina Sizes
Here is a complete listing of resolution for all browsers and devices.
On the surface the easiest thing would be to upload every image at double the size, however this isn’t ideal since it would significantly affect page loading times.
How to optimize your website for Retina devices
Some services like Squarespace have functionality built in to automatically serve images based on the type of browser or device of the user. That way only the largest image needed is displayed, rather than loading the largest image on every single page load.
If you have a WordPress site there are WordPress plugins that handle this as well. WP Retina 2x is one of the better ones. Some themes may have this feature built in as well.
How to save images for the web
Photoshop Save for Web
Photoshop has a Save for Web option that is much better for web optimization than just resizing and using the ‘Save As’ command. Here’s how to use the Save for Web feature.
First Resize the image to the size you need
Go to Image > Image Size
Then in the File menu, go to File > Save for Web
In the top right corner are the settings for choosing the file type
You can adjust the quality and a preview will be displayed with information on the file type, image size and how image size will affect load time. As you toggle the quality slider, you can preview the effect on page load time.
With JPEG’s, choosing the ‘Progressive’ option means initially a blurry/lower quality image will displayed, then become clearer as the image is fully downloaded.
There are two options for working with PNG’s: PNG-8 and PNG-24
PNG-24 is a much higher quality file, which also means one of the downsides is the file size.
Views
Different view options are available that let you see the different quality and options, and how they will affect loading times. Each tab shows you the file type, size, quality and loading time of the image based on internet connection speed.
The Original tab shows the original image preview along with file and size information. The Optimized tab shows the optimized image preview.
Both the 2-UP and 4-UP tabs display different options for quality and size which lets you experiment with quality settings and see the effect on final image size.
The Photoshop Save for Web option does a decent job of saving images, however I have found that image compression software seems to a better job optimizing for size without sacrificing quality.
Image Compression and optimization tools
Image compression programs reduce the image file size without affecting the quality.
Image Optim is a free program for Mac that compresses images without sacrificing quality. It’s fast and simple to use.
JPEG Mini is a another great option for image compression, and the pro version includes a Lightroom plugin.
Kraken.io is a web based optimizer that includes web storage. There is a free version, and a pro version with a WordPress plugin that can optimize images and resize images.
Lazy Load Script
Lazy Load is a JQuery script that delays loading images by only displaying image that are visible to site visitors. That way images are only loaded when a user scrolls down the page, which speeds up page loading time.
There are a number of WordPress plugins that do this, and some Gallery Plugins have this built-in as well.
Use descriptive names for your images
Search engines can only “see” text, which means they can see the name of your images, but not the images themselves. Having the right title helps Google associate an image with a topic.
Good example
- senior-portrait-session-ideas.jpg
- your-studio-brand-portraits.jpg
Bad example
- IMG38723987123.jpg
- photo.jpg
Use only letters, numbers and hyphens, and avoid any characters like ‘#,’ ‘!’ or ‘%.’
Limit images to your BEST ones
Image galleries with tons of images can cause very slow load times. You don’t need to show every single image from a session. Pick the best – no more than 20. Ten is even better.
Our Workflow
Right now we size images in Photoshop and then run them through ImageOptim. On the website we use the WP Retina 2x plugin to display optimized images on the web. For optimizing images that had already been uploaded to our site we use the Kraken.io Pro Plan.
Seniors Ignite | Seniors Ignite - Education for the Modern Senior Photographer
