Jump to content
Sign in to follow this  
Keith Vaugh

retina display - using retina.js

Recommended Posts

Keith Vaugh

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

Share this post


Link to post
Share on other sites
Andrew

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 ;)

Share this post


Link to post
Share on other sites
Keith Vaugh

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. 

Share this post


Link to post
Share on other sites
Andrew

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×