Support for HiDpi/Retina images

[maartene (Maarten Engels)]

More and more devices support HiDpi/Retina resolutions. This requires websites to offer images in a higher resolution.

Especially screenshots containing text (i.e. code, debug output) look fuzzy.
For instance: (left is what Rapidweaver makes of it, right is the original file - click to see full res image)

This could be as simple as having the image inspector offering the option to change size without resampling the image but adding WIDTH="" or HEIGHT="" tags to the created HTML. For instance:
<img src="some.png" height="50%" \>

Does this make sense?

[teefers (Doug Bennett)]

Retina images have 4 times pixels and although with compression aren’t necessarily 4 times as large they are always substantially larger.

Since you don’t want to slow down page loads for non retina type displays it’s best practice to use a different image file for both types of displays. Then use something like Retinajs to load the images based on the display type and using Apple’s prescribed high-resolution modifier (@2x).

If you’re using stacks and using a stacks image check out this:

Generate Retina images in Stacks

[maartene (Maarten Engels)]

Hi Doug,

Thank you for your reply. RetinaJS looks promising. I’ll give it a try.
Wouldn’t it be great if that was built into RW by default? (hint hint)

Kind regards,

Maarten Engels

[thang (David)]

This stack may be of interest:

Srcerer | Shaking the Habitual

[habitualshaker (Stuart Marshall)]

Thanks @thang. Yes - at its heart Srcerer is focussed completely on the responsive delivery of images to different devices and resolutions.

It comes with a lot of cool bells and whistles too!

[tav (Andrew Tavernor)]

Stacks 3 supports retina images directly (seemingly a little known fact).

Using the basic image stack, drop in an image, double click it to edit and change the Scale setting to 50% or less.

Stacks will automatically generate srcset markup for retina (2x) and normal (1x) images.

If you want to add more sizes and srcset options then Stuart’s stack (@habitualshaker) is the way to go.

[teefers (Doug Bennett)]

The weaver tip link above shows the stacks built-in way.

[tav (Andrew Tavernor)]

Sorry @teefers missed that- you can’t expect me to read all this stuff can you

[teefers (Doug Bennett)]

You should keep in mind, that the “built-in” stacks way only works for images “drag and dropped” into the main edit area of the stack. Most Warehoused style images stacks or stacks that you drop the image into the inspector area don’t work that way. Stuart’s Srcerer is an exception.

If you aren’t using stacks you can do the same thing by inserting “HTML” as well. @willwood has a Knowledgebase article on the Retina:
https://themeflood.com/knowledgebase/retinaimages

[maartene (Maarten Engels)]

I’ve just tried out the solution and that works like a charm! It’s still not as ideal as having this support built into the application (Stacks is way to sophisticated for my needs), but it will get the job done well enough.

Thanks everyone who took the time to respond!