• Priority: 0
  • Status: Waiting on customer
  • Theme: Alysum
  • Assigned To: Fred
  • Private: No
  • Open Date: 03.01.24, 08:50
  • Opened by: Martin Crielaard

Ticket #25175 - Image elements do not have explicit width and height

I used pagespeed insight on my site one of the remarks is that the images do not have explicit width and height. Can you tell me how this can be done in the template files?

Attachments:

pagespeed.png (195.4 KiB)

Comments

Fred 03 Jan 2024, 09:36

Hi, Martin.
What page is that?

Martin Crielaard 03 Jan 2024, 09:43

Goodmorning Fred, this page: https://www.hetzilverhuys.com/new/kinderbestek/407-kinderbestek-kikker-en-vriendjes-8710704402216.html

https://pagespeed.web.dev/analysis/https-www-hetzilverhuys-com-new-kinderbestek-407-kinderbestek-kikker-en-vriendjes-8710704402216-html/rg9inempsj?form_factor=desktop

Can you also look at other recommendations from pagespeed that ensured better performance? Mainly the mobile view.

Fred 03 Jan 2024, 10:06

I have fixed the file 

/themes/alysum/templates/catalog/_partials/product-cover-thumbnails.tpl

but it seems you have enabled cache because I don't see any changed on product page, please check

Martin Crielaard 03 Jan 2024, 10:23

Cleared the cache width and height properties are there now thanks for that. Now pagespeed tells me that the images are not the correct size. This may also be correct because they do have the correct format for desktop use. I don't think we can do much about this. Unless you can generate images in a different format for mobile use?

https://pagespeed.web.dev/analysis/https-www-hetzilverhuys-com-new-kinderbestek-407-kinderbestek-kikker-en-vriendjes-8710704402216-html/s64t1z5zpt?form_factor=mobile

Fred 03 Jan 2024, 10:30

you can try to replace "medium_default" to "small_default" in that file in these lines:

width="{if isset($image.bySize.medium_default.width)}{$image.bySize.medium_default.width}{else}500{/if}"
height="{if isset($image.bySize.medium_default.height)}{$image.bySize.medium_default.height}{else}500{/if}">