Resizing Image for Retina Screen/ How to check – container, rendered size
-
Dear,
I have got into the A.) Inspect/ developer function on Both 24″ imac 4.5k retina screen to check what size of image is needed for retina screen. At the same time, I B.) use the Inspect function on windows Surface with Chrome browser for a simulation.
Below are 4 pairs of screen captures 1a vs 1b, 2a vs 2b and so on.Screen Capture on Safari 24″imac Vs Surface Brave Simulation – Comparison – https://drive.google.com/drive/folders/1UVTk6B9cx8cE4NIY1dysdsMJkpSavk8_?usp=share_link
It seems the image size shown on a real retina screen is ~0.5x smaller then the “rendered” image size shown on a window simulation. Question: which value shall I use for number reference to resize images? (Is the “rendered size” on non-retina screen already shown a doubled value for retina? that means just resize the images with the “rendered size” is ok? That means I do NOT I still need to double the values of the “rendered size” on window? Which value on which screen capture shall I take for image resize reference?)
Source: WordPress Media page – https://littlemauiisland.wordpress.com/portfolio/media/ (Cat photos on the left on the 1st and 2nd row were sampled)
Source: WordPress Wedding page – https://littlemauiisland.wordpress.com/wedding-main/wedding-memories-protected/
Web password is “happynewyear” across all the web pages
Thank you very much.The blog I need help with is: (visible only to logged in users)
-
Continue the above, for example, the below article, it said
//Recommendation
My personal approach is to just use the width and height of the image size that is rendered on a desktop screen.////As a general rule of thumb, an image should not be more than twice as wide as the maximum size it is rendered on within a page. (Why twice as wide? – to enable crisp images on retina / high density displays, where pixels can be accommodated more densely on these displays).//
https://jamesandrewwright.com/articles/web-image-optimization-best-practice-techniques/#shoud-images-have-explicit-widths-and-heights
that means the x2 is referring to “rendered size”…. (in doubt the x2 referring to which value….) -
Hi @mauijojokat ! The rendered sizes are going to depend on your screen width. Try resizing your browser window on the 24″ monitor and you’ll see what I mean: they shrink down to a point then collapse, typically, depending on your gallery or column settings.
I’d recommend sizing your images for 2x their maximum anticipated display size. Let us know if you need more help!
-
The above link https://drive.google.com/drive/folders/1UVTk6B9cx8cE4NIY1dysdsMJkpSavk8_?usp=share_link, photos 1a (small cat 600px), 2a (medium cat 900px), 3a (small landscape wedding 320), 4a (small wedding portrait 480) are Inspect elements shown on a real Safari 24″ 4.5k retina imac.
- Are these the maximum anticipated display size on a real Safari 24″ 4.5k retina imac?
2. What I need to do is to upload the x2 size of image, that means 1a~1200px, 2a 1800px, 3a 640px, 4a 960px?
3. Go to the computer/ screen that i want my site to display, check Inspect elements for the image size shown on the web of that screen, x2. Don’t care the rendered size and other things. < is this correct?
Just to make sure if I get the right meaning. Thank you. -
Hi there,
I’m worried that you’re over-thinking the image sizing on your site. We’ve set up WordPress so there is no need to calculate the size of each and every image you upload. Instead all you need to do is upload one image that is large enough to be used on any area of your site.
Because WordPress will resize your images automatically, if you display a small image on your page, WordPress will automatically resize what it needs from the largest file you upload.
For example if you upload an image that is 2000px wide, but in your page layout you are showing the image at 300px, WordPress will automatically show 300px images to people on standard displays, and 600px images to people on hiDPI displays. No need to calculate the size of each individual image you need to upload, because instead you uploaded one that is large enough that WordPress can figure out the rest for you automatically.
Hope that helps. Please let us know if you have any more questions.
-
Thank you very much for the reply. Sorry I hope this will be my last question on resizing.
I have created this layout as example. In future, all of the images to use will follow these 6 rows of image sizes. Pw is “happynewyear”
https://littlemauiisland.wordpress.com/portfolio/layout1/
Cos an actual px value is required to put in Lightroom to resize, **it’s at best if I would have 6 values as reference in respective to the selected 6 images**. After this is solved, everything will be on track (cos original images are ~6000px).Further info – the 6 images shown on an 24″ 4.5k Retina imac VS 27″ 5K Apple Pro Display VS 12″ Window Surface Pro 4 –
https://drive.google.com/drive/folders/1gtIpf8Fq3g_aIAZZLNrTJ9wi6luBtBB3?usp=share_link
Thank you very much for all the effort to help here and in the past. Thank you. -
Currently, my estimation values for the abovementioned 6 images resizing –
Row 1 2400px
Row 2 2400px
Row 3 1600px
Row 4 2400px
Row 5 800px
Row 6 1200px
Hope it fits most monitor, and also the current 5k 27″ Retina Display (5120 x 2880) and 4.5K 24″ iMac (4480 x 2520). -
I don’t have a 4.5k or 5k monitor, but the photo sizes look good on my Macbook screen (which is a Retina display, but from 2017/2018) and my external monitor when I check the page on each screen!
- The topic ‘Resizing Image for Retina Screen/ How to check – container, rendered size’ is closed to new replies.
WordPress.com Forums 