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%" \>
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:
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.
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.
