Start with where the photo will appear
Identify whether the image is a thumbnail, a gallery item, a full-width banner or a zoomable photograph. Those uses need different exports. Measure the rendered width before deciding how many pixels to upload. A higher-density screen may benefit from an image wider than its CSS display size.
Keep a full-quality master separately. A web export is a delivery copy, not a replacement for the original photograph.
Resize, then adjust compression
- Open the image optimizer and choose your source image.
- Set dimensions appropriate to its display. Auto height preserves the aspect ratio. Fixed dimensions fit the image with transparent padding.
- Generate a WebP, inspect it at its intended display size and compare the measured file size.
- Look closely at faces, foliage, fabric and smooth backgrounds. Adjust quality and generate again if defects are distracting.
A quality number is not a universal threshold. A setting that works for a simple studio background can look poor on detailed leaves. Judge the actual result.
A measured portrait export
This example uses a public-domain NASA portrait of Eileen Collins. It includes hair, fabric, small details and a dark background. We made a 512 × 512 JPEG reference from the source PNG at browser quality 95, then ran that JPEG through this site's image optimizer. It is a prepared test image, not an original camera file.
| Export | Dimensions | Quality setting | Measured bytes |
|---|---|---|---|
| JPEG reference | 512 × 512 | 95 | 96,018 |
| WebP, more detail | 512 × 512 | 90 | 52,132 |
| WebP, lower quality | 512 × 512 | 65 | 23,638 |
| WebP, smaller dimensions | 320 × 320 | 80 | 16,596 |
The smaller-dimension result changes both pixel count and quality, so it is not a controlled comparison of quality alone. These sizes describe this single portrait and browser run; a detailed landscape, transparent graphic or already efficient JPEG can behave differently. No setting guarantees a particular file size or visual quality.
Try it: download the JPEG reference above, choose it in the image optimizer, select custom width 512 with height left automatic, and export at 90 and 65. Then try width 320 and quality 80. Compare at the actual display size for your gallery.
Measured on 10 September 2026 with Chrome 152 on macOS. Read the source, licensing and reproduction notes or inspect the raw settings, byte counts and checksums.
Make the page accessible and understandable
Use a meaningful filename in your own workflow. Write alt text that conveys the image's purpose on the page, and leave purely decorative images with empty alt text. A caption can add context that the image alone cannot provide. Do not fill filenames or alt text with repeated keywords.
Set image width and height in your markup to reserve space while the image loads. Use responsive image markup when your site produces several sizes, and lazy-load suitable images below the first screen. Keep the image needed immediately visible without delaying it behind interaction. A gallery should let visitors understand its controls with a keyboard as well as a mouse. See Google’s image documentation for responsive image markup and W3C’s image alternative decision tree for choosing alt text.
Choose hosting deliberately
Download the optimized file to publish through your existing media library. Or choose Host on FooPixel for a public URL without creating an account. Visitor uploads currently expire after 24 hours; free-account uploads have seven-day retention. Keep a copy and choose a retention policy appropriate to a permanent portfolio.
FooPixel validates hosted images and may resize images wider than 2000 pixels. Check the hosted copy if you require particular dimensions. The local download remains the output you generated.
Connect the media to your gallery
If your site uses WordPress, FooGallery is part of the FooPlugins product family. Prepare and inspect your files before adding them to a gallery. FooPixel's planned WordPress connector is described on the WordPress page; do not assume a hosted file is automatically added to your gallery.