Zipnify Fast image tools. Zero uploads.Images for a fast website: size, format and good practices
Images often account for more than half the weight of a web page. If you do not prepare them, your site loads slowly, visitors leave and search engines notice. The good news is that optimising images is one of the simplest improvements with the greatest impact. This guide gathers a practical recipe.
Why images matter for speed
A page with ten 4 MB photos forces the visitor to download 40 MB, which is very slow on a phone with mobile data. A long load time increases abandonment and harms the experience. Search engines consider speed a quality factor, especially on mobile.
Reducing image weight requires no technical knowledge: it is enough to apply a few simple criteria consistently.
Dimensions: do not upload more pixels than are displayed
The most common cause of heavy images is uploading the photo exactly as it comes from the camera. If on your page the image is displayed at 800 pixels wide, uploading one of 4000 improves nothing visible and multiplies the weight. Work out the maximum width it will occupy on screen and upload a version at that width, or double it if you want sharpness on high-density screens.
Guideline values: main hero image, 1600 to 1920 pixels; article images, 1000 to 1200; product thumbnails, 400 to 600; icons, the minimum necessary.
Target weight by type of image
As a reasonable goal, a hero image should be under 200 to 300 KB, content images between 60 and 150 KB and thumbnails under 40 KB. These are not strict limits but goals that keep the total page size manageable, ideally under 1 to 2 MB.
Use the image compression tool or the exact size tool to get close to these values while checking that quality remains good.
The right format
Choose WebP or JPG for photographs, PNG or WebP for graphics with transparency and SVG for logos and vector icons, which look sharp at any size and weigh very little. Avoid heavy animated GIFs: a short video in a modern format is usually much lighter.
Give each image a descriptive lowercase name with hyphens, for example 'blue-running-shoes.webp', rather than 'IMG_2043.jpg'.
Lazy loading and alternative text
Images that are off the initial screen do not need to load when the page opens. The browser's lazy loading attribute lets them download only when the visitor gets near them. For the main image, which is seen immediately, do not apply lazy loading.
Always include alternative text describing the image. It helps people using screen readers, appears if the image fails to load and gives context to search engines.
A recipe to start today
First, resize your images to the width you will actually use. Second, convert them to WebP or JPG with quality between 75 and 85. Third, verify that each one meets the target weight. Fourth, name them clearly and add alternative text. Fifth, test your page on a phone with a normal connection.
Do this every time you publish new content and, if your site already has many heavy images, start with those on the most visited pages.
Frequently asked questions
How much should a web image weigh?
As a goal, hero under 200 to 300 KB, content images 60 to 150 KB and thumbnails under 40 KB.
Should I upload the camera-size image and let the site shrink it?
No. The visitor will still download the heavy file. Resize before uploading.
Is SVG suitable for photos?
No. SVG is for logos, icons and vector drawings. For photos use WebP or JPG.
What is alternative text?
A short description of the image that helps screen readers and search engines, and is shown if the image fails to load.