Hi there. In this video we're gonna talk about what we do about retina  or high DPI  or responsive images, whatever you 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, 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, okay? 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, some of the new iPads  they have like double the pixels. They have some amazing quality crammed into them. And what mostly happens is people ignore it, okay? It's sad but true.

People just forget about those guys  'cause they're 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 gonna accommodate them,  but quite often when I'm dealing with people, it's small  to medium websites, people just don't worry about it, okay? So you can not worry about it  and you'll have to get into it. So we're gonna talk about it now, um,  but know that if you want to for your first website,  it's okay, you get a hall 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 creatives things. So, um, you could argue  that I should be doing high resolution stuff  because a lot of people  that are doing my courses have some kick ass laptops. Okay? 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. Okay?

It is they just export a version like we do here, okay? I'm gonna bin all of these, all our lovely work. I'm gonna bit more just so we can start again, okay? And let's say I'm exporting this for my website. I'm gonna unlock my background layer. I'm gonna grab you, oh,  grab just this part and I'm gonna drag it in.

And what mostly people do is it's gonna be a jp, okay? And I'm gonna get rid of the suffix  because I don't like that there,  and it's gonna be a scale of one, okay? And they just live with it. And when it gets onto a screen  that is really big  or has really high resolution, okay, like a retina display  for Mac, uh, it just scales  and pixelates just does, it doesn't look too bad, okay? But you can tell, I can tell I b***h a 90%  of the population can't tell that it's not being 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.

Okay? 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, okay? I could make it double. Okay? 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, um, for people that aren't,  or say somebody on a mobile phone, they're dealing  with this really big image that's being scaled right down  for their phone, but they're having  to like load this really big file size, okay? So often what I do is I kind of cut it in the middle  and I say, I'm gonna make it 1.5. Now that's the cheap, cheesy easy way in the way  that I do it most of the time. So let's say that you're doing it proper, okay? And let's, let's pretend we're proper. And what I'll do is I'll create a version  that's scale one, okay?

And then for the retina displays,  I'll create a different version. So I'll add a scale and I'm gonna make a second one. That's times two. Okay? And it just means that I'm gonna go  to jp, am I gonna append it? Yes.

I'm gonna have to append it. You could use the at times two x. Uh, that works fine. Okay? And that's really good when you're doing,  especially iOS development,  which we'll cover in the next one. But of, normally when I do it, I just do times two, okay?

And I add another version. And it depends on how high you're gonna 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 four times the resolution. This file size is gonna be huge, okay? And that's fine.

You can support those big files. And what you can do is when you're building your site, okay,  is that you can switch things out with media queries. It just means it can check what size the screen is  and then display the right image for it. And that is perfect and it works really well. It's a lot of extra work for quite a small percentage  of your, uh, readership, okay? Or your users.

So that's one way of doing it. And now I've got three versions, okay? If I hit export, now it export, what is this guy called? Get him under proper name. So I'm gonna give a new name. I'm gonna 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 this other version, and then there's giant version. Okay? You can see the sizes here, one's that 0.1 megabytes,  1.2, and then one jumps up to 0.7.

So quite large, so big, massive, even bigger, okay? And what happens is when you're building your website on the  other side, what I mean by the other side is in code, okay? It's not super hard to go through  and create meta queries to trigger these it  different screen sizes. Okay? It just says with my browser is looking at this at a  super retina screen check. If it is, then don't load this image, load this image, okay?

And yeah, it's a pain in the bum. Uh, but that's, that's how people get around it. And so yeah, that's how you deal with retina. Often you only do two versions, okay? You'll do, uh, a normal version  and then an at times two, okay? And just switch it out in code.

Now in saying that I don't, all I do is grab this guy  and make it 1.5 right in the middle  and I force everybody to look at the 1.5 version. And it 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 depends how you look at it. So you can go through all these images  and just upload them, okay? Drag them into here and have two versions, okay? So yeah, that, hopefully that helps you.

Another thing is people sometimes call it high DPI  and retina, they're the same thing. High DPI is what non apple people have to call it. Retina is a kind of a branded term from Apple. So if you're calling it retina, you're in trouble, okay? It has to be high DPI. Okay?

Because that's what they call the kind  of like high resolution, um, images. Now, one other thing, my little asterisk at the end here is  that, uh, it's 2017. I bet you in a couple of years if you're looking at this in  2019, you're probably be ing yourself going, geez, Dan,  bad, bad, bad stuff. Okay? Um, things might've progressed  and there might've been either a big adoption  of at times two or there might be just  some other way of doing it. Okay?

So this one is the one to 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, um,  is just leave it at times one. That's what everybody does and you won't be  hurt if you do that. It just might not look as good on some screens.

So just do one scale at the moment, all right? Verbal diarrhea over back to your videos.