fbpx

Performance – Optimise your images

If you use GT-metrix or Google Page Speed to test your website these tools will suggest you to optimise your images for better performance. Let we see what we can do.

Image Formats

There are several cross-browser supported image formats available. The most commons are:

  • JPG
  • PNG
  • GIF
  • SVG
  • WEBP

JPG is good format for photographers and to store your memories in an SD card or in the cloud. It has a good compression rate with smaller file size, but it’s not support transparency

PNG is good for screenshot or high-quality images but it has large file size. The biggest pro with this format is the transparency

GIF is a special format for animation. In the 90’s it was the most commonly used on websites.

SVG a newly developed vector format particularly good for charts, logos and icons. Some browsers not support resizing

WEBP developed – and highly suggested – by Google. It is a modern image format that provides superior lossless and lossy compression for images on the web. Using WebP, webmasters and web developers can create smaller, richer images. * (source: https://developers.google.com/speed/webp/)

Modern browser has <picture> tag support where you can define source of the same image in different format to optimise the image delivery. It also means you need to upload or generate your images in different format so it takes more storage in your web server or CDN.

Performance

Lazy load – Performance booster

Content above the fold rendered first by the browser. This is the best place for Call To Action links and buttons, but also images placed here displayed. If you have large images it will slow down your website.

Lazy loader can help you to load a placeholder image or the content image in low-resolution. Once the page load finished you can replace the placeholder with the real image – but it’s not blocking the page load and gives your website a better performance.

Leave a Reply

Your email address will not be published. Required fields are marked *

Scroll to top