small bug, nothing serious

[MockoB]

I just installed1.0.4 for testing and it is working fine so far. Just found couple of minor bugs. And I will continue testing these days with adding carriers, test orders, etc.

1. There is webp images option in preferences/images. It should be removed when it is not available.
2. The high res images don’t show on apple devices and I don’t think they are loading on my pc either. I know they may be not working, but I’t could be something easy to fix… Which image is exactly loading here? :

It's from the new arrivals carousel on the homepage.

When I open the third link for example, I see it is loading image with resolution 250x250 which is set in back office images for home_default, but the loaded x2 image should be with resolution 500x500. It is replacing the name of the image with the alt image name, and I can’t see which one is loaded, but there is x2 at the end as it should…

1. Apple touch icons are working properly!

[MockoB]

Why is this needed in all images: src=“data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=”

[lesley]

Its part of the lazy loading.

[MockoB]

Ok. Thanks. But does the image have to be png? Because I'm using jpg images. Last edit: never mind I just read why it is there :)

[lesley]

It does not, that is just a place holder for the lazy loader to structure the page.

[MockoB]

Ok, I'm not a programmer but why it is loading homedefaultsmallest; homedefaultsmaller and homedefault for the product images in product-list-item.tpl for example? I believe it should load just homedefault on none high density devices and homedefault2x on high density devices. I changed them all to homedefault and added 2x like that to that line: {$link->getImageLink($product.linkrewrite, $product.idimage, 'home_default2x', null, ImageManager::retinaSupport())|escape:'html':'UTF-8'} 250w

Now the 2x image is loaded, but it may be on all devices. I don't know because all my screens are high density ...

[lesley]

We added srcset into the template a while back for optimization purposes, https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimediaandembedding/Responsive_images

https://www.diffuse.nl/blog/creating-responsive-images-with-srcset-and-sizes

[MockoB]

Yes I can see that, but why it is trying to load homedefaultsmallest; homedefaultsmaller and homedefault when it should load just homedefault and home_default2x? Please check the example above.

[lesley]

On your device which images are actually loading though? I don't think srcset is handled the way you think, it should be loading the larger images.

[MockoB]

Yes @lesley it should be loading the larger images for high density pixel devices. By default ps and tb use homedefault for the images in product list. I gave example above with product-list-item.tpl. What we try to achieve with the srcset attribute is to load different images for devices with different viewport. I don't have an explanation why you instead adding larger image than the default one (which always has been homedefault) you added 2 smaller images. So now for devices with width less than 768 you load image homedefaultsmallest, for width 992 you load homedefaultsmaller and for width 1200 you are loading the default image. So actually you don't take any advantage of the homedefault2x image which is created when you set hight density screen images generation through back office. So basically instead trying to load the larger images for those screens (homedefault2x) you load in best case the image which has always been loaded before. All examples of srcset I checked try to load larger image than the default one, here you try to load two smaller images which I believe even will get things worse on the mentioned above resolutions. You just need to make it load 2 images in the above given case: homedefaul and homedefault2x for high pixel density screens. That's it. And that have to be remade for all image instances in the template.

Please @Lathaneo and @ssimard confirm what I'm saying, I know you use already retina images.

[Lathaneo]

Hi,

I didn't understand every thing, but your almost right. Your "srcset" tag has too short ranges.

On a great Wordpress template ( e.g. Buildico - Theme - Forest ), you can get examples. For miniature, ranges are bigger like that :

<img src="picture/p-3.jpg" class="" alt="" srcset="http://website.com/picture/image.jpg 1140w, // image size 1140 x 640 http://website.com/picture/image-300x168.jpg 300w, http://website.com/picture/image-768x431.jpg 768w, http://website.com/picture/image-1024x575.jpg 1024w" sizes="(max-width: 360px) 100vw, 360px" width="360" height="202">

[MockoB]

I am pasting below the code snippet from product-list-imtem.tpl concerning images: ``` {if !empty($lazy_load)} {/if} {if !empty($webp)} getImageLink($product.link_rewrite, $product.id_image, 'home_default_smallest', 'webp', ImageManager::retinaSupport())|escape:'html':'UTF-8'} 211w, {$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default_smaller', 'webp', ImageManager::retinaSupport())|escape:'html':'UTF-8'} 218w, {$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default', 'webp', ImageManager::retinaSupport())|escape:'html':'UTF-8'} 250w" sizes="(min-width: 1200px) 250px, (min-width: 992px) 218px, (min-width: 768px) 211px, 250px" title="{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}" type="image/webp" itemprop="image" > {/if} getImageLink($product.link_rewrite, $product.id_image, 'home_default_smallest', null, ImageManager::retinaSupport())|escape:'html':'UTF-8'} 211w, {$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default_smaller', null, ImageManager::retinaSupport())|escape:'html':'UTF-8'} 218w, {$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default', null, ImageManager::retinaSupport())|escape:'html':'UTF-8'} 250w" sizes="(min-width: 1200px) 250px, (min-width: 992px) 218px, (min-width: 768px) 211px, 250px" alt="{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}" title="{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}" itemprop="image" width="{getWidthSize|intval type='home_default'}" height="{getHeightSize|intval type='home_default'}" >

``` Image dimensions are set in preferences/images like that:

