-
Posts
-
Hi Enfold team,
On this page of my site : http://www.dual-time.fr/montres-audemars-piguet/, when I replace a picture (201×250) by a bigger picture (740×920), the watch is blurred. As you can see in this example : http://www.dual-time.fr/test.jpg
On iPhone I want to have just one column with big picture, that’s why I want to replace it.
How can I have a good quality on desktop (201×250) and on smartphone (one column with bigger picture (740×920)
Thank you !
OmarHey omardualtime,
Can you create a test page showing both the blurred and the exact size (same as the screenshot) and give us the link here, so we can try to check.
Best regards,
NikkoOk !
Here is the test page : http://www.dual-time.fr/blurred-test/
The first and second watch are at the exact size. (OK)
The third and last ones are at 740×920. (blurred)
Thanks for your help !
OmarHi Omar,
I have tested it on my end, unfortunately it’s the same and it’s not a theme issue but more on browser issue, in which scaling down images makes images blurred, you can test this using a simple html file (no wordpress or enfold) and just reduce the image size. You can add this css code in Quick CSS (located in Enfold > General Styling) to make it look sharper though the quality isn’t as good as the correct size:
img.avia_image { image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; -ms-interpolation-mode: nearest-neighbor; }Best regards,
NikkoThanks for your help Nikko.
Is there a way to “say” to enfold to pick the 201×250 when the device is a desktop and the 740×920 when the device is a smartphone or iPad ?
Thank you,
OmarHi Omar,
The small image does not look sharp itself. I think the thumbs should be of higher quality and disable WordPress image compression.
http://www.wpbeginner.com/wp-tutorials/how-to-increase-or-decrease-wordpress-jpeg-image-compression/
Best regards,
Victoriai do use this code – don’t know if both will work:
add_filter( 'jpeg_quality', create_function( '', 'return 100;' ) );but this will affect only the upload – so if you want to handle already uploaded images you must use after the code a plugin like regenerate thumbnails – to recalculate the images.
I’m not sure I understand what you say. In my page, the only picture taken by enfold and wordpress is the 740×920 one. So there is no thumbnail, it’s only this picture scale down to …x… in accordance with the device. Except that when it scales down it makes the picture blurry…
So is there a way to select a different source of picture according to the device ?
Thank youHi,
You can duplicate the section and use the elements’ Screen Options to toggle the display properties on different screen sizes. Select a different thumbnail for the duplicated section.
Best regards,
IsmaelThanks Ismael,
Can you describe each steps please ?
The loading page speed won’t be affected with this solution ?
Thank you !
OmarHi,
1.) Duplicate or clone the section/elements.
2.) Edit the original section’s/elements’ Screen Options. Set the option so that it is only visible on desktop view.
3.) Do the same thing with the duplicated section/elements but set it to display on mobile view only.
4.) Choose a different thumbnail size for the duplicated section/elements.
Some browsers may still load the images even if the display property is set to “none”.
Best regards,
IsmaelOk thank you. It’s a little bit binding…
In the future updates, could you think about a “srcset” solution please ? https://make.wordpress.org/core/2015/11/10/responsive-images-in-wordpress-4-4/
Thank you,
OmarHi,
You can request the feature in the following page.
// https://kriesi.at/support/enfold-feature-requests/
Best regards,
Ismael
- You must be logged in to reply to this topic.