Adding Retina Images to Your EverWeb Website


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.

2 Comments

Add a Comment

Your email address will not be published. Required fields are marked *