How to optimise images for your website

An often overlooked aspect of websites content is images. They can take time to download and as such can affect your Google rankings and even bounce rate.

https://polyspiral.com/sites/default/files/2021-10/optimise-images.jpg
Image sizes

Each pixel takes up a little bit of memory and thus time to download. If an image is very large obviously, it will take longer to download. 

A slow website can mean a potential customer gets tired of waiting and goes to your competitors’ websites.

You might think it’s rare in the age of superfast broadband that download speed would matter, but even with 5G being available in a lot of places now, people are still restricted by data and slower speeds in rural areas.

Website speed is a ranking factor, so having a lot of slowly appearing images on a web page could cost in enquiries. 

Be sparing with your slideshows 

Slideshows are a series of potentially large images in succession, so you can imagine these can really slow down your site. So only have three to five slides and only have one if you really need to show off your business in this way. Having a large header image can be just as effective as a slideshow.

It’s possible and a bit lazy to show your images as smaller than they are physically. This means your image can be shown at 300 pixels wide but actually be 1000 pixels wide. This is set in the code of the page rather than it showing the image at its actual size. 

It's lazy because it’s much easier to upload the image at whatever size is and adjust it in the page afterwards, than making sure it's the right size when you upload it. You should resize the image first. With WordPress you can edit this in the media library.

Images should be set to 150dpi (that’s Dots Per Inch, a little archaic term left over from the days of print) it used to be 72dpi as old screens used to display at a resolution this low. If you look on an old computer monitor it looks a little blurry compared to today's hi-res and retina display screens. A slightly blurry image can give the impression of low quality so sharp images are a must if you want to look your best online.

Image formats 

If you can use an SVG (Scalable Network Graphic) as the logo on your website then do, as it’s much sharper than a PNG (Portable Vector Graphic). If you find the theme you're using doesn’t support them then a PNG is preferable to a JPG (Joint Photographic Experts Group). JPGs can't have transparent backgrounds and most logos have areas where a transparent area is a nice to have if you have a coloured background it sits on. You won't want your logo on a really bright background but having the option for a light cream or grey background helps the site look more appealing depending on who the website is designed for. PNGs and SVGs are great for this purpose. GIFs (Graphic Interchange Format) can also have a transparent background but the edges are not antialiased - in other words, they look all bitty round the edges and ew!

Your graphic designer should supply a range of file formats of your logo. 

For all other images on your website use JPGs. They're quicker to download, good quality and preferred by Google. 

Alt tags

This article is about optimising images but here's a little about alt tags, also called alternative text. 

This is a little bit of text that you put where the image will appear in the web page. In most if not all CMS platforms they'll be a field for alt tags. These are good for people who use screen readers and Google rankings.  But as with writing text content, don't keyword stuff, that means don't repetitively use a keyword over and over in the alt tag field. 

Write something explanatory text about the image, not more than 5-6 words.

Software

As a graphic designer, I usually use Adobe Photoshop and Illustrator but they can be large and complex if you just want to resize an image or convert it from a PNG to a JPG. For simpler solutions there's:

GIMP, Google Drawings and Canva. These are much simpler to use, cheaper and won't eat up masses of RAM on your computer. 

Image file names 

Please don't put anything other than letters, numbers, dashes and underscores. NO spaces or other characters. Even if you've got away with it until now. There will come a day and & sign that will confuse the browser and break something. Trust me 23 years building websites I've had to track down lots of issues some of which lead eventually to a badly named file. In fact recently with a Drupal 7 to Drupal 9 upgrade, a PDF with a + symbol caused an error and we tracked it down to that PDF. Save yourself future bother by naming your files sensibly!

Filenames are relevant in google search 

File names have a bearing on your google rankings. so as with alt tags, name your files with an explanatory phrase. So 12345.jpg isn't as good as my-awesome-wellington-boot.jpg. Use hyphens to separate words.

So make sure your images are as small as possible without loss of quality, and name them in an explanatory way.

 

If you'd like help with your website or you're after a new one click here

Website Design