Hi Enfold team, thanks for a truly great theme! Impressive work!

A question for the Team and a little explanation from me which may help other people on Enfold. As I’ve seen many people on this (and other forums) confused on how to deal with retina/non-retina images.

I am happy to see that Enfold has taken the same approach I favour for catering to retina screens: upload double-size and let the theme/browser do the downscaling as needed.

I basically treat images this way in WP:
– create double-size true width/height
– save them in Photoshop “save for web” with between 30 and 20% quality
– run all images through FileOptimizer before upload
– set WP compression to between 90 and 100
– set thumbnails in theme functions.php to double-size and regenerate thumbs
– run all thumbs from WP through FileOptimzer locally and re-upload through FTP

My question to you:
Do I need to manually double the sizes of the thumbs in the (child)theme’s function.php for the thumbnails or have your already done this? I would not want to make the thumbs 4x as big as needed :-)

For Enfold users wondering about the why of this approach:

Content images in a responsive template have different requirements compared to the traditional “this-is-the-width” approach. But all present attempts to serve up different image sizes to different devices, whether client-side or server-side, are incomplete at best and based on wrong assumptions at worst (apart from most of them not being standards compliant). Including the src-set approach favoured by WP and the plugin Retina approach. Why?

These factors make the traditional (src-set) approach invalid:
– the same content image is wider when there is no sidebar present
– content images in widgets change width on various smaller screens
– content images in sidebars change width on various smaller screens
– high resolution / retina screens need a 2x larger image to be sharp
– smaller screen widths may have higher resolution screens
– users may always zoom in on each page (on desktop, tablet and phone)

So we need to serve up much larger images in order to cater for the above. But we have no way of knowing in advance which device has which screen resolution with which layout and which zoom. At present the best solution in my opinion is therefore to serve up one large image and to let the browser do the scaling for us (modern browsers have become quite good at this). Yes, even for phones/tablets.

This does not mean we need to bother our visitors with large image sizes, more data consumption and slower loading pages.
High Resolutin/Retina images aren’t necessarily larger files, at least not with JPEGs. Since you have four times as many pixels with a twice larger size, you can get away with a great deal more compression, and the end result is sometimes even smaller than the original. A 400x400px image at 40% quality may appear no more heavily compressed than a 200x200px image at 80% quality, yet may be the same or smaller file size.

By having a 2x larger image and then scaling down in the browser, it has the effect of reducing the jpeg compression from 8×8 squares to 4×4 squares (giving the compression 64 pixels to work with instead of 16) on standard monitors – even at high compression. This “false resolution” hides the increased numbers of jpeg artifacts. On retina screens the artifacts would double with a traditional size image scaled up.

This is an interesting and extensive research article showing this option for dealing with highres images:
https://www.netvlies.nl/tips-updates/algemeen/design-interactie/retina-revolution/

Basically, it’s saying that, if you make the image quite large (width and height), but then save it at quite low quality, it still comes out very sharp on retina displays. It means that you can use the one same image on all devices, and that  the file size is very low, too, which is an extra bonus. You can set the width (with the height set to auto) of the image in the CSS to get the dimensions needed.

This is currently my approach for dealing with both retina-friendly and bandwidth-friendly images.

Example with a test photo with many details:
Traditional: test-600x375px – 80% quality – size = 87KB
Retina-friendly: test-1200×750 – 40% quality – size = 96KB
Retina-friendly: test-1200×750 – 30% quality – size = 79KB
Retina-friendly: test-1200×750 – 20% quality – size = 67KB

Usually 30% quality “save for web” in Photoshop is quite enough for a double-sized (retina) image to remain sharp. And many times even 20% quality will work just fine. Try it out yourself.

For Enfold users on Windows, may I suggest a great tool for (loslessly) compressing PNG and JPG (and many other formats) even further before uploading?

FileOptimizer
website: https://nikkhokkho.sourceforge.net/static.php?page=FileOptimizer