Optimizing Images for Your Website

Optimizing images for a website is much more important than you may think when it comes to getting and keeping visitors to your site.

There are a number of factors such as image file size, quality, and dimensions that play a part in the way that your website performs.

Image optimization can also help your website to rank higher on search engines and therefore boost your conversions in the long run.

With that said, the image optimization process can be confusing if you are unsure of what to do, which is why we are here to give you our top image optimization tips. You can reach more of your business goals by carrying out simple image optimization work on your site.

Which Factors Do I Need to Take Into Account for Image Optimization?

In order to optimize images, you may need to go into your website and edit the content that is already there. However, once your website is updated you can follow our steps to optimize images in the future before you upload them to save yourself time.

The main factors that should be taken into account when the time comes to optimize images for the web are:

• Image dimensions
• Image quality
• File format
• Image SEO

Optimizing images for the website doesn’t have to take up too much time, as long as you understand the basics and know how to avoid having your images negatively impact your website speed and performance.

Image Size & Dimensions

The first thing to take into account when it comes to optimizing your images for the web is the dimensions. The larger the size of the image in pixels, the larger the file size, which can decrease site speed and end up in visitors leaving your website.

Ensuring your images are not too large means that you can avoid a slower page speed. It is recommended that images are kept between 1500 and 2500 pixels wide, however, this will depend on the purpose of the image.

When it comes to uploading images to your website, it is a great idea to have them sized up correctly before placing them on the site, as this will save you time and mean that the page doesn’t have to resize or crop the image to fit a certain space.

For example, you may be uploading an image for a banner on your site that will be much longer in length and shorter in height.

Dimensions

There are a number of photo editing tools that you can use to ensure the dimensions of an image are correct before uploading.

Adobe Photoshop and Canva are two great examples of tools that will allow you to create images on particular canvas size.

You should be able to find the template sizes through your website’s provider, but if not, images are usually pretty similar site to site, so select a standard template for “header”, “thumbnail” or anything else you require.

Image Quality

When it comes to displaying images on your website, image quality can be a tricky compromise – a higher quality image will naturally be larger in file size and can therefore affect site speed.

However, images that are too small can appear blurry or pixelated on your website, which can appear unprofessional. The best way to get the best quality out of an image without slowing down page load times is to use an image compression tool.

An image compression tool is one that takes an image and resizes it, decreasing the file size while keeping as much of the quality as possible.

You can compress images on almost any photo editing tool, including Canva and Adobe Photoshop, which allows you to “save for web” which compresses your image.

If you are sending photographs or existing images to a graphic designer or web developer, ensure they are the original file so that they are the best quality possible. This is because when changing size, the image will automatically compress and have its quality compromised.

Image File Formats

An images file type for a website should either be a .jpeg format or a .png.

.Jpeg images use lossy compression to reduce file size when being saved, while .png images usually deliver a higher quality of image with a larger file size.

For smaller thumbnail and product images we highly recommend using .jpeg images as their small file size means that the difference in quality is less noticeable.

However, with larger images such as a website banner or image files in a gallery, .png images work best for quality.

Remember that you can compress images on photo and image editing software, so if using a .png format for your website, ensure the file size is no larger than 600KB.

Image Search Engine Optimization (SEO)

To optimize images for the web, ensuring you edit file names and alt tags is extremely important for search engine optimization.

Ranking higher on search engines such as Google will gain you a higher number of visitors, which in turn can help you to reach marketing goals and achieve business targets.

Although file size, file type and quality play a big role in the way your website performs, editing the file names and alt tags will take your website to the next level when it comes to image optimization.

Optimize Images with File Names

The filename of your image is much more important than you may think. While search engines crawl your website, they also crawl file names – which includes each one of your images. So uploading an image with the file name “04830.png” can disrupt your SEO efforts!

It is a good idea to go into your website and change the name of image files to include keywords that your customers are most likely to search to find your business.

For example, if you provide real estate services and have uploaded an image of a house, you may want to name the image file “House 65, Template Road”.

In order to optimize images effectively, keep file names short and simple so that they are easily understood by search engines. Any media files that you upload to your website should be named accordingly.

Image Optimization with Alt Tags

Alt tags are the ‘alternative text’ that displays when a webpage cannot load an image. However, alt tags can also be viewed when an image does display – so they are incredibly important.

Search engines will crawl alt tags from images so ensure you fill out all of the alt tags for existing images and new images that you add to your site.

A Shopify, Wix or WordPress site all allow you to edit alt tags when uploading images, so make sure you don’t forget to include short and precise keywords to help with image SEO. There are also plugins available from many website providers which remind you to add file names and alt tags to your images, such as an image SEO WordPress plugin.

Test Optimized Images and Page Load Times

Once you have followed our image optimization tips, you should test that the images load correctly, look okay on your website and do not noticeably impact the page load speed.

Many website hosting providers also allow you to view a page before publishing it, so try to check your quality images on a preview before publishing.

You should also check that all the images display properly on your published site after this. Once you optimize images for the web, put your website through a page load speed assessor, which will show you whether your website images are slowing your website down too much.

If they are, try compressing the photos further and saving them in different image formats, such as .jpeg if you used .png before. Editing images and file names can take a while but it is well worth it for successful image optimization.