Image Optimization: how to speed-up sluggish websites?

Image optimization is necessary to make photos small enough for web use. Unnecessarily large images are often the reason a website is slow. Typically photos are far too large (height and width) and also too big (file sizes) to use directly on a website.

Speed matters. A slow website is going to put users off and have a negative effect on your SEO.

What does optimizing images for the web mean?

To optimise images for web use they need to be made:

• First step: Physically smaller (or perhaps cropped to right size and shape). Obviously it depends how you are using the image on a web page as to the width and height you need. However, typically 1024 wide x 667 high should be plenty big enough for most uses. Unless you are looking to cover the whole screen which will require 1920 wide x 1080 high.
  
• Second step: And then have the quality reduced (web optimised ) so they are suitable for web use. (Use the “Save for Web” function.) Photos for print need to be 300dpi but photos for web pages only need to be 72 to 96 dpi.

So, for example, you might start with a 2500×2000 5mg photo from your camera. Then after reducing its size and quality you might end up with 1024×667 with a file size of 150kb (a 90% plus file size reduction is typical) for use on the web.

The aim of image optimization is to make images:

Image optimization is a careful balance between quality and file size.

But you need to allow for varying screen sizes:

• Images need to work across multiple screen sizes and shapes. So if images are too portrait or too landscape they are probably not going to work well across large landscape screens down to small portrait screens.
  • For most in page situations a traditional landscape 4:3 aspect ratio, a square (1:1), or portrait 3:4 proportion works well.
  • Article featured images and images used on Social Media need to consider the different requirements of particular platforms. A compromise of 1080 square suits posts on most platforms. For more detailed information on the best social media image sizes.
  • Banner images are likely to be landscape but be careful that when they shrink to fit small portrait mobile screens they are still useful.
  • Product images used on ecommerce sites tend to be portrait 3:4 or square and at least 800 x 800 (much larger – 2048 x 2048) if you expect people to zoom in.
• Images will now usually be coded to be “responsive” so they expand or contract to fill the space they are allotted.
• Designing web pages to work well on small mobile screens means small images no longer fit comfortably within the text with text flowing around them. Consequently images now tend to be larger and fitted within their own space.

So images need to be big enough to work on the big screen and clear enough to work on a small screen.

If you do not optimize your images you will have a dramatic affect on your website download speed, put users off and make a mess of your SEO chances.

Always use descriptive file names

Use descriptive file names for your images, not the junk name your camera uses. Because descriptive names help you keep track of which image to use but more importantly, they help SEO as your images can be used in the image searches.

Be brief but informative (3 or 4 words should be enough), use keywords where appropriate but don’t stuff with extra keywords for SEO.

Use hyphens between words. Otherwise do not use punctuation (like apostrophes) or other special characters.

Image optimization within WordPress

Native WordPress does some image optimization automatically on upload. Very large images will reduce in size but they will still be very large. For example, a 3mb 3000 x 4000 photo may be reduced to 600kb 1920 x 2560. Still too big for general web use. Ideally, all images should be less than 200kb, most being much less.

There are image optimization plugins for WordPress, but the results are variable.

I have found ShortPixel to be a good WordPress image optimization plugin. It has 3 levels of quality optimization to choose from and you can set maximum image dimensions. Taking the example of the 3mb 3000 x 4000 photo again. ShortPixel, with maximum file dimensions of 750 x 1000, results in file sizes of 158kb (medium optimization = Glossy) or 78kb (maximum optimization = Lossy).

With ShortPixel you get 100 Free optimization credits per month and you can pay for more. Note: optimizing one image can use up several credits as WordPress creates various-sized copies of each image. At least 3 from basic WordPress, perhaps another 2 added by the theme and then another 3 added by a plugin such as Woocommerce. So optimizing one image uploaded could use 8 credits in this example.

Renaming images: You should rename images descriptively before uploading them to WordPress. You cannot do this easily after uploading images to WordPress and your SEO will suffer.

Personally, I would still recommend optimizing images before uploading to WordPress. You will get better results by resizing and optimizing your photos to match how you are going to use them.

