Preparing and Optimizing Images For Your EverWeb Website

A picture paints a thousand words, so the expression goes. But if the images you’re using in your EverWeb made website drag down your page loading times you may not be telling your visitors anything at all. Slow page loading times inevitably make your visitors impatient and click elsewhere. So, how can you optimize your image files for your website so they are fast loading and still look great on the Internet? Here’s how…

Preparing Your Images
One of the keys things to remember is to try to optimize your images before you import them in to your EverWeb Project file. In this way all the hard work is done upfront and you won’t have to do work afterwards to fix any problems. If your page still loads slowly even with optimized images, you may just have too may images on the page, or the problem lies elsewhere within the page.

The Size of It…
Photos and images files can be large, very large! If you have images on our local hard disk you may not to notice this, but when such images are being downloaded to a browser window over the Internet, this is where things can slow down to a crawl.

The first thing to do, therefore, is to check the physical dimensions of the image as well as the size of the image file itself. This information will tell you whether you need to optimize your image. If the file size is large e.g. 500Kb or higher, you’ll probably want to optimize the image.

Optimizing for Retina Devices
We live in a world full of retina ready devices. ‘Retina Ready’ is Apple’s term for high quality displays that double the amount of pixels per inch than non-retina displays. Your images should be able to take advantage of this feature as you’ll have clearer looking images that load fast in a browser.

For example, say you have an image that is 3MB on disk, 2048 pixels wide with a resolution of 300 dots per inch. If I just have one image like this on my page, the page loading time might be a bit slower than I would like. If I have a page full of the same type of images, the problem will get a lot worse.

Slow page loading times also have other consequences such as a reduction in your website traffic, an adverse affect on your site’s SEO, and a pull on your web server’s resources.

To make an image retina ready first decide on how wide you want the image to be on the page in your website e.g. let’s make it 300 pixels wide which is a good width for mobiles and desktop devices.

You can use image editing software to scale the image to the size you want. Remember when doing so to set ‘Constrain Proportions’ on so that when you adjust the width of the image, the height adjusts proportionately. IN this example, the desired image size is 300 pixels wide so I’m going to make the size 600 pixels wide.

As the image is going to be used on retina devices, which has double the pixel density of non-retina devices, the image has to be sized accordingly. Hence the doubling of the actual pixel size that we wanted. This will ensure that the image displays correctly on all devices.

Once the image size has been set, the next target is the image’s resolution. In my example, it’s currently 600dpi. This is far too high for screen displays do aim instead for 72 dpi which is usually perfectly fine. You can adjust the value higher if needed. Reducing the image dimensions and resolution will also bring the size of the image file itself down.

When it comes to saving the file, save it as a new file so that you can keep the original image file in tact.

Using Your Image Editing Software
To make the changes we have just descried, you will use some form of image editing software. This can be as simple as using e.g. Apple’s Preview software or Microsoft’s Photos or Paint apps, or using your own image editor, such as Photoshop, Affinity or Pixelmator Pro. Most of these apps come with an ‘Export for Web’ option to help optimize your image when saving it. Furthermore, you should also look at the type of image you are working with e.g. if your image is in a PNG file format it’s going to take a lot more disk space than if it were in a JPG format. So, if possible, choose a web friendly file format to save your image in.

Using the Optimized Image
Once you have completed your optimization tasks, drag and drop your image on to your page in your EverWeb Project file. Resize the image on the page so that it is either half the size of the original or less. You can make these changes by resizing the image using the mouse, or through the Metrics Inspector.

Compressing Images
You may think that optimizing your images using the above steps is enough, but sometimes you can squeeze more optimization out of your image files! This is achieved by using image compression software which can strip out non-essential data from the image file. This gives you extra file size savings at little cost to image resolution. Check out your operating system’s App Store for image compression apps. There are many good free to use options available.

Use Caution When Editing Images
One important thing to look for when editing images in image editing apps is that sometimes the resulting edited file can balloon the size of the image file. In this case, check the image dimensions, resolution and save the file with your ‘Export for Web’ option in a JPG file format. The other option that you can try is to merge all of your edited images layers in to one layer before saving, but bear in mind the consequences of doing so.

Give Your Image File A Descriptive Name For Better SEO
It’s always a good idea to name your image files with a good descriptive name. Why? Well, it helps you more easily find your source files on your computer if the names are memorable and in the files will be easier to find in EverWeb’s Assets List. It’s also good for your SEO! It’s always better if you can to rename your image files before adding them in to your EverWeb project file. It’s more SEO efficient to do so. If you have already imported image files, you can still rename them in the Assets List if you need to.

Optimizing your images for better page loading speeds and for your SEO is worthwhile for both your site’s visitors and for your business!