CODEWITHSUNDEEP
javascriptcssresponsive-designresponsive
Shubham Kandiyal
Shubham Kandiyal

Reputation: 340

retina ready image @2x not work

I read about retina ready sites and I get some information like In retina ready sites images, slider,font and other elements are more sharper, more density and high resolution...

My Question is:

How I convert Normal Site to Retina Ready with Images, Fonts and other things...

<img src="[email protected]" width="660" height="440"/>

Original width: 660px and height: 440

And I already import retina.js

Download RetinaJS from Here

Thanks in Advance

Upvotes: 0

Views: 1571

Answers (1)

Alex - DJDB
Alex - DJDB

Reputation: 750

If you want to use high density images, you have to set another attribute : srcset.

In this way, src attribute is usefull for old browsers that don't support srcset attribute. srcset attribute is used by modern browsers that will use it in order to load high density "@2x" image if the screen is ready for it. If the screen is not retina, the browser will automaticly load the low density image "@1x".

<img srcset="[email protected] 1x, [email protected] 2x" src="[email protected]" alt>

You can look at this article from MDN if you need more information about it. There are more attributes that can help you like size.

https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

Upvotes: 2

Related Questions