Fixing Image Dimensions in PrestaShop for PageSpeed Insights

Resolving 'Image elements do not have explicit width and height' in PrestaShop

A PrestaShop user, pierroweb, encountered an issue where Google PageSpeed Insights flagged their website for missing width and height attributes on image elements. They had attempted to fix this by modifying the custom CSS in Elementor, but the problem persisted.

The initial replies pointed out that adding width and height attributes directly to the tags in the HTML templates is crucial. Custom CSS alone is insufficient for PageSpeed Insights to recognize the fix.

Understanding Image Dimensions in PrestaShop

PrestaHeroes.com provided a detailed explanation: PrestaShop automatically generates width and height attributes for images based on predefined image types (e.g., home_default, large_default) configured in the 'Image settings'. These settings are found under 'Design' -> 'Image Settings' in the PrestaShop back office. PageSpeed Insights expects these attributes to be present in the HTML.

The issue arises when:

• A theme or module removes these attributes.
• The image is used as a CSS background (e.g., in hero banners or sliders).
• A template override is outdated and no longer outputs the {$image.bySize.*.width} and {$image.bySize.*.height} Smarty variables.

Solutions and Recommendations

The recommended solutions include:

• Modifying Templates: Ensure that your theme templates correctly use the {$image.bySize.*.width} and {$image.bySize.*.height} Smarty variables to output the width and height attributes.
• Using Aspect Ratio: Alternatively, reserve space for images using the CSS aspect-ratio property.
• Checking for Overrides: Review any template overrides to ensure they are up-to-date and not stripping the width and height attributes.
• Theme/Module Conflicts: Investigate if any installed themes or modules are interfering with the image attributes.

The original poster then asked for more specific instructions on implementing these changes, given their limited coding knowledge. A final suggestion was made to contact Elementor support if Elementor was used to modify the image formats, as the issue might then be specific to Elementor's implementation rather than PrestaShop's core functionality.

In summary, properly setting image dimensions in PrestaShop involves ensuring that the width and height attributes are present in the HTML, either through Smarty template variables or CSS aspect-ratio. Troubleshooting requires checking for theme/module conflicts and outdated template overrides.