Start with pixel size, not quality
The most common mistake is uploading a photo straight from the camera. A photo that is 4000 pixels wide but shown in an 800-pixel column throws away most of its data for nothing.
The first step is to reduce its dimensions. Use Resize Image to set the width to match where the image will appear. Leave a little extra room (about double) if you want the image to stay sharp on high-resolution screens.
Choose the right format
The format determines how efficiently an image is stored:
- JPG suits photos and images with lots of color gradients. The file is small, but it does not support transparency.
- PNG suits logos, icons, screenshots and images with transparency. The result is sharp, but the file size for photos is usually large.
- WebP usually produces smaller files than JPG and PNG at similar quality, supports transparency, and is recognized by modern browsers.
Set the compression quality
For JPG and WebP, a quality setting of roughly 70 to 85 percent often looks identical to the original while the file is much smaller. This number is a guideline, not a hard rule: compare the results on screen, then pick the smallest file you are happy with.
Compress Image shows a before-and-after size comparison, and the work runs in your browser, so your photos are not uploaded to any server. If the original format is not efficient, convert it first with Image Format Converter.
What is a reasonable file size?
As a practical guideline, keep images inside an article under 200 KB, and keep large images at the top of a page not far above 300 to 500 KB. Every site has different needs, but these numbers are enough to keep a page feeling light on a phone.
Other things that are often missed
Besides file size, a few small habits make images work better for visitors and search engines:
- Set the image width and height in the HTML so the page does not jump when the image finishes loading.
- Use loading="lazy" for images below the first screen, but not for the main image at the top.
- Write alternative text (alt) that briefly describes the image. It helps screen readers and image search.
- Give files descriptive names, for example tipamedia-office-depok.webp, not IMG_4821.jpg.
Need a fast website from the start?
Image optimization is only one part of a fast website. If you want a website designed to be fast from the start, see our website development services in Depok.