Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →Compressing a website photo well means sending no more pixels or image data than the page needs while keeping defects invisible at the intended display size. Start by checking whether the image is necessary, resize it to the largest dimensions the layout actually displays, then compare compression settings and formats on the real image. Finish by delivering responsive candidates so each device downloads an appropriate file.
1. Start with the image’s job and display size
Optimization cannot rescue an image that is unnecessary or vastly oversized. Remove decorative images that add no information, and avoid using a large photograph where a CSS background, SVG or text would do.
Measure the rendered dimensions
Inspect the page at its widest supported layout and record the image’s rendered CSS width and height. An image displayed at 800 × 600 CSS pixels generally does not need a 4,000 × 3,000 source. For high-density screens, prepare a larger candidate (often about two times the CSS dimensions), but do not send that candidate to every visitor automatically. The browser should choose among sensible sizes.
Crop before you compress
Crop to the composition used by the page and remove unused borders. Correct dimensions reduce bytes before you change a quality setting; web.dev identifies right-sizing as a major part of image performance.
#1 Best Overall
- New
- Mint Condition
- Dispatch same day for order received before 12 noon
- Guaranteed packaging
- No quibbles returns
2. Choose a format based on content and audience
| Format | Useful when | Trade-offs |
|---|---|---|
| JPEG | Photographs where broad compatibility is essential | Lossy compression can create ringing around text and hard edges; it has no alpha transparency. |
| WebP | Most photographic, graphic and transparent web images | Supports lossy and lossless compression and transparency; web.dev describes it as widely supported in modern browsers. Retain a fallback where your audience or tooling requires one. |
| AVIF | Sites whose delivery pipeline and audience support it | Offers lossy and lossless modes and additional color capabilities, but web.dev says it is not as widely supported as WebP. |
| PNG | Images needing lossless data or crisp transparency, such as interface artwork | Often inefficient for photographs; lossless WebP was reported by Google for Developers as 26% smaller than PNG in its comparison. |
Do not assume one format wins for every file. Compare bytes at a similar visual quality and verify fallback behavior for your browsers.
3. Lossy versus lossless compression
Lossy compression
Lossy encoding discards information to reduce the file. It is commonly effective for detailed photographs, but inspect faces, foliage, gradients, sharp edges and text at the size visitors see. JPEG and lossy WebP or AVIF are typical choices.
Lossless compression
Lossless encoding preserves image data, making it appropriate when every pixel matters, but it may produce a larger file than lossy encoding. Use it for graphics with flat colors, repeated editing, or strict archival requirements rather than assuming it is best for a photo.
Find a quality setting experimentally
There is no universal quality percentage. web.dev recommends experimenting with compression levels until you find a good compromise between image quality and file size. Export several settings, compare the byte counts, and examine the actual page render—not just a zoomed-in editor preview. Google for Developers reports that lossy WebP can be 25–34% smaller than comparable JPEGs at equivalent quality, while web.dev reports savings greater than 50% compared with JPEG in some cases; these are comparative results, not guarantees for your image.
Rank #2
4. A repeatable compression workflow
- Inventory. List the images on important pages, their current byte size, pixel dimensions, format and rendered dimensions.
- Remove or replace. Delete images that do not support the page, and use a simpler asset where appropriate.
- Resize and crop. Create a master at the largest required dimensions, preserving the intended aspect ratio.
- Export candidates. Produce a compatible fallback and, where supported by your delivery stack, WebP or AVIF versions. Try multiple quality levels.
- Inspect visually. Check skin tones, textured areas, skies and gradients for banding, halos or blockiness. Look especially for artifacts around lettering and diagonals.
- Measure. Record dimensions, format, quality setting and bytes for every candidate. Select the smallest file that remains acceptable at its real display size.
- Automate repeat work. For a handful of images, an editor or tools such as Squoosh and ImageOptim may be sufficient. At scale, an image CDN can transform files and negotiate a suitable format for browser capabilities.
5. Serve responsive image candidates
A compressed 2,400-pixel image is still wasteful on a 360-pixel phone. Generate a reasonable range of widths justified by your layouts—do not create dozens of variants with no device or component using them.
Use srcset and sizes
<img
src="/images/mountain-800.jpg"
srcset="/images/mountain-400.jpg 400w,
/images/mountain-800.jpg 800w,
/images/mountain-1200.jpg 1200w"
sizes="(max-width: 600px) 100vw, 800px"
width="1200" height="800"
alt="Snowy mountain reflected in a lake">srcset lists available widths; sizes tells the browser how wide the image will render in the layout. The intrinsic width and height help reserve space and reduce layout shifts. Recheck the result in browser developer tools: confirm the selected resource is close to the rendered size and that the network response is the expected format.
Offer modern formats with a fallback
<picture>
<source type="image/avif"
srcset="/images/mountain-400.avif 400w, /images/mountain-800.avif 800w"
sizes="(max-width: 600px) 100vw, 800px">
<source type="image/webp"
srcset="/images/mountain-400.webp 400w, /images/mountain-800.webp 800w"
sizes="(max-width: 600px) 100vw, 800px">
<img src="/images/mountain-800.jpg" width="1200" height="800" alt="Snowy mountain reflected in a lake">
</picture>Test the complete chain: format negotiation, candidate selection, caching and the fallback. Support changes over time, so confirm the browsers and devices your visitors actually use.
6. Validate savings without sacrificing experience
- Compare the final response bytes, not only the source-file size.
- Check the largest image candidates on slow mobile connections and the smallest candidates on high-density screens.
- Inspect photographs at normal viewing size and zoom in only to diagnose a visible defect.
- Watch for accidental upscaling, wrong aspect ratios, missing transparency and color shifts.
- Recheck pages after a CMS, CDN or build-pipeline change; an optimization setting can be silently bypassed.
Keep the original masters outside the public upload path. Store a record of the chosen dimensions, format and setting so a future export is reproducible.
Free tools Windows power users keep installed
One-click scans. No signup required.
7. Common problems and fixes
The image is still huge after compression
Check pixel dimensions first. A quality adjustment cannot compensate for sending an image several times larger than its rendered size. Then verify that your HTML is not selecting the largest srcset candidate for every viewport.
Text or edges look smeared
Photographic lossy settings can damage small lettering, logos and high-contrast diagonals. Use a higher setting, a different format, or a lossless asset for that component. Separate a photo from overlaid text instead of baking both into one heavily compressed bitmap.
AVIF does not appear for some visitors
Confirm the server sends the correct MIME type and that the <picture> fallback is valid. Keep WebP or JPEG as an appropriate fallback for audiences whose browsers or proxies do not support AVIF.
Images look soft on high-density displays
Provide a larger candidate and ensure sizes describes the actual layout width. Do not globally send the largest file; let the browser choose.
Rank #4
- Blank Linen Video Book: The neutral beige linen cover leaves room for your own videos, photos, messages, and meaningful memories without limiting the gift to one occasion
- Collect Video Messages: Record your own video or ask family, friends, classmates, coworkers, or loved ones to film short clips, then add them by USB to create a meaningful video book gift
- For Many Life Moments: Use it for birthday wishes, wedding footage, anniversary messages, graduation memories, retirement wishes, farewell notes, memorial tributes, travel highlights, or holiday greetings
- A Gift for Many People: Create a personal video gift for mom, dad, parents, grandparents, wife, husband, girlfriend, boyfriend, friends, teachers, mentors, coworkers, boss, graduates, or students
- Simple Playback Keepsake: 7 inch IPS screen, 4GB memory, built-in speaker, rechargeable battery, and no WiFi needed during playback make moments easy to view and share
There are too many generated files
Limit widths to those used by real components and breakpoints. An image CDN or build step can generate variants on demand; measure cache behavior and storage costs before expanding the set.
Transparency disappeared
JPEG cannot store an alpha channel. Use WebP, AVIF or PNG where transparency is required, and inspect the fallback separately.
8. DIY page screenshots for visual checks
When you need to compare a page before and after an image change, capture the same viewport and state each time. Clear caches when validating delivery changes, wait for lazy-loaded images, and record the URL, viewport and selected resource. A screenshot is evidence of the rendered result, not a substitute for checking network bytes.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Or skip the browser setup
ScreenshotNeo can capture the rendered page with one request. Before the capture it accepts the cookie or consent banner like a visitor and removes more than 60 known consent platforms, newsletter popups and chat widgets; each step can be turned off. Bot checks, CAPTCHAs, blank pages, timeouts, failed loads and cache hits cost nothing, and the response reports the page verdict and billing status in X-Page-Verdict and X-Billed headers. Its MCP server provides take_screenshot, get_page_info and capture_pdf tools for Claude, Cursor and other MCP clients.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errorsSee the ScreenshotNeo documentation for all options, including full-page capture with lazy images loaded, CSS-selector element capture, device presets, retina scale, custom CSS and JavaScript, waits, request blocking, headers and cookies, caching, signed links, asynchronous webhooks, bulk capture and PDF output.
Best Value
- Laminated Durable Tabs (Book not Included): The tabs are laminated with 3 mil film for durability and stiffness and made specifically for Digital Photography Complete Course
- Color-coded tabs: Highlight the most important sections for Digital Photography Complete Course. The colors match the section for easy reference
- Find Sections Easily and Efficiently: Our color-coded tabs have large font and are printed on both sides so you can easily navigate the guide
- Includes Alignment Card for Aligned Tabs: Our tabs are easy to install in alignment using our tabs alignment system. Each tab includes the location and page number for super easy installation
- Blank Tabs Included: Additionally we include blank tabs so you can highlight anything specific to your needs
cURL
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpPython
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)Node.js
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);ScreenshotNeo includes 1,000 screenshots a month free with no card; paid plans start at $5 for 3,000. Create a free ScreenshotNeo account to capture your optimized pages.
9. A practical decision checklist
- Is the image necessary?
- Does its pixel size match the largest layout use?
- Did you compare lossy and lossless options on this specific image?
- Would WebP or AVIF work for your audience, with a tested fallback?
- Are
srcsetandsizesselecting an appropriate candidate? - Have you measured bytes and inspected visual quality at normal size?
- Will your CMS or CDN preserve these choices after deployment?
Frequently Asked Questions
Should every website image use the same quality setting?
No. Content, dimensions and the defects your audience can see differ by image, so choose settings after comparing candidates.
Is WebP always smaller than JPEG?
No. Published comparisons report savings in some cases, but the result depends on the image, encoder and quality target.
How many responsive widths should I generate?
Generate a reasonable set that matches your actual components and breakpoints, then measure whether additional variants improve delivered bytes.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
