How to Optimize Images for Web
When it comes to website performance, most aspire to increase loading speed with the help of CDN and powerful servers. But there is one more way to boost up page loading: image optimization contributes to faster work considerably. What are common methods and gimmicks to optimize pictures for web?
Optimization for improved performance
Scaling is necessary before uploading. It can be done with the help of Paint, Photoshop or Gimp. That helps to save resources and improved work with Google Pagespeed’s guidelines. You can also upload images of different resolutions for them to suit different devices.
Studies show that images constitute about 62% of page weight. Thus, their size should be reduced in most cases. A good way out is lossless compression – a picture becomes lighter without quality loss. There are different services for that, for instance, Optimus Image Optimizer. Depending on image format and size, up to 70% of size can be compressed.
Responsive image technique allows loading images of different scale basing on the size of display. It is done with the help of scrset and sizes attributes, which are the part of HTML specification.
Optimization for SEO
Choose appropriate image names: it will make it easier to work with them down the road. If there are multiple words, divide them with hyphens: Googlebot sees them as a separator, while underscores make it read a combination as one word.
Every image on a page should have alt text. It is a short description of what is on the picture. Google values them, as well, and determines how the image is ranked, and whether it is related to the content. Besides, alt description is often used by blind or visually impaired people accessing site with the help of screen readers.
Image optimization will make your web-site load faster, increasing its ranking in search engines.