High-resolution screens on mobile devices is now a norm. The images give users a sharper and crispier look, and once they have gotten used to this high level quality, web developers are pressed to produce high-quality imagery for their users as well. Most images that we use a decade ago will definitely
turn blurry on a retina display screen, thus we need a new way to present graphics on the Web. The ways we can adopt vary depending on the purpose of the image.
Font Icon and
SVG is now the better way to serve icons or logo, while
Media Queries is the way to serve image from CSS. But if you want to serve hi-res image within the body content, Retina.js is the way to go.
Retina.js, a JavaScript library that makes serving high-resolution images a breeze. You don't even have to modify much of your code. Let's check it out.
Recommended Reading: Retina Display Ready With Media Query Getting Started
Retina.js does not rely on any sort of third-party libraries. All you need is to download the retina.js
file and link it in your document. Alternately, you can link the file from
CDNJS.com, like so.
<script src="//cdnjs.cloudflare.com/ajax/libs/retina.js/1.0.1/retina.js"></script>
Retina.js offers
two methods to
serve high-resolution images.
Method 1
In its initial release, Retina.js adopts the same method
[...]
No comments:
Post a Comment