Optimising images is a crucial part of on-page SEO. Images are the most substantial element of a web page (in terms of file size) so getting the right balance of image quality and file size is crucial.
Adhere to the following best practices to optimise your images before you upload to your WordPress website, and you will go a long way to speeding up your web pages. And a speedy page is massively beneficial to your SEO.
Choose the right image.
Choose an image that visually enhances the paragraph you are writing is an excellent way of making your piece more engaging. Jeff Bullas suggests that articles with images gain 94% more views than those without images.
If possible, use images you have taken yourself. These are unique, don't require special licensing and offer your website visitor a more realistic feel for your business.
That said, producing imagery in-house isn't always possible. There are various resources to find free stock imagery but be aware these can be quite limiting and not very inspiring. Have a look at Unsplash and Pexels for free stock imagery and Freepik for images and artwork.
Alter the file name to describe the intent of the image
Make sure that your image file name describes itself. Don't keep default names (either those downloaded from a stock image site or uploaded from your camera). For example, "DCS4637.JPG" means nothing. "person working at a computer.jpg" is far more descriptive.
Keep the file make as concise as possible.
Crop the images to the correct pixel dimension(s).
There is no definitive dimension rule. However, there are some useful guidelines:
- Featured Images: 1200 pixels wide
- Hero images 1200 to 1920 pixels wide. Size depends on the design of your website, but a fixed width web page will determine the optimal width of the hero image.
- For images used within the page itself, try to make your image marginally larger than the size displayed on the screen.
- Background images (used as part of the page design) are best with three size variants -- one each for the Desktop, Tablet and Mobile versions of your website.
Choose the best file format.
The most common file type on the web is JPG which allows you to produce a good-quality image that has a small file size. If your design needs a transparent image (so the background shows through), then PNG is the next most common file type.
Modern web browsers allow for a format called WebP. WebP allows for far smaller file sizes and transparency. Adding WebP images to your WordPress website is beyond this article, but you could look at plugins to help with this. We use Litespeed web servers, and the Litespeed caching caters for WebP optimisations.
Reduce file size and remove unnecessary metadata.
Now you have an image that has been renamed and cropped and resized; the next step is to reduce the file size. At Webcetera we like to use Squoosh.
Optimising your image file size is an art. The image processing will remove some of the image quality but done well, will be indistinguishable to the human eye.
Squoosh is a fantastic, free tool produced by Google developers. It allows you to drag an image into your browser and do a before/after compare and contrast. It also offers options to resize (if you haven't done this already) and download in a variety of formats, including WebP.
Squoosh also strips out any unnecessary metadata embedded in the image.
Decide the purpose of the image.
If your image is purely to enhance the design of your web page, then it should be added as a background image. Background images are embedded using CSS, which opens up further options to display the image in various ways to aid your responsive design.
You can set background images to fill the containing area, even if that size is different across viewing devices. You can also use visually appealing effects like fixed scroll or parallax.
If your image is there to inform the content, then using the standard <img> HTML is the best way. Because the image is part of the content, make sure you carefully add Alt text and a Title attribute. WordPress makes adding ALT and TITLE easy, you simply click on the image in the Media area, and this provides you with the relevant text boxes.
Upload the image to your WordPress website.
If you've followed the steps above, you're ready to upload the now-optimised image to your WordPress website. Uploading is as simple as opening up your WordPress Admin Media area and dragging your image across. You might be adding images directly into Posts or Pages, and your theme might have different options, so it's worth looking through their help pages.
If you need more help, the WordPress help pages show you how to upload images.
Provide optimal Alt and Title text
Alt text (using the HTML alt attribute to the img tag) is crucial for SEO and Accessibility. The Alt text is what is read out by screen readers, hence why it's so important to make sure your Alt text is meaningful.
Informative Title text (the HTML title attribute to the img tag) is also good SEO practice. Google says it doesn't use it as part of its overall SEO scoring, but the Title is what appears when a user hovers over an image.
You've chosen an appropriate image, sized it and optimised its file size. This work isn't specific to WordPress; it's good practice for all websites. We focus on WordPress, so we discussed uploading the image to your WordPress website and how best to add it (as a design element or as a content element).
If you need any further help or advice, get in touch.