homedefaultsmallest - 211x211 homedefaultsmaller - 218x218 home_default - 250x250

The size difference in kilobytes with the above resulutions is: between homedefaultsmallest and homedefaultsmaller - 0.43kb, and between homedefaultsmaller and homedefault - 1.93kb. I'm sure it will be different for different images, but does it worth to use the responsive images with such small difference in size and resolution? If it is made for better performance on responsive displays, there is not much profit, if no profit at all. If all that is made for the hdpi displays, then the loaded pictures in that particular case should be just homedefault and home_default2x (which is generated when you activate hdpi images in back office).

And since there is no obvious advantage from using the above resolutions, and if the point is getting the hdpi images work. You could use x-descriptors WITHOUT sizes, like that: <img srcset="home_default.jpg, home_default2x.jpg 2x" src="home_default2x.jpg" alt="x-descriptors without sizes">

I can see you use picture tag, but you don't use img src tag for fallback if the browser doesn't support srcset or webp, like you use it in the above code snippet without lazy_load. Or the browser will load empty image?

You could easily add retina support within that picture tag by defyning the 1x and 2x file, like that: <picture> <source srcset="home_default_smaller.jpg, home_default_smaller2x.png 2x" media="(min-width: 992px)"> <source srcset="home_default.jpg, home_default 2x" media="(min-width: 1200px)"> <img srcset="home_default.jpg, homehome_default2x 2x" alt="Example for retina image support"> </picture> Code snippet is taken from here. According the author Shopify do it like that.

Of course not all browsers and versions support the picture tag yet, so it would be great to find a way to implement lazy load for the first example (without ) if possible, in case someone (like me for example) need both - retina images and lazy loading with most possible support.

What do you think?

[lesley]

Neither of those examples are really cross compatible. The first one will show a high dpi image on IE, the second will not show an image at all on a non srcset device.

https://caniuse.com/#search=picture

https://caniuse.com/#search=srcset

The reason the srcset is in there is specifically for seo. The time of loading is negligible, but using it helps with seo in the sense of the internal tests that Google uses to determine site speed as a ranking factor.

[MockoB]

Oh sorry, I thought you made an effort to finally make an use of those 2x images as being told. First example will load hdpi images on all devices and almost all browsers, the second one you already use, as may be seen in the quoted snippet above. Speed is ranking factor yes but decent image compression will bring much more use than the above code... it's good to check 1.0.4 lighthouse performance too, I did it and it was 53 at best I achieved. If there is any secret to achieve the results from your blog post, it would be nice to share them.

P.S is there any easy way to find every single use of the srcset attribute in the community theme?

[lesley]

We are trying to make a use of them, the problem is just more complicated than you think it is. You don't have to be so brash and critical all the time, it makes us less want to help with your requests.

Your lighthouse test directly reflects your connection speed. Its a difficult test to work with, but my testing on the latest distros are very high.

As for finding the uses, I am pretty sure I only added them to the product-list files.

[MockoB]

Sorry @lesley but i really thought all this trouble is for getting hdpi images work. All those examples I gave are not because I want to nag with you. I spent hours to find those sources and read about srcset, sizes, picture, descriptors etc. I only want to help me and others with making the template with better user experience. You don't think that all those ecommerce platforms use retina images with no purpose? I'm struggling since day one here to make someone to make it work. All those examples I gave above are explained very well and are working solutions. I don't know if they are the most modern techniques, but they will do the job. I actually changed the code above and the 2x images are loading. Unfortunately I have to find all images in the template and change the code manually and after the next update it will be all gone. I don't think you take it seriously, but the design and little things like retina images, icons, vector graphics make a site looking good, which gains trust and makes customers get back to it.

Other thing I noticed is whether or not lazy "load images" is switched on or off in the back office, the images in the products list are loaded with the code within picture tag. Does it have to be that way?

[lesley]

I will have to give this a look before 1.0.5 comes out. I just opened an issue about it, https://github.com/thirtybees/thirtybees/issues/506

As for the lazy load I am not sure which library was used, it might always append it, but the button enables / disables the javascript.

[MockoB]

Thank you very much @lesley !

[MockoB]

@lesley i just checked the github issue. Just to clarify it, the hdpi images don't show anywhere, not just in product list. The above is just an example. The best and easiest way to include them is to add those 2x image to srcset also, everywhere image is loaded.

[lesley]

Ahh ok. I will make sure we get the all tested