Lessons

Lesson Info

HiDPI Images

I want to talk a little bit about a high d p I okay or retinal images? I'm not going to go crazy with ease because this can take up a lot of time can take up a ton of time, but I want to discuss what these are and what we're trying to achieve with them. Okay, um back in the day ah, phew versions of iphone ago, okay? Or I ii device. I should say apple actually came up with the term well, they use the term retina t to define a type of display or how it displays content. There are a lot of different sites we can go to that I want to show you guys and if I take a look here's one of them, this is apples. Apelike kam, this is a length it's in the pdf of links that you've got and if I look out here, you're going to see that just searching through the mac book pro websites. If you're looking at a mac book pro to buy it, you're going to see is going to tell you it's a retina display now they're trying to give you this is kind of cool, they're trying to give you an idea of what our retina displa...

y is. If you take a look, I mean, I just kind of move this down here, a retina display, the way we look at it is we just think of it is it looks better usually okay? Right on display has mohr pixels per square inch, typically where packs more in an inch than a typical display. Now we say retina and that's typically an apple term, but there are other devices out there we can use obviously a lot more, and we typically will use the term high d p I. So heidi p I's, another term it's, more generic that talks about high dots, prints or high resolution you're going to find that some devices actually have a lot and I've got this this website this is also once again in the links pdf and this is actually what's called a device pixel density test it's a little bit geeky, okay, but you're going to see this right here you're going to usually see some kind of number like one point oh or something to that effect. If you look at let's, say on a typical mac book that's a couple years old, it doesn't have a retina france that a retina display or device it doesn't have right now and you go to this website it's going to show you what display you have essentially so in this case it's one point oh which essentially means like you know seventy two peop e I or ninety six p p I and that's that's it that's what we got if I were to go look at this on a retina display this could say something like two point oh are double the pixel density doubled the numbers of pixels or three point oh or one point five it depends on the device itself it's pretty crazy actually also there is a chart here and this is once again in that pdf reference you could take a look at this talks about resolution and what each device that's out there the resolution of that device so as we go on further and further we're going to start to seymour devices that are heidi p ay they have mohr resolution per inch okay and like I said before if you're going to create something like an image and let's suppose that I want to create and let me get over to the board here just to show you this to make it a little bit easier to see I want to create an image that is a certain size but it actually works on retina and regular for instance thie idea here is it when I go in to this quick when I go in to take a look at something if I if I look out on a regular screen and non high d p I device for instance if I have an image that is I wanted to be two hundred pixels wide so two hundred pixels wide for instance if for regular old devices not retina not heidi p I that's awesome it's just going to display a two hundred pixels wide each pixel is gonna map to the screen etcetera if we take and we want to make what's called a retina image or a high d p I image one that's going to be roughly the same size but look awesome on a retina discreet a screener display we essentially are going to make an image that is and I'm not doing this justice that has basically double the pixel density or has twice the amount of pixels in the same area there's a couple ways you can do this and photo shop if you want to for instance if you want to create your regular images versus your retina images the retina damage is basically double the pixel dimensions okay we can also do something like this you can in photo shop say that this one is seventy two peopie eye and weaken basically just double that in one hundred forty four I think that's double so I'll say one hundred forty four pp I like math so that's that so you cannot if you're setting up in footie shop you could set up your image is one hundred forty four p p I the same size two hundred pixels or seventy two people die these will be for regular these would be four right now okay is very generic this is actually retina at just two times or two acts if you will now there are other devices like I said that our three x some one point five but really lawyers don't care about those yet okay just because there are it would make your head spin and explode okay that's kind of the idea. So as far as working with retina and heidi p I there is one last sight that you could take a look at these are actually the guidelines this is kind of need its going to also show you whether or not this is on the pdf links it's going to show you whether or not something is retinas faras iowa's his concerns is going to show you that which is kind of needs so should you just little green eye and says its retina it's not retina so if you go make an image that's just a regular old image like the two hundred pixels wide seventy two p p I it's going to look not so great on a retina display okay or high d p I said display so a lot of this disease are trying to find out do we care about heidi p I do we want to make it soar sites work that way and look better okay, if the answer is yes, then you're gonna be doing more work that's the whole the whole crux here. Now you can do a lot of this yourself, but with wordpress we can of course we have a plug in that we can work with, okay? And I want to I want to come in this just this a little bit and just talk about how it works and what happens here if you're if you're still unclear about retina heidi p I kind of what this means there are some some links to articles in that pdf you go take a look at there's, a smashing magazine article called towards a retina web and it's it's getting a little bit older and I say it's from two thousand twelve but on the web, that was like an eternity ago, so just take a look at it. It's good information it talks about retina, which refers to iowa. So first apple, um you'll actually see that there are a ton of plug ins out there that we can work with, that we can use one of the plug ins that I like you take a look here is this one here complex compulsions dot com it's, a retina image plugging that basically says that you just feed it the image, the original image that's, bigger and it will basically go out and let you generate. You can generate the larger images, if you will or the smaller images depending what you're doing and it just lets you plug this in and work with it and it just swaps out it's actually going to swap out the images depending on if it's heidi p I or if it's not so it's getting once again with this kind of situation in some cases, we're gonna be using multiple sets of images. Ok, this one's really good? I actually I created a site with this. I set it up it's a little trickier, to be honest, and I'm not going to go through this one because you actually have to go in and edit your ht access file and a bunch of other things it's it's using cookies and some people that they build websites, you know don't want to use cookies, and I understand that. So when you do look for a plug in or you do look for a solution to use, this is solution that I used and I had to plug each thing in this is not a plug in uh, but it relied on cookies, and it also made me go out and actually do some things on the server itself, which was not that hard once you understand how to do it there are a lot of other things out there that you can work with another great plug in you can work with is called responsive images as a wordpress plug in this one elf oh too is when there's a pretty good job it uses what's called picture filled tube able to swap out the images so it's going to generate the images for you it's also going just then when it gets to the browser and decides hey I'm retina where I'm not ready it's going to use the correct image depending on where it wants to go okay um I'm going to show you an example of ah plugging that I've used in the past so let me go back over to the site and get over to the plug ins area it's only gonna plug ins and you're going to find it one of the plug ins a lot of people are actually using he's actually a retina plugging only show you guys this one so I go to add new plug in and go to search plug ins you're going to see this one's actually call I've got it written down here w p retina w p retina to x and we'll see if I get this right I'll type it in you can usually just type in rattana and it will find it so a lot of us are still calling it right now even though it's more high d p I so retina itself bp reading to x this plug in pretty widely used a lot of people use it for their their wordpress installs and what it's doing is it's using some things that a lot of us are going to use anyway. Okay, I like it because if you look this guy's on it last updated twenty hours ago, I mean, I'm gonna go to more details and take a look at it and you'll see that it actually allows you to pick from different solutions that a lot of us are going to use today, like picture phil or polly match or these different things that maybe you've never heard of maybe, you know well, I don't know, but for me to stand up here and trying to say, you're going to have to copy this code here, there and everywhere else there's a plug in for it, why not use that? You know what I mean? So w you read that right into two x is a good one it's gonna allow us to kind of do it pretty quickly if I go to installation and just take a look it's going to tell us what to do there is a tutorial quickly we can use I'm just getting stole it so I'm gonna go to install now it's gonna do it for me here we go I will activate the plug in and if I take a look out there, what kind of scroll down a little bit to take a look? You'll see. There it is. W p retina two x right there. This plugin doesn't require a lot. It really doesn't, and you have to actually be careful if you're using this one and other responsive image plug ins because they may actually conflict. Okay, this one does a lot does a lot, but it's it's mainly geared towards hide e p I a retina. I'm going to take a look and see some of the things here. Now I'll go over teo settings here on the left, and we'll find the plug in setting, so I go to w p retina two x when they click on that and you're going to see that it's going to go in and say, all right, well, what kind of size is you want to work with? When we work with wordpress themes? We are typically going to set up a few sizes, there's a few sizes generated by default. So when you upload a file an image file, for instance, to the media up loader, okay, you put it in there were impressed a lot of times going to generate a couple different sizes for you that you can use you could pick it when you go to put it into one your posts or pages you could say, like full size, you know, thumbnail, etcetera, this is going to blow it out. This is going to do a lot of different sizes and these air sizes that I already have because of other plug ins as well. But if I realised that somebody's just I don't need I can actually turn them off. If I realize I'm not going to have images that small, maybe because it's going to make a lot of pictures, you're going to see that I can tell it to generate these images automatically now, it's also going to create an at two x or a double pixel density size of each one of these images when we tell it to do it. Okay, that's pretty crazy, you can say generate retina images automatically when in images uploaded, and it'll do it for you as soon as you go through the media up loader that's something that I tend to do, but it's in this case is going to spend a lot of image sizes, so you've got to be careful with that. Sometimes I'll just limit until it don't be so big don't make so many big ones the last thing here is the advance. You're going to see right here these are the different methods that we can use and if you're if you're going in and you're trying to do a lot of the stuff yourself you can go any kind of set some of these and figure out which solution is right picture phil is the most widely used so that's what we're going to probably stick with so I'll stick with picture phil it's going to go out and basically on the fly do it's called source set it's going tell the html or tell it to set a different source for the image depending on what it detects so if it sees a high d p I am eh? Or ah display it's going to set it to a different image shores and it's gonna load that one okay so that's called source set using a couple different things to get that to happen it is it a job a script polly phil it's called but we don't care about that right now. You can then go in and kind of set some different things here and say, you know, if we do this we can do that I love the fact that you can actually tell it um the client will always be served retina images so you can actually make it so they log in and they're in admin for instance they always see retina which could be good for just previewing you can also azad been make it so you always see right now, which is kind of interesting and then just some other things there I like this, uh, they have a fat an option here not to deliver it to mobile devices. If you decide that, you know, you don't want to do that, maybe it's file size limiting you khun, you can say, don't do it, okay? And I could just save changes and I got what I've got, okay? All right. Now, the great thing about this, too is that I'm going to use if I go to my plug ins again, take a look at my plug ins again, we actually had to regenerate thumbnails we're going to use that again, okay, so that's typically how we're going to get it done. But in this case, with this plug in, if I go to media here, you're going to see w p retina to x and actually puts another another option in there for the media. So if I click and take a look, you'll see that anything out here that upload is going to be showing and let me click on all here, you can see all the images, what we can do right now is depending on the image size I can now go in and say let's actually generate so it's going to go through kind of like that generate thumbnail saying that we had I'm gonna click on generate it's going to take a little while here it's goingto make all these pictures get it going and after a little while you're going to say it's only one of ten right now it's a ten percent so it's going to kind of get it done but if I scroll down, let me show you see if you can get it to go here okay, there we go as it starts to finish it's going to show these little green check marks to say ok, we made all those pictures you're gonna notice for this plug in especially that if you don't have it if you an image that's not big enough and it decides that it can't make the image bigger because it's gonna look like garbage, you'll actually see yellow yield sign and it's going to say we can't make a rat an image of that or a larger image for that it's going to lead you down the path of saying that a lot of times what we're going to do is we're gonna upload a larger images we're going to get pretty big images they're going to find uploading here and we just when we put these into our posts or pages were going to tell it to load the smaller versions if we can help it okay the last step here to get this done is we just simply go into our post and add the pit and the images themselves you're just going to do that's or pages. So if I go over to my page here it's not going to generate them yet and they're not quite done and let's say we goto about us for instance, one of my pages, I'll go to my visual editor and you going to see jim right here? What I could do is if I want an insert, an image basically just added the media and it's going to do its work it's gonna work it's magic. I don't have to do anything else, which is pretty cool. So you gotta add media. Go at jim if I want to. Now, jim, these images air not having been regenerated yet so it's not gonna work for this one, it would go inserting the page or post I can say let's align it, do my thing once I update and go take a look at it sources he's getting source said all of this stuff that it's going to do is gonna kick in. And if you guys take a look at it depending on high d p I or not it's going to show you the correct image, which is pretty amazing one of the things that I tend to do is I tend to just do a quick test to look at it on a device that actually is heidi p I r is retina and if it's out there on the web you can already just go to the oral and take a look at it otherwise what we can do is a couple ways to get this done I could actually use ah couple of from methods for showing this if you're on a mac on the pdf if you guys take a look at the links there's actually a a little mac plugging you can use which is kind of need this one is called I believe it's called ios design you could actually use this little plug in and it's on the list if you take a look of pdf of the pdf list of links and you go take a look at it and just install it and it lets you actually if you don't have a written device you can fake it and it'll automatically once you refresh the page it will show you the high bp I images just for testing purposes there's a pretty cool little app that you can just install so all right, so as far as working with with retina and kind of moving in that direction these are some of the things we're gonna have to do we're gonna have to generate images use a plug in or try and get all this stuff to work ourselves using the java script, etcetera. But that one's a pretty good when the retina js.