Why optimize your Images on your Website?

/ Blog

The larger your images are, the longer the page takes to load. A slow page speed has a negative impact on the user experience and, and this is increasingly becoming a decisive ranking factor. Especially on mobile, many large images can cause visitors to leave your page before it has finished loading. Images are usually the first and most effective starting point to optimize the loading time of your website.

With these tools you can compress images and reduce the file size
The best known and most important program to compress and edit images is Adobe Photoshop. (Commercial)
Here you can simply reduce the image size by selecting Image>Image Size.

Alternatively, there are also cheaper or free tools with which you can compress images:

For normal website images you should keep a maximum image size of 200 KB, for this you have to compress images and choose wisely.

Especially Real Estate Websites have the Issue with wanting to display high quality Images of their Properties but at the same time trying not to slow down the loading of the Website. This is where the right optimization of the Property Images plays a vital Role.

In addition, other properties should be adjusted when optimizing images:

    • Brightness/ Contrast
    • Skewed images should be straightened

While these are not necessarily SEO related, they will still be appreciated by your Website Visitors.
Occasionally also stains and impurities should be removed (image errors or e.g. cracks on a street, stains on a house wall, etc.)

In the next step, the color and shape of the images must be adjusted using CSS. Here are for example the following factors:

  • Color contour/ shadow
  • Shape round edges or completely round
  • CSS adjustment of mouseover for desired large views

Optimize images for responsive websites

In order for images to be displayed optimally on mobile devices, they must be adapted correctly beforehand.

  • smaller display
  • another image (same motive) but mobile as landscape format (desktop is e.g. portrait format)
  • adjust spacing of gallery images

Further Reading