Optimal image sizes

[ubercool]

Since you advertise the Supreme theme as Retina ready, do you think you could help us theme owners choose the optimal image size to obtain full Retina resolution?

The Supreme theme requires three distinct image sizes: slider, thumbnail and detail. Amazingly some images get resized to 14(!) distinct image sizes by WordPress, which is a huge waste of resources since I already provide the three sizes needed.

I realize that images are dynamically resized but since there’s little logic in what happens, I thought my experimentation detailed below would be helpful to other Supreme users. All my tests were done at my default browser window size of 1280×1024.

Slider Images
After much experimentation I believe that the native slider image size is 1920×700, at least that’s what I saw in some of my first images. I realize that the built-in slider cannot handle retina images, so I’ll skip this issue for now.

Code takes original 1920×700 image and uses it at same 1920×700 size and places it in a 940×450 container (so 1920×700 is optimum resolution):

<img src="http://www.ubertrends.com/wp-content/uploads/2013/05/Sony-NEX-5R-1920x700.jpg" width="1920" height="700" alt="Sony NEX-5R" />

Detail Images
I did a number of different image-size experiments, here’s what I found:

1880×1000
I first tried this image size because your picture container is 940×501. As you can see, the original 1880×1000 image is reduced to 1540×819 and put it the 940×501 container:

<img src="http://www.ubertrends.com/wp-content/uploads/2013/04/blackmagic-pocket-angle-1880x1000-1540x819.jpg" width="1540" height="819" />

3080×1640
If you use double the 1540×819 resolution, 3080×1640, you also do not achieve retina resolution because the image is resized to a 1540×820 image:

<img src="http://www.ubertrends.com/wp-content/uploads/2013/05/Cadillac-ATS-3080x1640-1540x820.jpg" width="1540" height="820" />

But results are not consistent because when I uploaded another image at double resolution, 3080×1640, it resulted in a final 2340×1245 size, which delivered a much better image.

So that lead to my final test.

2340×1245
Using 2340×1245 resulted in a higher-quality resized final image size of 1540×819:

<img src="http://www.ubertrends.com/wp-content/uploads/2013/04/BlackMagic-Pocket-2340x1245-1540x819.jpg" width="1540" height="819" />

Thumbnail Images
WordPress takes original 840×630 image and uses it at the same size 840×630 and puts it in a 294×220 container (so 840×630 is optimal and resolution is retina):

<img src="http://www.ubertrends.com/wp-content/uploads/2013/04/Blackmagic-Pocket-840x630.jpg" width="840" height="630" alt="Blackmagic Pocket Cinema" />

I would like my images to be shown at full retina resolution, which so far only works for Thumbnail Images, so can you please suggest the best strategy to address this very confusing state of affairs?

[Swift Ideas – Ed]

Hi there,

Ultimately, it’s tough to explain. The difficulty with all of it comes from the fact that it’s a theme, and thus requires planning for a wide range of possibilities. This causes the issue of having to take a middle ground with image sizes, in order to get the best resolution / size without wasting too many resources.

The slider isn’t strictly 100% retina, due to the fact that loading several high resolution images would be a killer. Things like the blog/portfolio item thumbnails are set based on the size that they will be when they are largest in their responsiveness, so that they look the best at all resolutions.

There are only 4 extra image sizes on-top of WordPress standard sizes, and these are needed for the various slider images. The rest are done on the fly, which saves the need for files to be created for each individual size.

The way the retina image script works is that if the original image is big enough to serve a retina sized image, then it will show that, else it will show the standard resolution sized image.

Hope that helps.

– Ed

[ubercool]

But I know your container sizes, and I guess I can look at your code to see what you recommend as the minimum vertical size, etc. I just thought you had some good seat-of-the-pants recommendations. Other theme designers will tell you what the optimum sizes are for wp-image, etc.

Anyway, even if you don’t have answers, I suggest you make this post sticky, it will still help a lot of users of your theme.

[Swift Ideas – Ed]

We’ll see what we can do about providing more information in the future. I agree it would be helpful. The only reason I haven’t detailed them all is that there are just so many different sizes that are used based on various factors, such as the display type for the asset, the number of sidebars on the page, and the size of the asset.

– Ed