-
Posts
-
Hey all,
I´m optimizing my website for responsive design and seo at the moment.
Can anyone tell me if i should upload various version of any image to save kb or does enfold do that by itself?Let me explain a bit further:
I´ve uploaded an image with 500x333px. On desktop, obviously, the website will display the full resolution image.
On mobile I would expect enfold to load a smaller image, which is adopted to the smaller screen size. Maybe something like 330xheight.
However, when use the chrome console and simulate i.e. galaxy s5 the image is still 500×333.
This seems unnecessary to me and a waste of data and loading time.So i guess my questions are:
1. Is enfold not scaling down the image automatically to adjust to the display dimensions and save kb?
2. Is it a good idea to provide two image versions of every image (one for desktop/tablet & 1 for mobile)?Thanks guys
RestubeHey restube,
We are using a scaled version, exactly how the browsers call it.
The solution is to compress the images – if you do that everything else should be working fine.Best regards,
BasilisHey Basilis,
for clarification:
Does that mean if I upload an image 1920x900px with lets say 200kb this image will be used when some access the page on a desktop.
If someone uses a phone a adjusted image (maybe 375px width) will be displayed which is also smaller in kb?is that correct or will the image still be full size (200kb) in download?
Cheers
RestubeHi,
Thanks for the update.
Unfortunately, that’s not how the theme handles the images. The theme creates smaller versions of the original image but it will load or use the same version of that image regardless of the screen or device. There is a plugin that automatically applies a srcset attribute to an image element, but we’re not sure if it’s compatible with the theme.
// https://wordpress.org/plugins/responsify-wp/
Best regards,
IsmaelThis is a big problem these days. More than 50% of people use mobile and tablets. If no srcset it is applied with enfold, the user experience goes down and most users do not continue and leave de website. That’s why WordPress insert “srcset”. Sorry but this is not Seo Friendly for Google. Plus Install a plugin like Responsify without any guarantees that can break the site in any moment I think is not an option. Or Maybe I am wrong…
Hi,
You can still optimize the site without using that plugin. Just make sure that the images are compressed and in its smallest file size possible without compromising the quality. These articles should help you optimize the site or improve its loading speed.
// https://kriesi.at/archives/4-key-wordpress-image-optimization-tips
// https://kriesi.at/archives/scoring-100-100-in-google-pagespeed-insights-gtmetrix-pagespeed-and-yslowBest regards,
IsmaelHi
All my images are compressed. The problem is when an image is displayed in mobile, the size of the images are not scaled in size. I download the images in 2 different mobiles devices, and they are big 1500 x 890, this is the same size as the original in the web browser. Something curious is that the weight of the image in the web browser version is 107kb and the same image in mobile is 117kb, Big images in small resolutions screens like the iPhone 5.You can see attached de size in I download in different devices and web browser.
Hi,
Yes, we understand that. Unfortunately, as previously mentioned, the theme or the elements in the theme don’t contain the srcset attribute, so it won’t be able to switch to another image or source based on the screen or device width.
Best regards,
IsmaelHi Ismail
Why do not add srcset attribute in the theme, where is the problem?
Is it a priority to your Team to add it? WordPress was already for this attribute a few years ago.I see it is a big problem for a good ROI, the today and future websites visits are in Mobile Browsers.
Best Regards
Hi,
This will probably be implemented in the future, but it’s not a priority at the moment. We can help you implement it on the Image element or shortcode if you really need it. Please edit the config-templatebuilder > aviashortcodes > image > image.php file, remove everything and then replace it with the following.
// https://pastebin.com/qRcuzkws
Best regards,
IsmaelHi,
Thank you for your feedback it helps us improve and thank you for your understanding.
Don’t forget to bookmark Enfold Documentation for future reference.
Thank you for using Enfold :)
Best regards,
VinayHi Ismail
I implement it on edit the config-templatebuilder > aviashortcodes > image > image.php file. Now its working fine on Media Elements / image . But it do not work in Fullwidth Easy Slider. Please can you help me with this ?Thanks a lot.
Hi,
Thank you for the update.
In the same aviashortcodes directory, look for the edit the av-helper-slideshow.php file. Replace the content of that file with this code.
// https://pastebin.com/eqV7LGEa
Best regards,
IsmaelHI Ismael
I Replace the contect in the av-helper-slideshow.php. But do not work in Fullwidth images, any idea ?Serve scaled images
F (0)
IMAGES HIGH
What’s this mean?
The following images are resized in HTML or CSS. Serving scaled images could save 413.0KiB (92% reduction).https://……………………………………………jpg is resized in HTML or CSS from 1400×666 to 375×178. Serving a scaled image could save 115.7KiB (92% reduction).
https://……………………………………………jpg is resized in HTML or CSS from 1400×562 to 375×151. Serving a scaled image could save 96.9KiB (92% reduction).
etc….Hi,
Did you compress or optimize the images before and after uploading them?
Where we can we see the Fullwidth Easy Slider? Please provide the actual link to the page.
Best regards,
IsmaelHi
All my images are compressed and optimize GTMetrix give me perfect performance in Desktop. You can see de website in the private link and a screenshot so you can see the problem.
In GTMetrix when you choose in “page settings/simulate device/Apple Iphone 6/7/8” that the last shortcodes you give me on (June 4, 2019 at 11:57 ) do not work and the web do no serve scaled images when we use it in Fullwith.thanks a lot.
Hi,
This is the result that we got when we ran the test again.
Screenshot: https://imgur.com/a/DFfzO5T
Could you give us actual links to the images that have to be resized?
Best regards,
IsmaelIn GTMetrix when you choose in “page settings/simulate device/Apple Iphone 6/7/8” that the last shortcodes you give me on (June 4, 2019 at 11:57 ) do not work and the web do no serve scaled images when we use it in Fullwith.
I incluide all the links images in private . Thanks
Hi,
Thank you for the update.
It probably doesn’t take into account the devices’ pixel ratio or DPI. In some cases, the browser will still load larger version of the image even if a smaller one is available when it deems necessary or in order to serve sharper images. Please note that most iPhone devices have higher pixel density compare to desktops screens, so the browser has to serve larger images for those devices.
For example, if the screen width is 320px with a 1x pixel ratio and the browser has to pick between a 375px and a 1500px image. It has to do the following calculation.
375 (image #1) / 320 (screen width) = 1.17
1500 (image #2) / 320 (screen width) = 4.69The value 1.17 is closer to 1 (the device pixel ratio), so the browser will serve the 375px image.
Now, iPhone devices have higher pixel ratio, which is up to 3x of normal screens, so the browser will multiply that value to the screen width and it will end up with the following calculation.
375 / 960 = 0.39
1500 / 960 = 1.56The value 1.56 is obviously closer to the targeted pixel ratio, which is 3, so it will display the 1500px image even if the screen width is only 320px.
Best regards,
IsmaelHello Ismael
Same problem here, it does not look a problem about iphone or pixel ratio or DPI. I test with a regular Samsung or Google nexus old models and Gtmetrix give me the same error, the do not serve scaled images. If you think that more than 55% / 60% web visits come through mobile, that is a big problem. srcset or amp it is necessary today. That,s not seo Friendly. Please, when implement in enfold srcset and amp full compatibility?
thanks a lot
Hi,
Did you modify the av-helper-slideshow.php file as previously instructed?
// https://kriesi.at/support/topic/optimizing-images-should-i-use-more-than-1-version/#post-1107025
The slideshow doesn’t support scrset attribute or feature by default, but that modification should enable it for the full width easy slider.
Best regards,
Ismaelpuhh I tried to implement some responsive images techinques in my website and I was literally shocked when I found out that enfold does not support srcset attribute.
Responsive images are crucial nowadays and the wordpress srcset implementation covers only a small part of it. But atleast it covers a part. In marked contrast to enfold…
This is really something a modern theme should contain. Some of my bigger websites run enfold. I’m not sure if I would buy it again if I’ve knew that before.Best regards
StephanHi,
@ramotzkie: The dev team is currently working on the srcset attribute feature. A beta version is available, but it’s still under improvement. We might not be able to release it in the upcoming patch, but hopefully we can in the next.Best regards,
IsmaelHey Ismael,
is there something new about that feature?
Will it be implemented in the next version?Best regards,
StephanHi Stephan,
No update on the feature yet, unfortunately. The dev team was working on the cookies and GDPR/DSGVO implementation.
Best regards,
VictoriaHey Victoria,
is there something new about that feature?
Will it be implemented in the next version?Best regards,
StephanHi ramotzkie,
It is still in the works. We do not have an ETA for it yet, unfortunately.
Best regards,
VictoriaCORRECTION: The original picture is not loaded for Mobile phones, GTMetrix must have a problem with their mobile phone testing client, will talk with them.
Hi Ismael,Please try to put this high in the priority order, speed in mobile is everything nowadays for SEO. Infact, I would deem it almost as important as on-page SEO and linkbuilding strategies.
I implemented the suggested code (switch out the image.php). I am still somewhat confused though. When using Chrome web-dev tools I can see that srcset is implemented
, but it seems to me that the original picture is still loaded for mobile phones.It could be user error as I am not so savvy with this tool.However, when I use a browser on my laptop and right-click to download the picture. I get the exact same picture downloaded if I have the browser in full width or in the smallest width possible (trying to simulate a mobile phone).Another question, the code for srcset didn’t work for a color sections background image, is this possible to fix?
Hi,
The srcset option has been put on hold for other priorities, but rest assured that you will still be able to fully optimize the site without it. Please check this article for more info.
// https://kriesi.at/archives/scoring-100-100-in-google-pagespeed-insights-gtmetrix-pagespeed-and-yslow
Best regards,
Ismael
- The topic ‘Optimizing images: Should I use more than 1 version?’ is closed to new replies.