Smaller images. A faster website.

An image has two sizes worth paying attention to: its dimensions in pixels and its file size in bytes. They affect different things. Dimensions describe the image grid; file size describes how much data must be stored or transferred. You can change one without changing the other, so start by deciding what problem you are trying to solve.

Resize when you have more pixels than you need

Imagine a 4000-pixel-wide photograph that will appear in a 700-pixel-wide article column. Sending the full photograph is often unnecessary. A smaller export can serve the same layout while moving less data. High-density screens may benefit from an image with more pixels than its CSS display width, so consider both the layout and the intended devices.

Open the Image Resizer, choose the source file, and change the width. Leave “Keep aspect ratio” selected to preserve the original proportions. If you change width and height independently, circles can become ovals and faces can stretch. Resizing is not cropping; it changes the whole image rather than selecting part of it.

Compress when the file is still too large

Compression changes how image data is stored. Lossy formats can discard detail to reduce bytes; lossless encoding preserves the represented pixel data. The visible effect depends on the picture. A busy photograph may hide mild compression, while a screenshot with small text can show artifacts immediately.

Use the Image Compressor to export a trial at quality 80. Compare that result with the original at the actual size readers will see. If edges and texture still look good, try a lower setting. If letters become fuzzy or gradients develop bands, move the quality back up. The quality number is an encoder setting, not a percentage of original detail.

Choose a format for the content

Photographs

Try WebP and JPEG, then compare the resulting sizes and appearance. A format name alone does not guarantee the smaller file. A photograph that is already compressed may become larger when re-encoded at a higher quality setting.

Screenshots and transparency

PNG is useful when exact edges or transparency matter. WebP also supports transparency and may be a practical alternative. JPEG does not preserve an alpha channel; our export fills transparent areas with white. Check the exported file on the background where it will actually appear.

Keep the original and name the export clearly

Save a new file instead of overwriting the source. Use a descriptive filename such as “desk-lamp-side-view.webp” rather than a camera-generated number. Keep a note of the chosen dimensions if several images must match. Avoid repeatedly compressing the same lossy export; begin each new attempt with the original source.

Put the image into the page carefully

Give informative images useful alternative text that describes their purpose. Decorative images should not repeat nearby content for screen-reader users. Set width and height attributes so the browser can reserve space before loading. Responsive image markup can offer several resolutions instead of sending every visitor one oversized asset. Google’s image performance guide explains these loading and sizing decisions.

Check the complete result

1. Confirm the image still looks right at its intended display size.
2. Check the reported output file size; smaller is not automatic.
3. Inspect transparency and small text.
4. Test the page on a narrow screen and a slower connection.

Good optimization is a balance. A tiny unreadable image is not an improvement, and a very large image can make an otherwise simple page unnecessarily slow. Choose the smallest export that still does the visual job well.