The perfect image sizes for your website - in 4 steps
Pictures belong on a website, just like your SEO enhanced text. They show
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/
- who you are
- liven up your website
- convey feelings and emotions and
- depict what you offer.
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
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/