Size Does Matter: What you need to know about Website Image Sizes

/ Blog

The perfect image sizes for your website - in 4 steps

Pictures belong on a website, just like your SEO enhanced text. They show
  • who you are
  • liven up your website
  • convey feelings and emotions and
  • depict what you offer.
No other medium can fully attract attention in such a short time. Text is important for Google and all other search engines. However, unlike images, texts demand a high level of concentration and time from the reader. The trend towards ever more and ever larger images can be observed on many websites. But images that are too large have a fundamental disadvantage – they need space on your server. And lead to poor loading time for your website.
Important: Page speed has been a ranking factor for Google since 2022. You can measure your website speed here https://pagespeed.web.dev/ and improve it with optimized images and other tips. After optimization, you will immediately achieve clear results and your readers will have a better user experience.
In this article, you will learn how you should treat your website images so that you can utilize all the benefits, they continue to look good and do not affect the loading time of your website.

Creating images for websites correctly – the basics

When editing your images, the following parameters all play a role:
  • Image format = how the image is saved: JPG, PNG, GIF, SVG, WebP
  • Image size = width and height of the image in pixels, such as 400×300 px
  • File size = storage size in kilobytes (KB) and megabytes (MB)

Step 1 Choose the right format for your images?

Firstly, think about where you want to use the image. Many designers use JPG. It is most suitable if the color consistency and size of your image is very important to you and compression is of little interest. The PNG image format, on the other hand, tends to be used for images where size is irrelevant. PNGs can be compressed relatively lossless, which is why they are often used for graphics, icons and logos. This image format is ideal for cropped, transparent backgrounds. SVG, a vector graphic, is the first choice when it comes to logos or graphics. With SVG (Scalable Vector Graphics), images can be zoomed without loss. However, this image format is not suitable for WordPress without a third party plugin, such as WP SVG Images or SVG Support. WebP WebP supports transparency, making it perfect for logos, icons, and other graphics that require a transparent background.WebP provides file sizes that are 25-35% smaller than JPEG for the same level of quality. GIFs are enjoying a revival on some social media platforms such as LinkedIn. But they are also a popular tool on WhatsApp. Your images and graphics are animated and become moving images.

Step 2 The right file size for your images – how many KB can an image have?

You should always keep the following three tips on file size in mind: Large, full-width images should be a maximum of 130-250 KB in size. Small images should be around 50 KB. For icons, remember the 10 KB limit. If you follow these guidelines, you are on the right track in terms of page speed.

Check the image sizes

Why are image sizes so important on the web? A little golden rule first: The more pixels an image has, the larger the image file that is downloaded to the website visitor’s device. Many websites, such as online shops or real estate websites, use a lot of photos. This means a lot of data has to be downloaded, so website images have to be resized. The motto here is that less is more.

The most common image sizes for use on websites are

 
  • 800x600px (4:3 format)
  • 1024x768px (4:3 format)
  • 1280x720px (16:9 format) HD
  • 1920x1080px (16:9 format) Full-HD
Photos with a width of 1920 pixels and more, i.e. the full HD format, should only be used as header images. They are used across the full width of the screen and must therefore be high-resolution. To further reduce the file size of these images, they could be changed to the new webP format.

Another Tip:

  • If the image does NOT need to be enlarged, and is next to a text (for example in a left or right sidebar), an image size of 200 to 300 pixels is recommended and sufficient.
  • If the image is to be enlarged by clicking on it, you should select a width of between 600 and 2000 pixels.
  • For a free-standing image that is to be displayed across the entire width of the website, choose between 600 and 2000 pixels.

Step 3 Image quality

Before uploading, make sure that your images are not blurred or distorted, as making images better is usually only possible with expensive products. Choose your images carefully so that you don’t have to accept any further loss of quality when editing the images for your website. As a Rule you should optimize your Images OFFLINE, before you upload them to your Website, both in terms of kb (storage size) and px (image size). Because even if you smile beautifully, it doesn’t help if your hand is blurred by a movement. Your site visitors will immediately notice it negatively and will buy elsewhere. Unfortunately, as mentioned above, compressing bad images doesn’t make them any better and only makes sense to a certain extent. You’ve probably already tried it, failed and ended up on this page as a result. You can best check the quality of your image in the size in which you will later integrate it into your website. So enlarge or reduce them as much as possible. This will give you the right feel for the optimum image size and will make it much easier for you in future.

Step 4 Now it’s time to optimize for the internet

Various paid and free graphics programs such as Adobe Photoshop, Canva or Microsoft Paint are suitable for optimizing images. For offline optimization i often use Irfanview with free Plugins. The easiest and most effective way is to reduce the resolution, i.e. the number of pixels the image has horizontally and vertically. Many pixels are not worth it, as very few users have high-resolution screens and Google’s motto is mobile first.

Compressing images for Google and co.

Many roads lead to Rome. This also applies to compressing your images for the web. You can choose between the following tools, which are available both online and directly on your PC.
Tools for image optimization:
Squoosh App: https://squoosh.app/
Photoshop: https://www.adobe.com/at/products/photoshop
Canva: https://www.canva.com//
MacBook: right-click and then select the Compress tab
Compressjpeg: https://compressjpeg.com/