Mac SEO Blog

The expression “a picture is worth a thousand words” is truer today than ever before. Adding the right images to your EverWeb made website can save you time and effort that would be used on crafting text that perhaps, is unnecessary. When you have found the images that you want to use, adding them to your EverWeb website project, is easy, but before you do, there are some important things you may want to check first. Here are some recommendations for preparing your image before you import them in to EverWeb.

Optimizing Image Size

When choosing images to display in your website, always check to see if any of them should be optimized before adding them to your project file. Properly optimized images will display properly on screen and will avoid problems such as dragging on the page’s loading speed in the browser. As most display devices today are ‘retina ready’, i.e. can display high quality, high definition images, you can easily create retina ready images for your site.

Optimized images are those that are of the smallest file size possible, but in the highest quality possible. For example, you may have a photo file that you want to use that is 16MB in size, 4096 pixels wide and has a resolution of 600 dots per inch. This would be a large file to load on a page, and if I had many image files that had the same type of attributes, my page load time would seriously drag. Additionally, the consequence of using such large files would impact your website traffic, your SEO and your website’s server resources. 

The first step to optimizing the image is to decide how to scale the image width. In our example, the original width is 4096 pixels. To display this on my website I can reduce the width down to 400 pixels wide. However, as most displays today are retina image, I will make he image 800 pixels wide instead.

Use an image editor, such as Apple’s Preview app on a Mac, or just open the image file in Windows, to adjust the image’s dimensions. When changing the width dimension from 4096 to 800 pixels, remember to check the image editor’s ‘constrain proportions’ option. This will keep the image height in proportion to the image width during the resizing. 

In our example, the image is scaled down to 800 pixels wide, and not 400 pixels wide. This is so that it will appear properly on retina quality devices. 

Optimizing Image Resolution

Reducing image dimensions can bring down the size of the image file considerably. In addition to this, you can also check the image resolution. In our example, the resolution is set as 600 which is overkill when displaying an image on screen. Typically, this resolution would be used if you were printing the image. So, we can reduce the image resolution from 600 dpi (dots per inch) to, for example, 72 dpi or 144 dpi, which should be more than adequate for displaying the image on your website.

If you are using image editing software, see if the software has an ‘Export for Web’ option. This will optimize the image file when you save it. Remember to save the changed photo as a new file so you do not overwrite your original file as you may need it later.

When saving your changes, you can reduce its file size further if the image is in a PNG file format by saving it as JPG format instead. PNG files are useful if you want to preserve a transparent background, but if this is not necessary then a JPG file type will be preferable for display on the web. 

When you use you image on your page in EverWeb. resize it so that it is equal to, or less than, half the original saved size.

Use Image Optimisation Software

Use image optimization apps to further reduce the file size of your images. Many image optimization apps strip away non-essential data from the file without noticeable degradation in image quality. Obviously use such software before importing the image file in to EverWeb.

Using Edited Photos

Image editing software can be very advantageous for enhancing an original image file. When editing such your image, the end result can be a much larger file. Remember to check the file size of an edited file before importing it in to EverWeb. As we mentioned previously, check to see if your app has an ‘Export to Web’ option. 

Naming Your Image Files

Giving your image files good descriptive names has advantages. First, they will be easier to locate on your computer or in the cloud. Properly named files will also make it easier for you to find them in EverWeb’s Assets List.In addition, a descriptive file name will benefit your website’s SEO. Where possible name, or rename your image files importing them in to EverWeb. This will maximize your SEO. If you have already imported your images in to EverWeb, you can still rename them in the Assets List. Just double click on the file name in the Assets List to do so. Doing this will still be of benefit to your SEO although renaming the image file before importing it in to EverWeb is more efficient and effective.

Time To Publish…

When you come to publish your site, you can further optimize your images using the project file’s Site Publishing Settings. To access these features, either click on the project file name in the Web Page List or use the File-> Edit Publishing Settings option. Check the option ‘Export Optimized Images’. This will further optimize your project file images but requires EverWeb 4.1 or later.

You can also improve your page loading times when using images, but selecting an image on your page, then using the Shape Options-> Fill -> Lazy Loading option.

Optimizing image for the web is an important consideration when you use images in your website! Make sure that you do your best to make your images lean for the web!

If you have any questions about this post, or anything EverWeb, please let us know in the Comments below!