EverWeb Logo


Retina Ready Images

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.

The old way of making your website retina ready was to add two versions of your image to your website. With a recent EverWeb update, you no longer need to add two images to your site, and in this tutorial I will show you how to make your website images retina ready.

This tutorial is strictly going to cover placing images directly on your web page. In other words, for adding images in other ways, such as with an image gallery or image slider, please refer to those tutorials.

To begin, I want to create a sample scenario. Let’s assume I have a bunch of photos that I just took with my iPhone and want to put them on my website. This photo in particular is over 3MB and is 2048 pixels wide. If I wanted to add all of these photos to one of my pages, that’s going to be almost 40MB that each user needs to download when they visit my page. The page will load very slowly, which users, and search engines do not like. It will also eat up a lot of unnecessary resources on your web server.

So what can you do to ensure your website loads efficiently while still providing a nice looking image.

So let’s say I want to place this image on my site, and I want it to be 400 pixels in width. Right now, this image is 2048 pixels wide. Since I want it to be 400 pixels on my page, I am going to resize the width to 800 pixels. The height should automatically adjust as well. Why am I making it 800 pixels wide? Well, since I want the image to appear in retina quality, I am making it twice the size.

So now that my image has been resized to it's retina ready size, I am going to export it.

My image is already a JPG, but if yours is a PNG, you might be able to save a significant amount of file size by exporting as a JPG.

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 image to the page, and resize it so that it is equal to, or less than half the original size. So I know that my original image is 800 pixels wide, so I will just ensure that its width is 400 pixels or less. Doing this will ensure that it displays the retina version for users viewing on a retina device.