retina display - using retina.js

[Keith Vaugh+ 16]

Hi All

For some time I have noticed some haziness around images on our site when viewed on a retina display. I have discovered that with the use of retina.js and including a second image at double the pixels and adding @2x at the end of the image titles, then these images will be displayed as opposed to the original file. 

Has anyone tried this? 

How could images that are added to pagelines sections be handled (i.e. these normally add PageLines- before the title 

Thanks

[Andrew 207]

my recommended solution for this is to just upload larger images than needed, e.g. 1200 px wide if it will be at 600px... but make sure to optimize their file size using "save for web" tools in the software. 

Too much hassle to create multiple images etc... web design is about speed

[Keith Vaugh+ 16]

That has been a work around, however the larger files can them become blurry in area of detail on display's other that retina. Have tested this option using the width="" - particularly trouble some with logos when you what there weight or height contained from aesthetics. 

[Andrew 207]

If the images are larger than they need to be then they should look fine everywhere. Please post some screenshots and technical details and we can dig in further  for you

ALSO consider using SVG images, these are vector based and scale perfectly either way.