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.

Consider using new formats: WebP and SVG. They are of smaller sizes, and allow saving high quality while reducing webpage size. WebP is a creation of Google to compress photos, it allows decrease page size on 70% or even more, depending on the number of images on it. SVG file type is also characterized by small size. It can be animated or changed with the help of JavaScript. Unfortunately, this format is not allowed to be used on some platforms, for instance, WordPress.

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.