Note: Cameras create photos with meta data (EXIF) which indicates which way up they should be. Most modern devices read this data and present your photos in the right orientation. WordPress uses this data on upload to correctly orientate images. But, with some image editing software you may need to turn the photo the right way up yourself and image optimizing may remove the EXIF data.

WordPress also has some basic image editing capabilities. So you can crop, turn and scale images directly within WordPress. This is useful if you just want to make simple changes. For example, reducing an image that is too large or cropping a headshot. But most image preparation is best done before uploading.

WordPress also creates some small versions of images you upload and you can choose which version to use in your content.

Typically your standard choice is Full size, Large, Medium and Thumbnail. Themes and plugins may add extra sizes.

If you change the Media Settings to give you different image sizes. Then images already uploaded need to be reprocessed to create the new sizes. You will need a plugin such as Regenerate Thumbnails to do this.

Which image formats should I use?

Use JPG for most photos – this format optimizes very well because JPG works on small spots of colour. However, be aware that every time you save a JPG it losses a little bit of quality so keep an original safe. (JPEG is the same as JPG. JPG is more commonly used.)

PNG for simpler images such as drawings and logos. Also good for screenshots as edges are sharp and text is clearer. PNG works best when there are large blocks of the same colour. One significant advantage of the PNG format is it can deal with transparencies. So if you needed a photo with transparencies you can use PNG. However, a PNG of a colourful photo is likely to be much larger than a JPG. (Twice the size up to 10 times the size is common in my experience.) So use JPG when you can.

Note: For product photos, PNG may be better. Where you want transparency or where the photo might be enlarged on the screen to look at the detail.

GIF for animations. Please only use animation if it is useful and the best way of showing what you want. Be aware that animations require very large file sizes and can create accessibility problems.

New image formats you may come across are:

SVG which are good for scalable graphics – good for diagrams and simple images that need to be displayed accurately at different sizes but tends to produce big files.

WebP is the new format for web images which may well replace all the above as it is designed to have smaller file sizes but still maintain quality. It is a versatile format that works well for a wide range of images, including photographs and illustrations with transparency and animation support. See WebP from Google. WordPress now supports this format (from July 2021) but it is not well supported on older technology. You may find it more difficult to work with this format as it is not supported by all image editing software. Some web hosting packages now offer automatic conversion to WebP format.

AVIF is another new image format with superior file compression capabilities – better than WebP even. It is particularly suited to high quality photos. WordPress now supports this format (as of March 24) but Google doesn’t so your images won’t appear in any google image searches therefore avoid for now.

Tools you could use to optimize images:

If you don’t have a program or an app already that will crop and export images optimised for web use (Photoshop = save for web) then here are some to consider.

If you prefer software:

Best if you have lots to do and will do so in the future.

Adobe Fireworks

The web designers standard web image optimisation software for many years. I have used it for 20 years and for image optimisation I think it is the best option but Adobe disagrees and has discontinued it.

Adobe Photoshop

Photoshop is the professional choice for photo editing. It is an expensive option if you just want to prepare a few images for your website. So here are some of the FREE or CHEAP alternatives:

GIMP (GNU Image Manipulation Program)

This is an open-source program that is an alternative to Photoshop so it is a professional-level program that is free. There are loads of plugins including a “Save for Web” one to make life easy for you.

JPEGmini

A photo optimisation app is available for a licence fee or a free to use web service.

Online image optimizers:

Best if you have a small number to do or only an occasional need.

Imagify or TinyPNG

Free to use web services to resize images up to certain limits.

Image converters:

Filezigzag

If you just need to convert a png to a jpg then you can do this with Filezigzag online file converter. Lots of formats are available and you can do up to 10 file conversions a day for free.

Adapter

If you have a lot of files to convert then you could try this Free App for Windows and Mac. It has batch conversion capabilities.

Free tools for creating your own graphics:

Canva

Canva is a free to use online graphic design platform. Useful for creating social media graphics, presentations, posters, documents and other visual content. It includes templates and a photo library.

Inkscape

An open-source vector graphics editor, with capabilities similar to Illustrator, CorelDraw, or Xara X, using the W3C standard Scalable Vector Graphics (SVG) file format.