EverWeb Codebox

Retina Images Using The <img> Tag

Spitfires

Retina JS

From the previous page it can be seen that there are certain advantages to be gained from inserting images use the HTML <img> tag. SEO info can be added using the "alt" and "title" attributes and the image can be styled using CSS to add border, shadow, opacity etc.

Retina.js is a small javascript which, on page load, checks each image on the page to see if there is a high-resolution version of that image available with the Apple high resolution modifier - @2x

If a high resolution version is available the script will load it.

Go to this site...

http://retinajs.com

... and download the retina.js

Drag it into Assets, control click it to get the relative path and paste it into this code...

<script type="text/javascript" src="{!-ASSETSPATH-!}External%20Files/retina.js"></script>


Paste this into the Site Wide Footer Code box in the Site Publishing Settings page if you want this feature on every page of the site.

Create both the standard and the retina images and name them appropriately...

image.jpg

image@2x.jpg

... and drag them into Assets.

Control click the standard image to copy its relative file path and paste it into this code...

<img src="{!-ASSETSPATH-!}Images/image.jpg" alt="alt text" title="Tooltip Text" style="width:600px;height:300px;border:none" />

... enter the width and the height of the standard image and then paste the code into an HTML Snippet.

Text entered into the title attribute in the above code will appear when the mouse is hovered over the image. If you don't want it, leave this blank.