Many unaware website and online shop owners add images to a website without first optimising them. Over time, the effects of such actions begin to have a negative impact on website performance. Below, we suggest how to prepare photos for a website so that they have a positive impact on its performance.
1 Image format matters
Until recently, the two recommended image formats for websites were JPG and PNG.
The principle to follow when choosing one was:
JPG for photos and PNG for graphics
Currently, the formats mentioned above are not the best choice for image files for websites.
Instead, it is suggested that photos be posted online using the format WebP.
If we have already added images to the site in PNG or JPG format and have a site on WordPress, we can use the plugs change the file format to WebP.
As you can read on Google's official website, images saved in WebP have a weight of 26% less than those saved in PNG format and 25% - 34% less than those saved in JPEG format.
With a large number of graif files on a page, these numbers significantly affect the performance of the site. There is, however, an inconvenience associated with the WebP format. Namely, older versions of the Mozilla Firefox browser do not support it, so users using these versions of Firefox may have problems displaying the images.
Speaking of preparing images for the website, it is still important to remember that for animation, the GIF format, which is enjoying renewed popularity after years of disfavour, may be a good choice.
In the case of animations, the addition of images in GIF format will sometimes be an appropriate choice.
In the case of icons or logos, we can include graphic elements in SVG format.
2 Do not forget the dimensions of the image files
By dimension, we mean the actual width and height of the image expressed in pixels.
We should not add wider images than we need. The point is that every image on a page has a certain maximum width in which it can be displayed.
This means that if the maximum width of an image on a page is 1920 px, it makes no sense to upload an image with a width greater than this value. Unfortunately, it is common for users to upload graphic images with a width of 5000 px, which is completely unjustified.
Changing the dimensions of a photo can even be done in Paints. Of course, it is better to do the overall optimisation with more advanced programmes, such as PhotoShop, or the free GIMP.
If you run an online shop and want to upload product images, the width to height ratio should be equal. Square product photos are common dimensions. And most importantly, images in these dimensions look correct on both computer monitors and smartphone displays.
Important note: It is a good idea to save the reduced images as a new file. You may find that the original size images are useful in some other way.
3 Photos must not weigh too much
The size of images is a very important element of image files on the internet. It is common for web developers to receive images from a graphic designer that sometimes weigh over 3 mb.
This file size is far too much.
We suggest sticking to the principle: The photo should not weigh more than 1 mb.
As regards the resizing of image files, the following can be used here Photoshop, or GIMP.
In addition, there are special browser applications that allow you to compress image files.
An example of such web-based software is Tinypng.
4 Optimise photos for SEO
We must bear in mind that the Google robots that scan our site also look at the HTML code, which also includes our images.
Here, two parameters are important. The name of the file itself and the alt attribute settings.
In the HTML code of the page, images are tagged with img tags.
In this case, the photo shows a woman in an office working at a computer, so the name was created to correspond to the content of the photo.
The same applies to the alt attribute. In the example above, both name and alt are identical. But this is not a problem. The important thing is that they match the content of the image.
It should also be borne in mind that alt attribute is the perfect place to put your keyword.
It is also common for those preparing images for the website to wonder whether they should use Polish characters.
If we are talking about file names, this should not be done. If we are talking about alt attributes, then as much as possible Polish characters are welcome here.
The correct name and value of the alt attribute are important for another reason. They give our images a chance to appear in the Google Graphics — This is important because not a few people at all, search Google's graphic resources.
The importance of optimising images for SEO was demonstrated by one of the agency's clients 4AD Studio, for whom we created an online shop. Thanks to the correct optimisation of the graphics, the shop's images appeared high in the Google Graphics search results, and this translated into a lot of traffic to the shop coming from Google's graphical search results.
If you want to know more about optimising content on your website, it is worth consulting the topic of copywriter, which deals with the creation of texts optimised for Google search.
How to prepare photos for the website: a summary
In summary, the optimisation of images for a website is an important element affecting its performance. It is a good idea to prepare image files before uploading them to the server. This saves a considerable amount of time and also avoids a situation in which Google's robots will rank your website low due to unoptimised images.
