Image optimization and loading speeds for your website can be tricky. Google is on a mission to make the web faster and accessible to all, in all devices. Responsive websites need to perform great, but also look beautiful. So we load our beautiful content picture, about 1.3mb with a 2k res. Looks great! But don’t forget loading time…
Google being a nice guy (ha!) has a whole developer are devoted only for page speed:
And more specifically, resources for image optimization:
… Finding the optimal format and optimization strategy for your image assets requires careful analysis across many dimensions: type of data being encoded, image format capabilities, quality settings, resolution, and more. …
If you like reading, there are heaps of information here:
So what should I do?
Under the section: Selecting the right image format, it brings the following:
So if you need high quality images, with a range of colours, PGN seems to be the obvious answer. But they are knows to be bigger than jpeg. So what can we do?
Well, suggestion for today it is something simple, but powerful: Tiny PNG
This incredibly simple but incredibly powerful tool can really help you to squeeze the last kb out of your website.
And ever better: it has a wordpress plugin!
But how it works?
Excellent question! When you upload a PNG (Portable Network Graphics) file, similar colors in your image are combined. This technique is called “quantization”. By reducing the number of colors, 24-bit PNG files can be converted to much smaller 8-bit indexed color images. All unnecessary metadata is stripped too. The result: better PNG files with 100% support for transparency. Have your cake and eat it too!
Really recommend it to become part of your development tools. Do you have a suggestion? Let me know.