Image auditing from Lighthouse for Shopware 6

Proper size images

Relating to this topic, Google as a foremost step checks each image on the webpage and compares the size of the rendered image with the size of the actual image. If the rendered image is at least 4KiB smaller than the actual size, then this image fails to be audited by Google.

The main strategy for providing images in the right size is the use of so-called “responsive images”. Employing this strategy, you can generate multiple versions of each image, where each image will be used depending on the dimensions of the viewport which is most suitable.

Furthermore, at this point, we can use images in SVG format, which is based on vector format.

Responsive Images in Shopware 6

In case we use the common theme called “Responsive”, with this tool we can build a fully responsive online shop in different browsers. Providing static images in Shopware 6 has been replaced by generating thumbnails, in combination with the HTML picture element.

How do we achieve this?

Shopware offers us the ability to upload large-size images without having to worry about reducing the size of these images. All thanks to the ability to generate thumbnails for the original images. This option provides us with good performance and usability on various devices.

First, make sure to upload the desired image at the largest size available, since generating thumbnails will diminish the size of the original image.
Generating thumbnails in Shopware 6 is accomplished via the sw:thumbnail:generate command.

Serve images in next-gen formats

There are two image formats available that can be used to serve images in the most modern image format. AVIF and WebP are image formats that have superior compression and quality characteristics comparable to JPEG and PNG. If we use these two image formats to encode the images, this indicates the images will a lot load faster, and surely this process will result in consuming less mobile internet (cellular data) to display them.

To serve images in WebP format on Shopware 6 platform, it is necessary to use a plugin that is free and can be found in the online Shopware store. This plugin is called “ThumbnailProcessor incl. Lazy Loading and Webp-Support”. More detailed information about the function, advantages, and use of this plugin can be found in the description of the plugin in the Shopware online store.

If you want to know more about e-commerce development platforms or apps, read our blog posts for Shopify and Shopware. Our dedicated outsourcing team can be your collaborator in ecommerce.