Usually the various sizes are enumerated in srcset and sizes attributes so the browser can choose the best size for the current display. A quick check of the emerland site indicates these attributes were not used so the browser is forced to use the image specified in the src attribute. Thus only the image sizes you specifically chose will be used. This appears to be due to how your lazy loading scheme works. It’s unclear to me if it’s part of your theme, page builder, or plugin.
The only images in the trip2mars site are apparently all background images. There’s no ability to use any other sizes with backgrounds unless CSS media queries are used to reference different sized images for different display sizes. Media queries were not used for this purpose here.
Thread Starter
d3bra
(@d3bra)
Thank you for your reply.
If I got it right, basically, srcset attribute is not used on the images and that’s why there is only one image used, right?
So it may be any of the above-mentioned things, but we cannot tell for sure. Is it a way you’d recommend for me to check what is causing this? If it is a builder or a plugin issue?
Also there is a non background image on trip2mars homepage, at the upcoming events section. On the post that says coming 2024, which still does not change on viewport.
The srcset attribute gives information to a browser about what image sizes are available. Which one a browser chooses for a given display size is anyone’s guess. I suspect desk/laptop browsers generally use the image in the src attribute and ignore srcset. It’s more likely mobile browsers pay more attention to srcset.
The lack of srcset is mainly an issue for mobile users who often have limited bandwidth and data quotas. The inclusion of a srcset attribute is the responsibility of which ever editor you used to add the image to content. For other images not in content, the responsibility belongs to which ever module is generating the output. Usually your theme, but possibly due to a plugin in some cases.
The event slider was initially hidden. I found a way to make it visible, but not by using any control on the page. Anyway, the slider images have no srcset attributes either. The slider code would be responsible for providing srcset attributes, probably Elementor?
