Thumbnail size for mobile view in product listing

-- HikaShop version -- : 5.0.4
-- Joomla version -- : 5.1.0
-- PHP version -- : 8.1
-- Browser(s) name and version -- : all

I have a generation of thumbnails of 400 x 600, which is fine for the desktop, but I need them to be 200 x 300 for the mobile view since I have two columns

Is there a way to generate the specific thumbnail for viewing on cell phones?

Thank you so much

Hi,

No. There is no option for that.
However, I can see that you already have the thumbnails automatically scaled down by the browser based on the width available.
I can also see that you already have webp images for mobile devices, which should also help the loading as the size of the files is divided by 4:
/images/com_hikashop/upload/thumbnails/600x400f/lotus-threads-24138-bridal-gown-01.jpg
/images/com_hikashop/upload/thumbnails/600x400f/lotus-threads-24138-bridal-gown-01.webp
i.imgur.com/UgTIVAW.png
So you actually already have specific thumbnails for mobile devices. It's just that they are still 600*400 but in the webp format, which is smaller.

Now, if you really want to do it, you can edit the product / listing_img_title view file via the menu Display>Views, and modify the PHP and HTML there to include several source tags with different min/max width media and the corresponding srcset:
developer.mozilla.org/en-US/docs/Learn/H...images#art_direction
But I think you won't gain much from doing this. A 12kB thumbnail is already small enough.

Thank you very much Nicolas,
I agree with you, but I have a report of LCP in the images and I thought that could be it.
I'm going to try what you say. Thank you

Hi Nicolas, can you please help me with the correct code for this? I think I didn't do it right, it's not working as I expected. On mobiles it still loads the 400 x 600 image

This is the code I added:
<picture>
<source media="(min-width: 800px)" srcset="'.$img->webpurl.'" type="image/webp">
<source media="(max-width: 799px)" srcset="'.JURI::root().'images/com_hikashop/upload/300x200f/'.@$this->row->file_path.'" type="image/webp">
<source srcset="'.$img->url.'" type="image/'.$img->ext.'">
'.$html.'
</picture>

Thank you so much.

Hi,

I don't see the min-width in the first "source" tag on your website:
i.imgur.com/HvHMGOa.png
Also, on the max-width source tag, the type is image/webp even though you're using the jpg thumbnail.
Also, The third source tag doesn't have any min/max-width so it can be used by browsers without any restriction. You might want to remove it.
Ideally, you want one source tag with the min-width, and one with the max-width and that's it.

Thanks Nicolas, How can I specify that webp images load? For the size 200 x 300 . I can't get them to load
Sorry, I'm not a code expert.

Thank you very much for your help

Hi,

Like that for example:

It worked perfect, thank you very much for the help