Today internet is all about speed and statistics show that people can wait only for 3 seconds for a website to load on desktop and 5 on mobile devices. In order to attract users and to make them stay for little longer, you need to own a website that loads quickly which further helps you convert them. Moreover, Google’s ranking algorithm emphasizes on reducing page load time, so speed is crucial to achieve good rankings too.
Below is the list of few essential tips that can help to build an effective website with nicely optimized and fast loading images.
1) Compress Images
Image compression is very important in terms of optimization as it can reduce th image size dramatically.
Following are the types of image compression:
Lossless compression – It allows for recovery of all original data when file is uncompressed.
Lossy compression – It means that some information can be lost during compression.
For web use, Lossy compression is far effective.
2) Use Image Optimization Tools
There are plenty of image optimization tools available:
ImageRecycle – It offers range of CMS integrations (Magento, WordPress, Joomla, Shopify) with Lossy and Lossless compression, PDF compression and resizing.
Kraken – It was the first tool in the market to compress and resize images. It is available as WordPress plugin as well.
TinyPNG – A Magento and WordPress plugin.
Gulp-smushit – A free plugin to optimize PNG and JPG images using reSmush.it.
3) Use Right File Type
There are two types of file types:
Raster Images – Raster images shine with rich visual assets and it can be in form of GIF, PNG, JPEG or JPEG-XR and WebP are best for photorealistic images. Since raster images are not resolution independent therefore when you scale up a raster file, the image might het blurred and jagged. Save the versions at various resolutions for the best look.
Vector Graphics – Such files use points, polygons and lines to represent an image. These images are best for geographic shapes like icons, logos and backgrounds and as it is generated by programming so the files are small. These images can be scaled up and down without distortion or loss of information. They are easily editable.
You should avoid use of SVG files for complicated images such as photos. For more photorealistic effect, raster images are best.
4) Use Progressive Loading
If you have image gallery, use progressive lazy loading. There are so many websites that use this techniques to improve page loading. You can use Plug Ins such as Lazyload 2.0, Lazy Load plugin for jQuery, by using these you can easily improve the UX of your website with lazy loading effect you need.
5) Balance File Size And Visual Impact
If Photoshop used to build website, finding the best format and compression to apply on images is crucial. You need to balance the quality and weight. Since Photoshop applies a global compression to images so find the sweet spot between size and quality.
In case you don’t have Photoshop?
In case you don’t have Adobe Photoshop, there are various tools available online. Adobe even offers an online editing application at photoshop.com that covers all the basics of image editing and doesn’t cost much.
Other online image editing tools such as:
PicMonkey – one of the best and great photo editing tools.
Pixlr – is user-friendly and also comes with 100% free app for your smartphone.
FotoFlexer – another advance online image editor and it allows you to work with layers.
Moreover, you can use GIMP, an open source free image editing software that can run on Windows, Linux and Mac efficiently.