Here is a quick reference guide on images for website and search engine optimization purposes.

- Page speed and user experience: Large or unoptimized images increase load time, raising bounce rates and reducing conversions [1][2].
- Core Web Vitals: Image-related issues (LCP, CLS) directly affect Google's page experience signals used in ranking [3].
- Bandwidth and mobile users: Smaller images reduce data usage and improve performance on constrained networks [4].

Key concepts
- File size vs. dimensions: Pixel dimensions (e.g., 1920×1080) determine display clarity; file size (KB/MB) determines download cost. Serve only the dimensions needed for display.
- Lossy vs. lossless compression: Lossy (JPEG, WebP/AVIF lossy) reduces file size by discarding data; lossless preserves all original data but achieves smaller reductions [5].
- Responsive images: Deliver different image files for different viewport sizes and DPR (device pixel ratio) using srcset + sizes or to avoid serving oversized images [6].
- Modern formats: WebP and AVIF usually deliver much smaller files than JPEG/PNG at equal or better quality; browser support is now widespread but fallback still needed [7].
- Lazy loading: Defer offscreen images to reduce initial load and LCP impact (native loading="lazy" or JS libraries) [3].
- Cumulative Layout Shift (CLS): Reserve image dimensions using width/height or CSS aspect-ratio to prevent layout shifts [3].

Practical optimization steps (checklist)
1. Choose the right format
- Photographs: AVIF or WebP (lossy) for best size/quality; fallback to JPEG for older browsers if needed [7].
- Graphics/transparent images: WebP/AVIF or optimized PNG; consider SVG for logos/icons [5].
2. Resize to required dimensions
- Generate multiple sizes (e.g., 320, 640, 1024, 1600 px widths) and serve with srcset/sizes [6].
3. Compress intelligently
- Use perceptual/quality settings (e.g., 70–85% for JPEG-ish formats) and compare visually; use lossless for images needing perfect fidelity [5].
4. Automate in build pipeline
- Integrate tools (Squoosh CLI, sharp, ImageMagick, libvips) or services (Imgix, Cloudinary) to generate and cache variants [8][9].
5. Use CDN and caching
- Serve images from a CDN with proper cache headers and support for format negotiation (Accept headers) to deliver AVIF/WebP automatically [8].
6. Implement lazy loading and prioritization
- Use loading="lazy" for non-critical images; preload hero images (link rel="preload") to optimize LCP [3].
7. Ensure accessibility and SEO metadata
- Alt text that describes the image, descriptive filenames, caption where relevant, and structured data when applicable [10].
8. Monitor and test
- Use Lighthouse, PageSpeed Insights, WebPageTest, and field data (CrUX) to measure impact and iterate [3][11].

Tools and services
- Open-source libraries: sharp, libvips, Squoosh (cli), ImageMagick [8].
- Online/compression services: TinyPNG, TinyJPG, Squoosh.app [5].
- Image CDNs & platforms: Cloudinary, Imgix, Fastly Image Optimizer, Akamai [9].
- Testing: Google Lighthouse, PageSpeed Insights, WebPageTest, Chrome DevTools, HTTP Archive [3][11][12].

SEO-specific notes
- Page speed influences rankings indirectly via user experience; improvements in image performance often yield measurable SEO gains [3][11].
- Alt attributes and descriptive filenames help search engines understand images; use structured data (ImageObject) for important images to enhance search appearance [10].
- Use sitemaps or image sitemaps to ensure discoverability of important images by search engines [10].

Quick example (technical)
- Responsive HTML pattern:

References
[1] Google — “Make the web faster” (developer guidance on images and performance). https://developers.google.com/speed
[2] Nielsen Norman Group — “Page-Load Time and User Satisfaction” (research on speed and UX). https://www.nngroup.com/articles/page-load-time/
[3] Google Developers — “Web Vitals” and “Optimize Largest Contentful Paint” & “Avoid large layout shifts”. https://web.dev/vitals/ and https://web.dev/lcp/ and https://web.dev/cls/
[4] HTTP Archive — reports on average page weight and images’ share of bytes. https://httparchive.org
[5] Squoosh & TinyPNG documentation — image compression and format guidance. https://squoosh.app and https://tinypng.com/developers
[6] MDN Web Docs — Responsive images: srcset, sizes, picture element. https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
[7] Web.dev — “Serve images in modern formats” (WebP/AVIF guidance). https://web.dev/serve-images-webp-avif/
[8] sharp (libvips) and Squoosh CLI docs — server-side image processing. https://sharp.pixelplumbing.com and https://github.com/GoogleChromeLabs/squoosh
[9] Cloudinary / Imgix documentation — image CDN and automatic optimization examples. https://cloudinary.com/docs and https://docs.imgix.com
[10] Google Search Central — image best practices, alt text, and image sitemaps. https://developers.google.com/search/docs/advanced/guidelines/images-best-practices
[11] WebPageTest — testing and optimization guidance. https://www.webpagetest.org
[12] Chrome User Experience Report (CrUX) — field performance data. https://developers.google.com/web/tools/chrome-user-experience-report