Images and Optimisation
Overview
The reasons for optimising are at the end.
The steps here cover the following:
- Correct file formats for the web.
- Correct pixel dimensions for your website.
- Smallest file size.
* There's a tutorial here for people with Macs who don't have Photoshop.
The Tips
Here are the main tips in brief. There are only two and a half tips, so we're talking really brief.
File formats
With little exception (gif, svg), the only file formats for web worth considering are jpg and png.
The general rule is: jpeg photos, png logos.
To expand on that slightly:
JPEG Photos
Pictures of people and things should be in jpg format.
PNG Logos
Logos and other vector graphics - ie. images with hard-edged graphical elements - should be in png format.
In addition, logo and graphic vector-based images should be at twice their intended size in pixels (4x by area) to account for retina screens.
Exceptions
Text over a Photo
If you want a photo with overlaid text it's best to lay it out on the website by using a jpg pic as the background image to a row or column, then type the text into a module.
It's best not to do your text as part of the image, but if you really have to, then png is the format to use for combined photos and text.
Deep Etched Items
For product shots and similarly singular and distinct photos of objects, free of their backgrounds, you'll need a file format with transparency, and that's png.
(There's a new format from Google which handles photos, hard edges, and transparency, all at smaller file sizes - WebP - but it's not well-supported as yet).
Pixel Size: Imsanity
I would normally advise an upper limit on image size, which would be a unique number based on the width of your specific website, but I've got you covered.
I always install a size-limiting plugin called Imsanity (as in Image Insanity) on the websites I build.
This plugin automatically limits the maximum image size which I set based on your website requirements. This prevents overloading the website by uploading huge images.
However perhaps you have huuuge images which would take a long time to upload, and besides, resizing them first is advisable in any case, which I'll explain in the next tip. In that case as a general rule, here's the width that will cover most websites:
1366px
File Size / Compression
Both types of image should be compressed as much as possible without losing quality.
This tip is more of a rule, and you should always make this the last step in your workflow before uploading the image to WordPress:
- Run images through ImageOptim
Important note
Running your images through ImageOptim should be the last step.
If you do any work on an image in another program you'll be working with an image that's been pushed to limits of being reduced.
When you save it again it will likely have artifacts - noticeable effects from having been over-processed.
Your workflow should be:
- Download photo from camera or other source
- Do color corrections and add effects etc
- Optional: Save a backup in a layered format (like .psd)
- Resize down (never up) and crop
- Save the final version of the image
- Run through ImageOptim
- Upload to WordPress
Temporary Note
(before I do a proper job on this rush-addendum)
These are my ImageOptim preferences, which I think I set ages ago. Apparently - according to clients - they differ from the default settings, and are pretty effective.
I'll look into exactly where they differ, and update this with the exact settings later, but for now, here are some screenshots.
Why Optimise?
Website performance - namely the ability of a website to load quickly - is crucial for many reasons. Here are the two most important ones, related as they are:
1. User experience
Firstly, a new visitor to your website will not wait around for the page to load. They will simply leave, and not come back.
2. Search Engine Optimisation (SEO)
Secondly, Google, and other search engines do not like slow websites, mainly for the first reason.
After all, search engines are in the business of ranking websites based on whether it is worth visiting them, so they will give slow loading websites a poor rank, meaning the website will not appear near the top of search results.
Website speed is the top ranking factor. Think of it this way: in an extreme example, a website that is so slow as to not load at all may as well not exist, in which case why should a search engine even list it?