This lesson is exclusive to members

Illustrator - UI & Web Design using Adobe Illustrator

Retina - HiDPI and responsive image export from Illustrator CC 2017

Daniel Walter Scott || VIDEO: 38 of 45

Download Exercise Files



You need to be a member to view comments.

Join today. Cancel any time.

Sign Up

Hi there, in this video we're going to talk about what we do about retina, or high dpi, or responsive images, whatever you may want to call it, it's all about quality of images.

Now, most of the time, we're kind of at a point where there's no clear rules about what you should do, there's a couple of ways of doing it, and some people do it, and some people don't. Most of the time people don't, what they do is they just give you an image, and they scale it up and down for the different resolutions, and just live with it, because retina displays, like my Macbook Pro in front of me, and some of the Windows tablets, and some of the new iPads, they have double the pixels, they have some amazing quality crammed into them, and what mostly happens is people ignore it. It's sad but true, people just forget about those guys because there's such a small percentage, and there's a bit of work on the web design side to try and accommodate them all.

Now, saying that, if I was a big site, of course I’m going to accommodate them, but quite often when I'm dealing with people with small to medium websites, people start to worry about it. So you cannot worry about it, and you'll have to get into it, so we're going to talk about it now, but know that if you want it for your first website, it's okay, you get a whole pass, you're allowed to just use standard definition images for this first one, but after you've done a couple, and your web skills are getting better, you totally want to get into this, especially if you're dealing with clients, like for me, I'm teaching web designers, and creative things, and you could argue that I should be doing high resolution stuff because a lot of people doing my courses have some kick ass laptops, so they might be using Macbook Pros with retina screens, and all that sort of stuff.

So let's talk about what people normally do. It is, they just export a version, like we do here, I'm going to bin all of these, all our lovely work, and I'll bin them all, just so that we can start again. And let's say I'm exporting this for my website. I’m going to unlock the background layer, and I grab you, grab just this part now, and drag it in. What mostly people do is, it's going to be a JPG-- I'm going to get rid of this suffix, I don't like that there. And it's going to be a scale of '1', and they just live with it. And, when it gets on to a screen that is really big, or has really high resolution, like a retina display for Mac, it just scales and pixelates, it just does. It doesn't look too bad, but you can tell. I can tell a glitch, and I see, a population can't tell that it's not been scaled, so often what I do is, say for something like this, this big graphic here, is I'll make it bigger than it needs to be, so I'll go down here, and go to this '1.5', so I've made it kind of like-- It's not double the size, I could make it double, so it's actually twice the size of here, so that it means, when it's seen on a retina it's really clear. The problem with that is that, people that aren't, or say, somebody on a mobile phone, not dealing with this really big image, is being scaled right down for their phone, but they’re having to load this really big file size. So often what I do is I kind of cut it in the middle, and say, "I'm going to make it 1.5." 

Now, that's the cheap, cheesy, easy way, and the way I do it most of the times. So let's say that you're doing it proper. Let's pretend we're proper. What I'll do is, I'll create a version that scale '1', and then for the retina displays I'll create a different version, so I add a 'Scale', and I'm going to make a second one that's times 2, '2x'. And it just means that-- I'm going to go to JPG, and-- Am I going to append it? Yes, I'm going to have to append it, you can use the '@2x', that works fine, and that's really good when you're doing especially iOS development, which we'll cover in the next one, but normally when I do it I just do times 2, 'x2', and another version. 

It depends on how high you're going to go, I only-- If I'm getting serious I only support retina which is double the resolution. You can find lots of devices these days which have 4 times the resolution. This file size is going to be huge. At that time, you can sport those big files, and what you can do is, when you're building your site, you can switch things out with media queries, it just means you can check what size the screen is, and then display the right image for it, and that is perfect and it works pretty well, so a lot of extra work for quite a small percentage of your readership, or your users. 

So that's one way of doing it, and now I've got three versions. If I hit 'Export' now-- What is this guy called? I can't remember the proper name, so I'm going to give him a new name, I'm going to call it 'background', not very exciting. 'Export'. Stick him in there. Let's have a look. Okay, background, I've got this first version, and there's another version, and then this giant version. You can see the sizes here, one's at 0.1MB, one's 0.2, and then one jumps up to 0.7, so quite large. So, big, massive, even bigger. And what happens is, when you're building your website on the other side, what I mean by other side is  in code, it's not super hard to go through and create media queries to trigger these different screen sizes. It just says, if  my browser is looking at this with the super retina screen, check if it is, then, don't load this image, load this image. And yes, it's a pain in the bum, but that's how people go around it. 

So, that's how you deal with retina. Often you only do two versions. You'll do a normal version, and then a @times2, '@2x', and just switch it out in code. Now, in saying that, I don't, all I do is grab this guy and make a 1.5 right in the middle and I force everybody to look at the 1.5 version, and that means that people using screens that aren't retina are stuck having to load a slightly bigger file size, and the people that are on retina get a slightly better image. Nobody wins, or everybody wins, depends how you look at it.

So you can go through all of these images, and just upload them, drag them into here, and add to versions. So, hopefully that helps you. Another thing is, people sometimes call it HiDPI, and retina, they are the same thing. HiDPI is what non-Apple people have to call it, retina is kind of a branded term from Apple, so if you're calling it retina you're in trouble. It has to be HiDPI, because that's what they call that kind of high resolution images.

Now, one other thing, my little asterix at the end here, is that it's 2017, a picture in a couple of years, if you're looking at this in 2019, you’re probably sort of going, “Jeez, Dan! Bad, bad, bad stuff.” Things might have progressed, and they might have been either a big adoption of @times2, '@2x', or there might be just another way of doing it, so this one is the one they go and check, everything else, solid, this one here, just check, and check with your developer what they want.

All right, if you remember nothing from this video, I've kind of jumbled on a little bit here, is just leave it at @times1, '@1`x'. That's what everybody does, and you won't be hurt if you do that, just might not look as good on some screens, so just do 1 scale at the moment. All right, verbal diarrhea over, back to your videos.