VIDEO TRANSCRIPT:

EverWeb allows you to make a retina ready website. What this means is that users visiting your site on a retina device will be able to see your images in their highest form of quality.

To add retina images to your website, what you must do is have two versions of your image. The first version of the image will be retina image. This image will need to be twice the size of the second version of the image that will be paced on your site.

To illustrate, let's take a look at this example. I want to place this image on my site, and I want it to be 400 pixels  by 400 pixels. Right now, this image is 1000 pixels by 1000 pixels. The first thing I am going to do is scale this image down to 800 by 800. Why am I making it 800 by 800? Well, since I want the image to be 400 by 400 on my site, I am making the retina version of the image twice the size. Two times the size of 400 by 400 is 800 by 800.

So now that my image has been resized to it's retina ready size, I am going to export it. When I export this image, I am going to name it myimage@2x.jpg. It is very important that @2x is added to the end of the image's name, as this is how EverWeb will determine that this is a retina image.

Now I just need to export the image at it's regular size, which is 400 by 400. I will just resize the image to 400 by 400, and then export it. I am naming this image myimage.jpg

You will notice that these two images have the exact same name, but the retina version has @2x at the end of it. This is also a key step in the process. The regular image and the retina image must have the same file name in order for EverWeb to know that there is a regular image and a retina image for any given image that is added to your site.

When your images are ready, you can add them to your Assets list like you normally would. Whenever you want to use your image on your page. just add the regular image to the page, and when the site is published, any user viewing the site on a retina device will now see the retina image.