You’ve just created your first website and it’s ready to go live, it’s beautiful and you’re quietly or not so quietly chuffed with yourself. However, once you send your new baby out onto the world wide web you quickly discover your pages are loading so slowly your grandma and her zimmer frame could have run a marathon faster ……what could be the problem? Most likely one of the big issues you’re facing is that your images are not optimised correctly for the web. This is one of the most common issues among newbie web designers. Optimised… what the heck does that mean? …. don’t worry my friend, in these five tips I will explain everything. Before uploading an image to the web there are a few steps we need to follow to ensure it is not going to cause any delays or problems on your website, after all, you want to make sure your users have a great experience on your website and stick around to enjoy all the delicious content you’ve added for them. Before we get stuck in what does ‘image optimisation’ actually mean? Image optimisation is the art of reducing image file sizes without losing quality. This is done prior to uploading to your website and ensures faster page load time, which in turn is good for SEO. SEO is an entirely different rabbit hole but in a nutshell, it’s about getting your website images among other things to rank on Google and different image search engines. Tip No. 1 – Which File Format Should You Use?
JPEG, PNG, SVG, PDF, EPS, GIF……what on earth are some of those you’re probably wondering. There are a lot of different file formats out there for images with JPEG (aka JPG) PNG and GIF being the most common for websites. Depending on the website or photo editor you’re using there may be a default file type they use, however, it’s best to find the one that suits your purpose. JPEG (.jpeg, .jpg) is popular for photographs on websites because it supports millions of colours making it ideal for those real-life photos. It also creates a smaller file size which will greatly help speed up your website. GIF (.gif) well this one might be familiar from social media. GIF supports animations which is fantastic, you might recognise GIF as those fun little moving images one might add into a conversation on Facebook. GIF is older and is of lower quality than its counterparts so doesn’t work well for your detailed photographs, so only use this for animations. PNG (.png) this format is of better quality than GIF and supports more colours. Although the files are larger than .jpg, .png suits text or iconic graphics like logos where you need a transparent background. Tip No. 2 – Cropping an Image to Size There are some wonderful photo editors out there that can help with this, Photoshop or a free alternative GIMP are both great for optimising your images. Cropping is the first step to creating the ideal size. When looking at your image in your photo editor consider whether or not you need to use the whole image. Maybe you have too much sky or maybe you have the perfect photo but on one side you can see the blur of someone’s chubby finger obscuring the lens. Crop out unnecessary overflow from your photo. Another point to contemplate is the location of your focal point on your photo, believe it or not, having your focal point in the centre of your photo might not be best. Now, what are you on about? ….. well among the world of photography there is an interesting method followed to draw the viewer into the image, so every part of it can be appreciated, this is known as many things including the famous Golden Ratio/Fibonacci Sequence or the more simplified Rule of Thirds as demonstrated below. With a focal point in the centre, the viewer is not encouraged to look anywhere but the centre of the photo and so their attention is locked on that focal point and everything else becomes static and is missed. Now ponder shifting the focal point to the left or right, this creates breathing room within the photo and will draw the eye across the image to explore what else might be interesting in the image. Another option is to have the focal point at the bottom or top, left or right, this then draws the eye up and across so the photo, this way its entirety can be enjoyed.
Image Divided into Thirds with Focal Point Offset
Have a play with these ideas on your own photos, you might find you have quite the artists eye. Tip No. 3 – Reduce, reduce, reduce…. I can’t emphasize just how important this step is. In order for your photos, logos, graphics etc to look great and perform well on your website, they need to be able to load quickly and reduced file size is key. Generally, the dimensions of images are measured in pixels, width by height, for example, 200px wide by 100px high, in that order. On a website, you have a limited amount of screen real estate and we will often need to reduce the original size of our image to fit its spot on the page. There are some wonderful guides online that will give you some ideas on the dimensions needed for your images on your website. Another useful tool to help decide what size your image should be is the chrome extension called ‘Page Ruler Redux‘, I use this all the time. ‘Page Ruler Redux’ this allows you to create a box on your screen where you would want your image to go, it then gives you the dimensions of that box so you know exactly what size to make your image.
Let’s say you have decided your image needs to be 1200px by 600px to fit nicely on its little slice of paradise on your page, but wait, your original image is 5000px by 2000px that’s not going to work, now it’s time to reduce the size of that massive image. Uploading the image as is would cause serious speed issues for your website as it would take longer to download. You need to make sure the image is reduced prior to uploading, this can easily be done using your photo editor. Once you have the image cropped and resized/scaled to fit the new dimensions you should consider the quality and resolution of the image which can be adjusted when exporting your new file. Resolution can have a big impact on your file size so this should be adjusted as much as possible without compromising on the quality of the image. Generally, the resolution is measured in dots per inch (dpi) or pixels per inch (ppi). For the web you should aim for somewhere between 92dpi and 72dpi, most monitors can’t display higher images anyway.
Finally, there is the quality, this can also be adjusted using most photo editors, I find a reduction from 100% to 70% is enough to make a dramatic impact on the overall file size without compromising on quality.
Tip No. 4 Plugins If you are building websites using WordPress there are many plugins you could consider to help further optimise your images and reduce load time for your website. Some popular optimisation plugins include WP Rocket or WP Fastest Cache. Some hosting companies offer great built-in optimisation, my preference is SiteGround because they also offer great support and reliable hosting. If you are interested in joining with SiteGround please check out my affiliate link here SiteGround Hosting. TinyPNG is another quick and easy drag and drop style app that allows you to upload and optimise .png and .jpg files. If you already have a website and want to see how it is performing currently you can use GTmetrix, simply enter in your URL and GTmetrix will analyse your site and give you a break down of areas that need improvement. Tip No. 5 SEO (Search Engine Optimisation) A part of good SEO is naming your images something that Google will like so that Google is more likely to bring users to your website. You should always include an ‘alt text’ this is essential not only for SEO but for accessibility, what on earth does that mean?. Accessibility means that anyone with a disability, for example, the vision-impaired can still use your website. If they can’t see the image due to limited vision their screen reader will read aloud to them your alt text which will explain what your photo is of, so you need to be as descriptive as possible to create a good user experience.
Alt tags are also displayed if for any reason the image itself doesn’t render on the page; alt tags are a must. Also, name your image files appropriately as this is good for SEO. Instead of leaving your file name as something like ‘IMG236′, rename it to something relevant google will, maybe “Chocolate Ice-Cream Sundae’ for example. This will help people searching for chocolate ice-cream sundaes to land on your website. I hope this was helpful, happy website creating everyone 😊

WANT TO CHAT?

I’m never too far away, so if you’d like to talk about your web design needs please get in touch!