How to optimise images for web

Images are possibly the most important feature of your website – they add visual flair and catch the audience’s attention. Imagine a website with no pictures, just text. A good website needs strong visual material, but it also needs to load quickly.

Images account for most of the bytes on websites and so, directly affect site performance and speed. According to HTTP archive, images make up 49% of websites in 2018 (videos account for 30% and the rest is scripts, fonts, stylesheets etc.).

Google has admitted that site speed affects rankings and images can often be the cause of a slow site. Files that are too big take a long time to load, so you need to optimise your images for web – making them small enough to load fast but still keeping a high enough quality.

We’ll talk about the easiest way to optimise images for web and then go through a few other optimisation tricks that you may want to use if your site is image-heavy.

High-quality, small file size

The first step for optimising your images for the web is to take your selected picture and open it in an image editing programme, whether it’s Adobe Photoshop or a free online image processor, such as PIXLR.

Ideally, you want to start with a large image so that you don’t lose too much quality when your resize and compress it. Having a small picture means that there are fewer pixels to work with, so resizing it often affects the quality quite badly.

So, resize your image to the dimensions stipulated by your website (if you don’t know them, a good standard size is 1080 pixels by 720 pixels). Some sliders, galleries and in-text images have different dimensions so you want to resize your picture to the closest possible measurements.

To do this in Photoshop, select ‘Image’ at the top of the screen, then go down to ‘Image Size’. This will bring up a small window where you can change the dimensions to 1080 by 720. Make sure that the measurement is set to pixels, not centimetres or inches.

Next, make sure that the image resolution is 72 pixels per inch (ppi) – this is the optimum resolution for displaying images on a screen. The standard resolution from a camera is 300ppi, which is optimal for printing.

Once you’ve resized and changed the resolution of your image, you can save it for web. Photoshop has a special ‘Save for Web’ option, and a few of the online image processing tools do too. Use this option if it’s available, it lets you set the compression manually.

To do this, simply make your image quality anything between 70% and 80%. This makes the file size smaller without affecting the quality too much. You can see the file size under the image preview in Photoshop.

Some websites only allow images of certain file sizes, and you can play with the image quality slider to get as close to that file size as possible. Ensure that your image is in JPEG or PNG format, then click ‘Save’ and you’re good to go.

Knowing the different file types

Do you know what the difference is between a JPEG, PNG and GIF? To make the best decision, you need to be familiar with the different web file types for images. You need to know which one will give you the most quality for the least space.

JPEG (Joint Photographic Experts Group) – JPEG is the go-to file type for most photos because they can show a large range of colours. With JPEGs, changing the file size directly affects the quality of the image; the smaller the picture, the smaller the file size. They have a slightly lower quality than PNG images, but have smaller file sizes when saving.
PNG (Portable Network Graphics) – This is a relatively new file type with good image quality. PNGs come in two formats; PNG-8 (smaller file size with a limited range of colours) and PNG-24 (high-quality with a massive range of colours). When quality is more important than file size, use PNG.
GIF (Graphic Interchange Format) – Everyone loves a GIF. Those animated moving images have become a great way to express yourself. GIFs are compressed versions of videos that only allow up to 256 colours. They are great for animations as they have a smaller file size than short videos, but they aren’t the best option for still images as the limited colour range can be quite obvious. They can work well for logos or simple images with only a few colours.

If you have vibrant and colourful images, stick with JPEG, if you want simple but detailed images, use PNG. For any animations or tiny thumbnails, use GIF. JPEG is the most versatile option as it offers a great balance between quality and file size, which is why it’s the most common file type.

Proper naming of your image files

Most people overlook the naming of images, but this is actually an important SEO feature. Search engines look at image names when crawling your site, so it’s important to name them properly. Having “Image 001” as a name won’t improve your web ranking or SEO, whereas “silver-running-shoes” is far more suitable.

Name your images in a descriptive manner, using keywords, so that search engines can get an idea of what’s on your site. If a user does an image search that contains your keywords, your image will feature in their search results.

Some websites (such as WordPress) have a space to input ‘alt tags’. These are descriptions given to an image in your website code, and if your images don’t download, the alt tags describe to search engines what is in the image.

Alt tags are another important SEO feature and can help visually-impaired internet users to know what images are on your site as their screen readers can read the alt description. Alt tags should be short and sharp descriptions, there is no need to go into too much detail.

Create a sitemap so Google can find your images

According to Google, a sitemap is a file where you can list all the pages of your website that tells search engines how your content is organised. You should include your images, videos, GIFs and infographics in your sitemap so that search engine crawlers can find them easily.

This map of your website lists all your content so that search engines can systematically log your website. Within your sitemap, include titles, descriptions, captions, licenses and URL locations for your photo and video files.

If your website is visual content-heavy, then create a separate sitemap for each of the different types of content. Sites such as WordPress and Wix will automatically add your images and videos to a sitemap.

To wrap up, websites that have a lot of visual content should be optimising their images for web for a number of reasons. It makes the website faster as the images have smaller file sizes, without losing quality.

Optimising also allows you to choose the right file type for the job, whether it’s JPEG, PNG or GIF. It forces you to rename your files in an SEO-friendly way, which will improve your website rankings and the chances of searchers seeing your content.

You also want to include proper captions, descriptions and alt tags so that visually-impaired visitors can still get an idea of what content you have on your site. You can do further optimisations by creating a comprehensive sitemap.

All of these tricks will improve your website performance, search engine ranking and user experience.

___

Discover the latest trends and tips that shape an ever-evolving digital world.

___

Mobimeme offers content marketing, SEO, analytics, social media management and expert direction in the digital sphere. Building and growing an online audience for your business is what we do best. Get in touch with us to find out more about our package offerings and how you can improve your website and following.

___