Since Google penalizes pages that load too slowly by showing them lower in search results, improving load times is a no brainer way to increase traffic, sales and conversions.
Images often account for most of the downloaded bytes on a page. As a result, optimizing images can often yield some of the largest byte savings and performance improvements: the fewer bytes the browser has to download, the less competition there is for the client’s bandwidth and the faster the browser can download and render content on the screen.
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.
Step 1: Choose the right image format
Export your image for the web, depending on the type of graphic. In addition, you need to consider whether some images are best served in a vector format, if the desired effects can be achieved via CSS, and how to deliver appropriately scaled assets for each type of device.
Photos and colourful, high detail images – Use JPG.
Adjust the quality percentage to what you feel is acceptable.
Logos and basic graphics with few colours or transparency – Use PNG.
PNG is a lossless format, so there are no quality adjustments to make.
Vector images that are infinitely scaleable and look good at all resolutions – Use SVG.
Replace animated GIFs with video for faster page loads – Use Video.
Step 2: Resize your image to the maximum display size
If you want to ensure maximum quality for retina displays, you can opt for 2x the maximum display size dimensions.
<img srcset="example-image.jpg,
example-image@2x.jpg 2x"
src="example-image.jpg"
alt="Example Image">
Step 3: Use specialized tools
Don’t use Photoshop or other image editing tools, they’re not very good for optimization. Use specialized tools such as Kraken.io or the excellent ImageOptim on Mac or TinyPNG. For SVG images, you can use SVGOMG.
Useful Links:
https://gtmetrix.com/blog/how-to-optimize-images-a-practical-guide/
0 comments