Image Optimization Guide
The Internet is all about speed. People will wait 3 seconds for a website to load on their desktop. On a mobile device, it’s 5 seconds. Fast-loading web pages keep users engaged, on the page, and converts casual browsers into buyers. Plus, Google’s ranking algorithm considers page load time and time on page; so site speed is crucial.
Here’s a short guide to help you build better websites with nicely optimized, crisp, and fast-loading images.
1. Use Images Wisely
Websites get littered with background images, buttons, and borders. If it’s not product-related, it’s decorative. Eliminate unnecessary images. Decorative images pack a punch of aesthetic appeal, but KO load time.
Once you identify mission-critical images, consider using more effective technologies:
- Use PNG-8 or GIFs for borders or simple pattern images. Get awesome images for just a few hundred bytes.
- Use CSS effects like gradients and shadows, and CSS animations to produce resolution-independent assets that look sharp and utilize a fraction of the bytes.
2. Use the Right File Type
Use the right file type for your image. There are two options to choose from:
Vector Graphics. These files use lines, points, and polygons to represent an image. Use them for geographic shapes like logos, icons, and backgrounds. The images are generated by programming so the files are small. Vector graphics are:
- Easily scaled up and down without distortion or loss of detail.
- Easily editable
Don’t use SVG files for complicated images such as photos. For a more photorealistic effect, use raster images.
Raster Images. Raster images excel with rich visual assets. Formats such as GIF, PNG, JPEG, or JPEG-XR and WebP are best for photorealistic images. Keep in mind that raster images are not resolution or zoom independent. When you scale up a raster file, the image might get jagged and blurred. Save multiple versions at various resolutions for the best look.
3. Adapt the Image Size to Fit Your Content
Image file size = Number of Pixels x Number of bytes to encode each pixel
So, reduce file sizes by minimizing the pixels and the number of coding bytes used for each pixel. Sounds simple, right? Most pages send larger assets than necessary and rely on the browser to scale them. This consumes extra CPU resources and results in a lower resolution display. Keep pixels to a minimum, and deliver assets close to their display size.
4. Get Ready for Retina
High DPI screens produce exquisite creative assets and make your product look even more appealing. However, they also require high-resolution images. Here’s how to handle this:
- Use vector images whenever possible. They always look sharp and don’t depend on resolution;
- Use raster images if necessary, but remember that they encode image data on a per-pixel basis. More pixels equal a larger file size. The solution is to deliver and optimize multiple variants of the image with the help of
picture. Output two versions of your images: one at the base pixel size requirement and one at a 2x version for retina. So a 350px x 350px JPEG would also be output at 700px x 700px.
5. Use Progressive Loading
If you have an image gallery or many images on a page, use progressive lazy loading. It defers loading an object until it is needed. A lot of websites (like Ember, Medium, etc.) are using this technique. There are many plugins to choose from (e.g. Lazyload 2.0, Lazy Load plugin for jQuery), so you can easily improve the UX of your web page with a lazy loading effect you need.
6. Balance Visual Impact and File Size
If you build a website from a Photoshop design, finding the best format and compression to apply on images is critical. You must balance weight and quality. Photoshop applies a global compression to images so find the sweet spot between quality and size.
7. Compress Images
Image compression is vital to optimization. Compression removes image information that the human eye can’t see. It decreases image sizes dramatically.
There are two types of image compression:
- Lossless compression allows for recovery of all original data when file is uncompressed.
- Lossy compression means that some data is lost during compression.
Lossy compression is far more effective for web use. Compare the images below before and after Lossy compression. The quality is similar and the file shrinks from 254KB to 39KB. Lossless compression results in a 180KB file. In most cases, Lossy is better.
8. Use Image Optimization Tools
Use one of the many image file optimization tools available. Here are just a few:
- ImageRecycle offers a large range of CMS integrations (WordPress, Joomla, Shopify, Magento) with Lossy and Lossless compression, resizing, and PDF compression.
- Kraken was the first tool on the market to compress and resize images. It is also available as a WordPress plugin.
- TinyPNG is a WordPress and Magento plugin.
- Grunt is a fantastic task runner. Use it to optimize images on the fly.
- Gulp-smushit is a free plugin to optimize PNG and JPG using reSmush.it.
Image optimization is critical to website speed and website speed is critical to website success. Be sure to include image optimization in your website creation workflow.