How to Optimise Images to Improve Your Web Design

2021-04-29T13:31:01+01:00April 14th, 2021|
  • how to optimise images

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.

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 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? 

      c. Create or obtain graphics 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.  

Remember, sites that take more than three 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). 

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’.

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.
  • 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.  

   3. Decide what type of image file to use

There are several image files available, such as:

  • GIF
  • JPG or JPEG
  • 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.

  • Most web designers prefer JPGs because they require less memory space and accommodate all the image colours.  
  • PNG graphics use mostly flat coloured areas, such as infographics and logos. While PNGs are better quality than JPEGs, their space requirements are greater. PNGs also look stunning against transparent backgrounds.

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 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.

  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.