-
Posts
-
Hi,
we noticed that images on a page don´t seem to be resized on a mobile – i.e. they are optically scaled down to fit the screen, but they are still the same size (in KB) as for a full desktop screen. It that intentional and is there any way that we can get WP/Enfold to use smaller versions? Would that even make sense? The question arises over sluggish pagespeed on mobile. We are in the process of replacing older jpgs with wep, which should also generally make a difference.Thanks for your advice.
Best,
SaraHey sarawh,
Thank you for the inquiry.
Which image element are you using? If you’re using the default Image element from the builder, the element should include the srcset attribute which is added by WordPress automatically, and the browser should automatically select or serve the appropriate thumbnail size for different screen sizes. This should also work for sliders if you select the original or full-size thumbnail. If you want to learn more about the srcset attribute, please check the link below.
// https://developer.wordpress.org/apis/responsive-images/
Best regards,
IsmaelHey Ismael,
Thanks for getting back to me on this. We´re using the default image element from the builder. It was placed in full size and the element size within the builder is set to ‘use size from media library “Attachment display settings”. Is that maybe where we´re doing something wrong? I changed it to original size (no scaling) but it made no difference. Looking at the html I´m only seen src but not srcset. Would you take a look at the first image on the page (url supplied below) and see if you have an idea?
Thanks and best regards,
SaraHi,
Thank you for the update.
The srcset attribute is present on one of the images in the page above. Did you figure out the issue?
<img src="https://www.dr-site.de/wp-content/uploads/2023/12/katrin-und-daniel-holzinger-stuttgart.webp" srcset="https://www.dr-holzinger-institut.de/wp-content/uploads/2023/12/katrin-und-daniel-holzinger-stuttgart.webp 705w, https://www.dr-holzinger-institut.de/wp-content/uploads/2023/12/katrin-und-daniel-holzinger-stuttgart-300x153.webp 300w, https://www.dr-holzinger-institut.de/wp-content/uploads/2023/12/katrin-und-daniel-holzinger-stuttgart-450x230.webp 450w, https://www.dr-holzinger-institut.de/wp-content/uploads/2023/12/katrin-und-daniel-holzinger-stuttgart-600x306.webp 600w" sizes="(max-width: 705px) 100vw, 705px">Best regards,
IsmaelHi Ismael,
We haven´t figured out the issue, so I was surprised that the srcset attribute was present in the one of the images ;) I´ve looked at the settings in the backend but I can´t work out why this image would be different – although, unlike the first image on the page, it sits inside a regular row rather than a grid row (Rasterzeile).
When I download the image with the srcet attribute on a mobile, it is still the same size in KB as the full size image.
Any ideas?Thanks again for your help.
Best regards,
SaraHi,
When I download the image with the srcet attribute on a mobile, it is still the same size in KB as the full size image.
Any ideas?We added the value of the srcset in the private field as a list. Please note that the first image will only display when the screen width is more than 705px, the second when it’s 300px, the third when it’s 450px, and the last one in the list displays when the screen width is more than 600px but less than 705px. Please check the screen resolution of your mobile phone. Also, please note that when you download an image with an srcset attribute, the browser will select the image currently set in the src attribute or the image in the srcset with highest resolution.
Best regards,
Ismael
- You must be logged in to reply to this topic.