Image editing

This article explains how to edit your images and use advanced technologies to achieve the best quality-to-size ratio. Since the load time of a website from Google evaluated as a ranking signal and included in the assessment, it also makes sense in the area of ​​page speed optimization clearly, to edit all images and optimize in terms of scaling, file format and compression.
With increasingly colorful and beautifully designed websites, the demands on the bandwidth and performance of the network connection are also increasing, which can sometimes tear one’s patience.

Reasons to use images in web design

A text enriched with images has the advantage of loosening up content and visualizing it.
Mixed and well-prepared content is easier for the visitor to understand than plain text content, which is also reflected in the bounce rate. In addition, the resulting increase in the length of stay also improves the assessment of the content by Google.

Criteria for image editing

The most important criteria when editing images are:

  • image size
  • file format
  • image compression
  • color depth

Modern web design with screen-filling images places different demands on hosting and bandwidth. Images have to make a positive impression, but they must not slow down the website.

Optimize images on static websites

When preparing the existing images for use on static websites, you must first pay attention to a specific aspect ratio. Common aspect ratios in photography are 4:3 (Four-Thirds) or 3:2 (APS-C).
The cropped image should be scaled to an optimal size in image processing.
If the image is larger than the assigned area on the web page, it will be displayed smaller (depends on CSS settings), but the large original image will be loaded.
Though resizing and recompressing is on static sites possible too.

Optimize images in content management systems

Content management systems partially optimize images automatically. Thus, e.g. the CMS Wordpress automaticelly creates several smaller versions of the original image for all possible cases in which the image could be used, e.g. as a post picture, as a thumbnail, for desktop view, for smartphones et cetera. Many CMS systems, however, recompress the images not in a best way.

The right file format for pictures

The choice of file format depends on the information stored in the image. Line art and large-area statistics should use a different file format than detailed photographs for an optimal quality-to-size ratio.

The right compression

The more detailed the subject on a picture, the more difficult it is to reduce the file size. If compression rates are too low, compression artifacts can quickly appear, depending on the encoder used, such as area and raster formation, fraying, color falsification and block formation.

Test conditions

The test conditions have changed. The results and sample images have moved to JPG vs PNG.