How to Optimise Images to Improve Your Web Design

Have the images on your website been optimised? If not, they should be! There are many advantages to optimising images. For example, they make your web pages look ‘cool’. Truly optimised pictures should also load quickly and be SEO-friendly.

This article will focus on how to optimise images using widely available online tools. In addition, it will also show you how to optimise images in five simple steps.

1. Always use high-quality pictures

a. Obtain stock photographs – You can get your hands on these images for free or, if you would prefer, you can choose to buy them. However, whichever route you take, you need to ensure that they are of exceptional quality. Check out renowned sites such as Pixabay and Unsplash where you can download freebies. We also use Shutterstock and Adobe Stock when needed – there are several good licence free libraries out there.

If you decide to download a photo from these sites, it will usually be a large JPEG file. As a result, you may need to resize and compress it so you can upload a smaller image to your website.     

b. Take your own pictures – It is not always possible to use stock photos, especially if you need images of your products or team members. If you don’t have an expensive camera, this can be quite a challenge. However, a little creativity can go a long way to producing well-lit and professional-looking photos. For instance, did you know that a homemade lightbox can enhance the appearance of your products? Most smartphones have pretty decent cameras on too, so it could be worth experimenting with lighting and composition yourself, if you have the time and patience!

c. Hire a professional photographer. They’re not always as expensive as you think, and you will get your own unique images that give authenticity to your business, and if including team photos it’s a must to ensure consistency.

d. Create or licence graphics  or illustrations for your website – There are lots of tools available online that will allow you to include: 

• Infographics  
• Pictures with font overlays    

One of the most popular is Canva. 

2. Resizing images, fast loading speed and appearance

When incorporating an image on your website, you may have to compromise on size and resolution. If you are printing a physical picture, high resolution is desirable. However, large picture files in high resolution can slow down the page’s loading speed drastically.  

Remember, sites that take more than 2-3 seconds to load will jeopardise the user experience and your search ranking. If your audience consists of predominantly mobile users, then you will need to prioritise loading speed over high-quality pictures.

You can edit your images by using software such as Pixlr, a free, simple-to-use and browser-based image editing tool.      

Meanwhile, it is not always easy to enlarge low-quality pictures because they tend to look fuzzy. There are two main factors that you should consider when it comes to size:

a. The picture’s dimension – The sizes of print pictures are often depicted in centimetres (e.g., 8×10 or 4×6). Online images, however, are measured in pixels. For instance, the height and width may be specified as 100×100 pixels.

b. Resolution – You measure the quality and density of an online picture by using dots per inch (dpi). A professional print copy should be at least 300 dpi. Fortunately, you can save your online images at a lower dpi resolution (under 100 – the standard is 72dpi). 

How can you determine file size and image resolution?

If you are using a Windows PC, 

• Right-click on the image   
• Choose ‘Details’
• Go to the ‘Summary’ option

If you have a Mac, use Ctrl + click on the image, then select ‘Get info’.

How do I find out what the correct size is for my image on the site?

Most browser have Web Inspector tools to help you find out the frame that your image is sitting in. Typically, right clicking the image and choosing ‘Inspect’  will open up the inspection dialog and show you the Rendered size – this is the important one as it’s what dimensions the image is actually being displayed on the site.

What should you do if the image is too large for your site?

The majority of pictures taken with a digital camera will use up several megabytes of memory. Moreover, high-quality stock photos will be more than 1MB in size. Here are some tips on how to optimise images and their sizes.

• Resize your pictures – Resizing can cut an original pixel size by half or even more. However, make sure you keep the proportions the same to avoid distorting the image.
• It’s rare you’ll need images wider than 1200px in width. The majority of websites are around that width, so images will usually not need to be any larger than that.
• Decrease the resolution – You can use a program such as Photoshop to reduce a photo’s resolution so that it is web-friendly. You can save photos as 72 or 92 dpi.   
• Compress your photos – There are free programs available, such as TinyJPG, that can reduce image size without sacrificing quality.  
• On WordPress sites, there a several plugins we can use to optimise images without any manual input. Our favourites are Imagify and EWWW – each have different options and a premium version for more control and bulk optimisation – great for property websites and eCommerce websites. However, nothing beats a well optimised image in the first place – plugins generally have a ‘one size fits all’ approach which may not suit every image, plus it uses the servers resources to process images so can slow down a site or show artefacts of compression in the process.

3. Decide what type of image file to use

There are several image files available, such as:

• JPG or JPEG
• GIF
• PNG
• SVG

Each format has its own advantages and limitations. In order to select the best image type for your requirements, you should consider the following guidance.

Bitmap images – these are created from clusters of pixels, so when zoomed in become very square and can generally not be enlarged without looking terrible. Photo based images will usually be jpegs and are perhaps the most common format.

• Most web designers prefer JPGs because they are typically the smallest file size, accommodate all the image colours, and generally have much better compression.  
• GIF are usually used for very simple graphics or animated graphics – they are a little bit ‘old school’ now that animation is possible with SVG and HTML5.
• PNG graphics are used mostly for flat coloured areas, such as infographics and logos. While PNGs can be better quality than JPEGs, their space requirements are greater, and really should only be used if you need the graphic to have a transparent background as they typically are a much larger file size than a jpeg of the same proportions.
• SVG are ‘vector’ graphics and only work for simple shapes or logos. They are unique in that they are created by plotting points and curves, so can be scaled infinitely. You’ll often find logos or icons are set as SVG files so they always have a crisp appearance.

You can use image programs to save images as JPEGs or PNGs. There are also programs that will convert PNGs to JPGs and vice versa.

4. Be consistent with your image sizes, ratios and styling

Adopting a consistent size and style will make your site look clean and organised. For instance, you can use the same size for all your product images and then line up the paragraphs in one orderly column. 16:9 is a typical landscape ration for images ‘straight from camera’ but fo course the design can dictate any dimensions. For products, consider using square images to ensure consistency of display.

5. Use image filenames, captions and alternative text to boost your SEO      

Your photos will all have filenames, but rather than using generic names or a set of alphanumeric characters, why not rename them? Descriptive image titles can bolster your SEO efforts and file management system.

Be consistent when naming images. Use lowercase letters and 0 to 9 numbers, and choose hyphens instead of underscores. For instance, London-bridge.jpeg is better than LB01.jpg.

While most of your visitors won’t ever see an image’s alternative tags (alt tags), search engines will. Although Google cannot read a picture, it does understand alternative text. You should choose a suitable phrase to describe the image. If possible, add a targeted keyword.

Conclusion

Image optimisation will enhance not only your website’s overall look but also your SEO strategies. Every picture you include on your site can strengthen your visitors’ trust in your products and services. For this reason, it is essential that you only use high-quality and professional-looking images. However, you need to balance this with your site’s loading time. Fortunately, using JPG or JPEG files can satisfy the need for both quality and speed.