From the course: Making Your Site Retina-Ready
Join today to access over 22,600 courses taught by industry experts.
Simple JavaScript method (retina.js)
From the course: Making Your Site Retina-Ready
Simple JavaScript method (retina.js)
- There are so many solutions for optimizing our content for HiDPI. But some of the solutions we've seen so far are really pretty manual. Swapping images using JavaScript is another, mostly faster, easier method of getting our images to look right on these specific devices. In this video, we'll take a look at using a JavaScript library called Retina.js and make it swap images for us. It's a little JavaScript library that works on the image tags in your HTML. And if you click on the link, you to go the website, retina.js, you can see right here. The idea is that we need to do this. We need to have in our HTML just the regular old graphic, the non-retina graphic. We're gonna create a second graphic. It is Retina. It's gonna have an @2x at the end. It's gotta be named a certain thing. We could change that in the code if we wanted to, but to keep it simple, we won't do that. First things first. We need to download the zip. So you can go ahead and download it now. I've already got this in…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.