The Hidden Cost of Media on the Web [PixelPalooza 2025]

Images, video, audio and other media are a big part of what brings the web to life and visitors have come to expect a multimedia experience across the web. However, they also have a cost that needs to be balanced, as they drive page weight ever higher and performance slower.

In this fireside chat, I spoke with MC Sean Davis about how images, video, and audio impact site performance, user experience, and business metrics. We discussed real-world data and practical strategies that balance visual impact with speed.

Transcript

1. #PixelPalooza 2025 @tammyeverts.com
2. Median 75p 90p Image weight per page* *According to the HTTP Archive
3. Median 75p 90p Mobile is almost as bad
4. Number of images on a page was the 2nd greatest predictor of conversions (total number of page elements was the 1st)
5. Excessive image weight hurts your SEO ranking in Google Image Search
6. £17.1B lost per year £446M over Black Friday & Cyber Monday
7. 1 GB data stored in the cloud = 0.1 kWh per year A household with 2 people using 1 TB of data storage = roughly 100 kWh (kilowatt-hours) per year (5% of their typical annual energy consumption!) greenly.earth/en-gb/blog/industries/what-is-the-carbon-footprint-of-data-storage
8. Resizing ≠ optimizing
9. 10% of sites lazy load the main image (which hurts LCP time)
10. 70% of sites do not have explicit 'width' and 'height' attributes on images (which hurts CLS score)
11. zillow.com/tech/bigger-faster-more-engaging-budget/
12. speedcurve.com/web-performance-guide/complete-guide-performance-budgets/
13. speedcurve.com/web-performance-guide/best-practices-for-optimizing-images/
14. 1. Serve the right image size (automatic image resizing is NOT the same as compression and optimization) 2. Compress (either manually or via your CDN) 3. Set performance budgets for image weight on your pages 4. Prefetch the most important visual content 5. Lazy load everything else 6. Use height and width attributes to prevent jank (and improve CLS) 7. Beware of AI that introduces bloated JS that blocks the critical rendering path 8. Add alt text for informative images (and null alt text for decorative images) 9. Ask yourself why you want to use low-fi animated images 10. Do not autoplay video or sound files #PixelPalooza 2025 @tammyeverts.com