Why the choice matters
An image file has two properties that people often confuse: its dimensions and its file size. Dimensions are the number of pixels wide and tall. File size is how many bytes the file occupies, which depends on the dimensions, the format and how much compression has been applied. Both affect how quickly an image downloads, how much storage it uses and how good it looks.
A very large file can slow a page, use up a visitor’s mobile data and delay everything else on the screen. A very small or heavily compressed one can look blurry or blocky. The aim is a reasonable balance for where the image will actually appear.
Lossy and lossless compression
Most formats shrink files with compression, and there are two broad kinds.
- Lossy compression discards some detail to make the file much smaller. Done moderately, the loss is hard to notice, especially in photographs. Done heavily, it creates visible artifacts such as blockiness or smeared edges. Each time a lossy image is re-saved, quality can drop further.
- Lossless compression reduces size without discarding any picture information, so the image can be restored exactly. Files are usually larger than lossy versions of the same photo.
Knowing which kind a format uses tells you much of what you need to know about when to use it.
Common formats in general terms
Formats evolve, and support differs between browsers and software, so treat the following as general tendencies rather than fixed rules.
JPEG is a long-established lossy format that suits photographs and images with smooth gradients. It does not support transparency. It handles sharp text and thin lines less well, which can look fuzzy.
PNG is lossless and supports transparency. It tends to suit graphics, screenshots, logos and images with flat areas of color or crisp text. Photographs saved as PNG are often much larger than the same photo as a JPEG.
GIF supports simple animation and a limited range of colors. It is mostly used for short, basic animations, although other approaches are often smaller and smoother for the same purpose.
WebP and AVIF are newer formats that can offer both lossy and lossless options and often produce smaller files than older ones at similar visual quality. They are widely supported in modern browsers, but it is sensible to check the current support level for your audience.
SVG is different in kind: it describes shapes mathematically rather than storing pixels. That makes it suitable for logos, icons and simple diagrams that must stay sharp at any size, but not for photographs.
RAW files, produced by many cameras, hold unprocessed sensor data. They are for editing, not publishing, and are typically very large. You export a finished copy in another format when you are ready to share.
Matching dimensions to the display
A common mistake is uploading a photo straight from a camera, thousands of pixels wide, to show it in a space a few hundred pixels across. The browser shrinks it for display, but the visitor still downloads the full file.
A better approach is to resize the image to roughly the largest size it will be shown, while allowing for high-density screens, which may need somewhat more pixels than the display area to look crisp. Many sites serve several versions of the same image and let the browser pick the best one. If you are designing for phones, the thinking in mobile visuals is relevant, because the smallest screens are often the most limited by connection speed.
Always keep your original, full-size file somewhere safe. Resize and compress copies, not the master. Sensible file versioning and clear names, for example including the dimensions or purpose, prevent mix-ups later.
Finding a balance
Rather than relying on a fixed number, compare results by eye. Export the same image at a few quality levels and view them at the size they will appear. Most photographs can take a fair amount of lossy compression before the difference becomes noticeable, but the right level depends on the picture. Images with fine detail, text or smooth skies reveal compression flaws sooner than busy textures.
Some practical guidelines:
- Photographs: use a lossy format and moderate quality.
- Logos, icons and diagrams: consider SVG, or PNG when SVG is not practical.
- Screenshots with text: a lossless format usually keeps letters crisp.
- Anything transparent: choose a format that supports transparency.
- Always preview at actual display size before publishing.
Metadata, color and privacy
Image files often carry hidden metadata, such as camera model, date and sometimes location. Many tools can remove it on export. This is worth doing when you share images publicly, as discussed in content privacy, and particularly before sharing photographs taken at home or of other people. Some compression and export tools strip metadata automatically, but behavior varies, so check the result.
Color handling is another quiet detail. Images are generally expected to use a standard color space for the web, and exporting in an unusual one can make colors look different on other screens. Most tools handle this with a default setting, which is usually adequate for beginners.
Do not forget the words
A fast, well-sized image still needs to be useful to everyone. Writing good alternative text lets people using screen readers understand what the picture shows, and it also appears if the image fails to load. And since images are only as good as what was captured in the first place, it helps to remember the basics of visual capture, covered in the overview of photography and video.
When in doubt
If you are unsure, start with a modern, widely supported format, resize to the display needs, apply moderate compression and look at the result on a real phone. Tools and standards change, so check current guidance from browser or platform documentation when it matters, and adjust to what works for your own audience.