How to Optimise Images for the Web without Losing Quality

Images have a great way of creating a descriptive picture in the minds of readers when used alongside a written text; they give better meanings to written texts. As a result, they have become a norm on the internet so much that bloggers use images in their blog posts to create a mental idea of what their post is about. Besides, we love visuals – a combination of text and graphics is more fun than reading bare text, plus it gives more information too.

It is now clear that we must use images, it is even clearer now that it determines your SEO rank on Google’s search result page. Large images slow the rate at which web pages load. Websites that take too long to load usually suffer from a high bounce rate as visitors who had a bad experience using the site are always quick to leave. Also, Google rates site speed as an important factor in its search rankings, so slow websites will not rank well. Consequently, it is imperative to know how to optimise images for the web without losing quality.

Optimizing images for the web involves delivering images in the best format, scale, resolution and size while maintaining the image quality at the smallest size possible. See the different ways on how to optimise images for the web without losing quality below.

How to Optimise Images for Web With-out Losing Quality

• Scale Images

One of the easiest and most effective method of image optimisation. It involves resizing the dimension of an image.

Technically, image optimisation involves optimising the total number of pixels in an image and optimising the number of bits required to encode each image pixel.

When scaling images with desktop software such as Paint and Gimp, you are simply reducing the number of unnecessary pixels that will be displayed; this is quite easy with Paint – a Windows software tool. To scale images with Paint, open the image in Paint and click on resize to scale. Ensure to resize image with pixels.

To use Gimp, it has to be installed on your computer. Open image in Gimp, click on image and then click on Scale image to scale.

• Compress File Size:

Consider presenting a scaled image in the smallest file size possible. There are some tools to do this.

Tools like Compressor.io, JPEG Optimizer, ImageOptim, Kraken, Crush Pics etc. provide a quick and easy way to reduce file size while retaining image quality and also help to remove hidden data in image file like additional colour profiles, metadata (geolocation of where the image was shot) that are otherwise not needed.

• Select Right Image Format:

Select the right image format for different purposes. Optimizing an image is a function of the lossy and lossless algorithms used. The differences between the JPEG, PNG and GIF formats are dependent on whether a lossy or lossless algorithm is used to compress and optimise images.

An image is made up of pixels.  A rendered image with some amount of pixel data lost has been optimised with a lossy algorithm. On the other hand, a lossless algorithm compresses pixel data to optimise an image. In both cases, the sole aim is to reduce image size while retaining image quality.

If you want to serve complex images, the JPEG format is your best bet because it uses a combination of lossy and lossless optimisation to reduce file size. They are perfect for beautiful photographs and product photos containing lots of colours. This is due to its unlimited colour palette.

For animated pictures, use the GIF format.  GIFs are perfect for small image sizes with fewer colours. The colour palette is restricted to 256 colours, and as such remains a poor choice for complex images and product photos.

To present an image with high resolution and fine detail, use the PNG format. PNGs do not apply the lossy optimisation technique and as such presents the highest quality images possible as a consequence of higher file size. Also, PNGs appear transparent and are accurate for branded images. However, a thing to note is, when using PNGs for branded images, avoid incorporating texts, as texts are neither clickable nor zoomable. Use a web font instead.

• Use Photoshop:

Photoshop allows you to create web-optimised images by simply saving images on it.

To save on Photoshop, click on File at the top left corner > Export > Save for web. Next, change image quality to either medium or high depending on your choice and save the image in JPEG format.

• Describe Images File Names:

When images are uploaded to the web, and a query is entered to search for your website, images with the right file names helps Google understand what the image entails. Image SEO best practices include naming images appropriately and using relevant images that match texts. For example, if the image is a Set of Bracelets, file name shouldn’t be left at the default DSC3251.jpg but should be resaved as Set­_of_Bracelets.jpg.

• Incorporate Alt Texts:

Use Alt texts to describe every image on your website.

Alt texts (Alternative texts), also known as alt attributes are phrases included in HTML codes to give information about an image. Using ALT text is one of many SEO best practices that improve websites’ ranking on search engines.

For example, an HTML code of an image without an alt text is displayed as

<img src=’’http://pexels.com/photo/woman.jpg’’>

When an alt text is included, the code appears as

<img src=http://pexels.com/photo/woman.jpg alt=’’woman-in-pink-dress-sitting-on-chair’’>

An image that has an alt text helps Google crawlers understand the nature of a particular image to know whether or not to display a webpage. If search engines do not understand the content of an image, the web page containing the image will not be ranked on its search results page.  Also, alt texts are useful for website readers with visual impairment that uses screen readers, whose browsers do not display images and readers with a slow internet connection.

Along with the different ways on how to optimise images for web without losing quality, invest in automated tools to ensure that your images are always well optimised.