Hi Team and Community,
I am utterly confused about the image sizes and best practices. I’ve read ALL of the documentation and links on TagDiv, so please don’t simply refer me to a broad link, as some things aren’t clear to us as customers.
I hope this thread will be useful to a lot of people struggling with this:
Site layout (max width):
– Row stretch up to 1400px
Home page:
– Headlines: 3 images in 3 columns , roughly 1400/3 so width 450px [900px on Retina]
Article page
– Featured image: width 1080px [2160px Retina]
– Sidebar (related): 3 images floated vertically, width 320px [640px on Retina]
– Bottom bar (popular): 4 images floated horizontally, so roughly 1400/4 = width 350px [700px on Retina]
I work on a Mac, and having good image quality is important, so images should be served as x2 resolution (Retina) on devices that support it.
Based on this I have selected these thumbnails in the Theme Settings:
a) Headlines (>450px) => 696×0 + Retina
b) Featured image (>1080px) => 1920×0 + Retina
c) Sidebar related (>320px) => 696×0 + Retina
d) Bottom bar popular (>350px) => 696×0 + Retina
I noticed some images were not sharp, and I briefly installed Jetpack Boost to check why that was.
It gave me warnings that the images shown on my Retina screen were not big enough.
All of the images that I upload are 1920px wide, so it has enough pixel data to work with.
We are using responsive design, not AMP because AMP almost completely removes recognizable branding and it’s a hassle to create 2 versions of each page, instead of a simple responsive layout.
So 4 questions:
1) What happens exactly when we select, for example, the thumbnail 696×0 + Retina?
In our case of a) Headlines, the image shown on the display should be 450px on old displays, and 900px on retina displays.
So should I select 696×0 or should I select a 1068×0 (bigger than the retina resolution)?
2) What about case d). I need at least 350px on old displays, and roughly 700px on retina displays.
696×0 is only 4 pixels short of 700px. What should I select? in TagDiv Composer as width, and should I for that resolution enable [] Retina as well or not in the Theme Panel?
These 2 questions are most important first. If we don’t know how resolution is handled by the theme, then all attempts to optimize the page for speed breaks down from there.
3) It seems that we cannot set different resolutions per device type in Flex Block. How can we make sure that smaller devices don’t load images that are 4x bigger?
4) I’ve been testing different plugins, with mixed results in terms of Google PageSpeed Index scores.
Which image optimization plugins have been tested and give the best results with NewsPaper theme, preferably that does all of what it needs to do in the background.
Any other suggestions that can be helpful?
Hi chrisfoxatx,
1. For the size of the images you have, you have perfectly selected the thumbs to use – https://i.imgur.com/UM6OgFa.png They work like this after they are activated in the theme panel, these thumbs are created for each image that is loaded in the media, now the problem is with the ones that are already loaded, for these, you have to use a regeneration plugin that should resolve the problem with the retina resolution.
Normally when you select that thumb, for example, 696×0, the thumb with the size 696xauto and retina size will be used instead of the original image.
2. You should use the retina option for all 3 sizes of thumbs you use, this way you will get the best result on both windows and retina (don’t forget to regenerate the images if these options were not selected from the beginning, i.e. before adding the images to the media, and when regenerating select delete all thumbs and regenerate new ones).
3. When you edit the flex element with tagDiv Composer you have the option to select the size of the thumb, as a suggestion I recommended using a middle size because it cannot be adjusted per viewport, it can only be changed if you use the mobile page template.
Also, if the retina thumb is selected in the theme panel and the image has been regenerated, when you select, for example, the 696×0 thumb on windows, the retina thumb corresponding to the 696×0 thumb will be automatically used when a retina device is used.
4. Unfortunately here I can not suggest the best of all with the theme, but a plugin that is ok with the theme is EWWW Image Optimizer , but I have seen many users who also use Smush and Imagify.
I hope this will help you!
Thank you!
Thanks Calin for the answer.
Glad to see I’m on the right path.
Still hoping that device-specific image resolution will make it into a future build. Pagespeed score will soar. đ
I’ll try with these settings and after that do comparison with a few plugins. I’ll try EWWW, as well as the Shortpixel Plugins, so good to know that overall I’ve set up things correctly.
Two related questions
What happens in this situation?
b) Featured image (>1080px) => 1920Ă0 + Retina
Normally I have 1920×0 + Retina selected as thumb, but since 1920 is already twice the size of what is needed (1080px), should I also turn on Retina?
So I’m thinking about what will happen if I turn it off (and after regeneration)?
– On Windows: 1920px is served?
– On a Mac: 1920px is served as well, which roughly 90% of what is needed for full (2x) Retina and may be sharp enough?
1) I guess what I’m asking is: If the Retina button is switched OFF on for 1920×0, how do Macs process the data? Will they still display a resolution higher than 1080px, simply because the data they have in the image (1920×0) allows for it, or will it miss a certain tag or instruction to display it at its sharpest, retina resultion?
2) Alternatively, I could serve 1068×0 images to windows (1.2% smaller than full 1080 – might possibly lose some sharpness) and activate Retina. What are your thoughts on this?
Hi,
Indeed, the images contribute a lot to the speed of the site, and our developers try to improve the theme with each update.
b) All you have to do is to have the retina option activated for the thumbs you use, if you use 1920Ă0 then the retina must be active for this thumb as well – https://i.imgur.com/31ZJUQV.png
1) If the retina option is disabled on a thumb, then the normal thumb will be displayed on the retina (the thumb that is selected on the block).
2) For most sites, the thumbs of 1068 X 0 and 696 X 0 are the most used, usually they go on a row width of up to 1400 without problems.
Thank you!
