Lessons

Lesson Info

Working with Retina/High DPI Images

So something else that we can work with in Muse is working with what's called High DPI content, or retina content. And this is something that not all of us are gonna do, but it's something that if you need to have a site that is image heavy, okay, maybe you're a photographer or you're selling product and your product shots need to be, look really good, okay? They need to sell the product, essentially. You probably gonna wanna put imagery in there that's gonna work. That's gonna make it look it's best. So what we can do in Muse, is we can set up a site to be high DPI or retina, those are two interchangeable terms. I'll talk about that in just a second. But you're gonna wanna do this, kinda before you get started or after you build the site page layout, that type of thing, before you start adding imagery. You wanna turn this on, this is actually a site property. And then you're gonna make your images a certain way. We'll talk about that. Bring them in and Muse does all the heavy lifting ...

for you. So let's first of all talk about what high DPI is. I'm gonna switch over to my browser, and I've got a site open that'll hopefully clarify this a bit if you don't know. This is actually my website. And I've got a section in here that talks about high DPI or retina and what that is. Now these days we got a lot of devices and screens and things like that that have screens that are retina or high DPI. Now retina is an Apple marketing term. It pretty much means the same thing as high DPI. What we're talking about is a better looking screen. That's really simplistic way of saying it, but we're saying it actually has a higher pixel density. So instead of having, like, I don't know, 2 pixels per inch, this is, that's never going to happen but just as an example, instead of having two pixels per inch, if we have something like four pixels per inch, horizontally and vertically, we have four times as many pixels at the default for retina screen as a non-retina screen is called. So your images are gonna look much better on a retina screen if you set them up to be retina, okay? Now what does that mean? That means that our images need to have enough pixel data to work in Muse. Muse is actually gonna take the images that you give it, and not all of them, I'll talk about that, but most of the images you give it, raster images I'm talking about. It's gonna take them and it's gonna create two versions for you when you go to publish or preview, or whatever you're doing. It's going to create a version for non-retina and a version for retina. Our job, I'm gonna go over to Muse again and show you what I'm talking about. Is to add images at twice their scale that you're gonna use them, okay? The first step here is to turn it on, then we're gonna add our images and I'll go through the process. I'll show you how I do that, et cetera. I'm gonna go into the site here, it is a starting part, or starting site. If I go under file, when you first set up your website, you're gonna see what I'm about to show you. But if you've already set up your site and you wanna do this high DPI thing, you're gonna go to File, Site Properties. In the Site Properties dialog box you're gonna see right down here, we actually have the resolution. Now, by default, what this is gonna be set at is standard, okay? Standard just means if you take an image and put it in there, and I'm talking a raster image, I'm not talking SBG, illustrator, anything that's vector content because that's scalable. I'm talking something based on pixels. Raster images like images, jpegs for instance. If you put those in there, maybe a 200 by 200 pixel image, that's how big it's gonna be in Muse. If we go out here in this dialog box and we set these to be high DPI 2X. We're actually gonna put our raster images in there at twice the scale were gonna use them like I said. So we need to make sure, Muse is kinda checking itself. It's saying, "Are you sure you wanna do this?" Now the reason why we're getting this warning is because the images are probably gonna load a little slower, I'm gonna be honest, they're gonna be bigger, there's more pixel data. So you need to make sure this works for you, you can always turn it off later, it's a little harder to go back but, I'm gonna choose use high DPI, and click OK. Now we're ready to go. Now you wanna make sure, like I said, that when you do that you're doing it with pages that don't really have your raster content on them yet. And this is for the whole site, so let me open up the home page. And I'm gonna go out to my default desktop size here. Let me zoom out. And what I'm gonna do is I'm gonna put some pictures in here So let me open up a few of the pictures in PhotoShop. And show you what I do to them, to make them work in here. Alright, so in PhotoShop what I wanna do, is I am gonna open up a couple images here that I've got. And I've got my high DPI content. And I will open up this home image, actually, yeah, I'll open that one. Now in Muse, if I'm gonna use this particular raster image, at 300 pixels across, 300 pixels wide by 300 pixels tall, for instance. I wanna make sure that in PhotoShop, or whatever image application you're using to edit them, you wanna make it twice the pixel size. The pixel dimensions. So if I go to image size in PhotoShop, if you look out here. I have the width set at 1,000 pixels and the height set at 1,060. There we go, oh they're both set at 1060 sorry. That means that in Muse, when I place this image, it's gonna be cut in half. So it's gonna be 530, if I'm doing my math correctly. So once you make your images twice as big, and I'm talking pixel dimensions, width and height, twice the pixel density, twice the pixel numbers, you can then take them over to Muse. So that's what I'm gonna do. You're gonna see that this is, like I said, this is 1060, and we gone see what it looks like when I place it in Muse. Alright, back over in Muse, I'm gonna place an image. So I'm just using the command D, which is pretty typical. I'll go into my Assets here, and I'll grab that one home jpeg, you can see it's set to and I'll open it up. And then I'll click to place it. Now you can't really tell scale, looking at this, but if you look at the rulers up top, or if I go to the transform panel on the right you're actually gonna see the width and height are now set at 530 a piece. That's what's happening with our images. Our raster images. Now with SVG, illustrator, things like that, it's not really gonna work this way because we don't need to worry about high DPI retina with vector content. That stuff is infinitely scalable cause it's not based on pixels. Now in here, if I set this up this way you're gonna find that some images that you work with this way as far as high DPI some raster images. Things like full screen background images. Larger, much larger images like that that are set to be responsive full screen width, that type of thing. Muse, right now, really doesn't do much with those. It's not gonna make them high DPI, because the images we would have to use would be huge. They would be really big and such a slow load time. So what I'm gonna do is I'm gonna take this and I'm gonna put it out here. I'm gonna put a couple more images out here. So I'll just place a few more, just so we have the idea. I'll put, maybe just one more, let me put this one out here. I'll put this one in the background too. Something like that. Now if we want to, we could take this out and we could start looking at it. What's gonna happen is Muse, like I said, is gonna do all the heavy lifting. It's gonna take those really, those twice as big images that we had, ones that our width and height twice the dimensions. And it's gonna cut them in half for us on a non-retina screen, it's hard to tell, honestly sometimes, when you're looking at these. But if I go out to my browser, let me do that. And I'll show you what the preview's gonna look like. So by default, on a retina screen, it is going to preview the high DPI image content. Okay? Now it's hard to tell You're looking at it, you're saying "Okay. I'm trusting you that that is high DPI." Something that you can do, so that you can see this happen, as well as if you have maybe a site you're creating for a network that might be a little bit slower, okay? You might think people might be on the road and they're using Wi-Fi off some coffee shop or something like that. You can actually put a button in here that lets them toggle on and off high DPI. And if you do that, while you're testing it. You can maybe get an idea for how it works, or how it looks. So let me go back over to Muse. And in Muse, if you go to the widgets library panel, you'll actually see, in the buttons category, we have a high DPI on/off button. If I drag that out, I'm gonna set that out here somewhere like in a corner or something like that, what this button is gonna do, it's gonna allow you to trigger on and off high DPI. Now, if you put this button on your page, it's per page, right now, but if I put it on my page, it's going to be non high DPI or non retina for your screen, for when somebody views this in their browser, okay? No matter what device. They have to trigger it, or toggle it on to turn on retina, or to turn on high DPI. Now I can't do it right now, I've gotta preview it, and I'll show you that. So with the high DPI button in place, what I'm gonna do is go out to the browser, and check it out preview page and browser. If you look out there, if it detects that your screen is high DPI it's actually going to turn green. You can see the button right there, it is green. That means that it is on. It's using the higher resolution, or high retina images in place of the other ones, the non retina images. Now what your users can do is they can actually turn that on and off. By default it is actually off which means it's red. You can see the color right there. When you do this, it is not gonna, in every case, be readily apparent that it's doing anything, to be perfectly honest. If I go in and I look at it I'll have to do this 100 times for me to see it happen, but red is off. I click on it, it turns green. It's actually swapped out the lower res, non retina images and put in the higher res, retina images. So if you do that enough and take a look you're gonna see that it's actually gonna be crisper when the HD is on, okay? Now just to give you an idea, I mess with this a lot and I like to see how Muse does things in the back end. What I actually did, let me go back over to Muse. What I did was I took this file, or a file similar to this, and I actually published it, in the upper right corner, as HTML. So I actually saved it out as an HTML folder and files that I have on my desktop. And then I started looking at the code just to see how it worked. And I wanna give you an idea, cause this may help, kinda clarify it a little bit. If I go out to my desktop and take a look, I'll see here's the folder that I exported that Muse site to. This is what it created. It created a series of folders and content for me. I've got my index page. And here are all the images it generated. You're gonna see that, there is the home1.jpeg at 530 by pixel dimensions, and here is the home1 2X, this is the high DPI or retina version at double the pixel dimension, okay? Now if I go out here just to show you, I'm gonna open this up in PhotoShop and what I'm gonna do is I'm just gonna put a word on it. So when we switch it out, you'll actually see it happen. So I'm gonna go open this up in PhotoShop, I'm gonna put a little text on this, and I'll just type in "retina" that's the retina version. Okay? That way we can visually see it happen. Alright, I'll save that. I'm gonna make sure it actually is saved as the same format everything, same name. I'm gonna go back out to my folder, and what I'm gonna do is I'm gonna open up that index page in the browser, open that up, don't worry about that, it's running locally so it's doing some weird things, But you're gonna notice that HD button, this page looks a little different. There are more images on it, that's okay, it's the same concept. But if I click on that red HD button and swap it out, look what it does. So it's taking now, instead of that lower resolution, smaller image, it's swapping out the bigger one, the higher resolution image, when I go back and forth, or toggle back and forth. You don't need to do that. I just wanted to give you an idea of what's happening behind the scenes. It's actually using some fancy code back there to get that done. That means we don't have to do any of he heavy lifting, which I absolutely love. So as we work with our sites, if we need to go in and make sure our images look their best on retina or high DPI screens we can do that really easily. It's just a matter of, like I said before, turning it on, setting your images up to the right scaling twice what we're gonna use then, placing them in, having it do the work, Muse is gonna do all the work for us. We don't have to use that HD button if we don't want to unless you want people to be able to turn that on and off. It's gonna simply just detect in the browser when it needs to use the big ones or the small ones. And you've got yourself a high DPI site with beautiful images. So working with high DPI content, like I said, you can set your site up that way, if you want your images to be, to look amazing for retina screens, if you want them to work also for non retina screens but you need to be careful when doing this because the imagery that you put out here, the raster image content will be bigger in file size, and you are gonna be uploading, not you, but Muse will be uploading multiple images for each asset you have out here. So I just wanted to give you an idea of what working with high DPI was like and how to work with them.