Изображения 4K или оптимизированные WebP 800px: компромисс производительности и качества

Ресторан тава на 18 столов в Мальтепе имел чёткую проблему: гости сканировали QR-код и 5-6 секунд смотрели на пустой экран. Причина — 4K JPEG-файлы с зеркалки весом 4-6 МБ на карточку продукта. Решение не выбросить 4K, а отдавать правильный размер.

Core Web Vitals: красная линия LCP

Порог Largest Contentful Paint (LCP) от Google — 2,5 секунды. Карточки с 4K дают 4,2-6,1 секунды — категория "Плохо". С WebP 800px та же карточка падает до 1,2-1,8 секунды, в зоне "Хорошо".

LCP напрямую влияет на SEO. Рестораны в топ-3 мобильной выдачи имеют средний LCP ниже 1,9 с; выше 4 с — переход на страницу 2-3.

Почему 800px WebP достаточно

Современные экраны (iPhone 14, Galaxy S23) — 390-430px CSS. С retina ×2 = 860px максимум. WebP 800px уже достигает физического потолка. Остальные 3 200 пикселей 4K не соответствуют ни одному видимому пикселю.

WebP на 25-35% меньше JPEG при равном качестве. WebP 800px (180 КБ) vs JPEG 4K (5,2 МБ) = 96,5% экономии трафика.

Сервис адаптивных изображений thMenu

При загрузке оригинала 4K, thMenu автоматически генерирует производные 320px, 640px, 800px, 1200px в WebP+AVIF. Браузер выбирает через srcset.

Lazy loading включён по умолчанию. First Contentful Paint ниже 600 мс; остальное грузится при прокрутке.

FAQ

Нужно ли удалять 4K оригинал? Нет. thMenu хранит его в R2 для будущих 8K-дисплеев.

Насколько AVIF меньше? На 50% меньше JPEG, на 20% меньше WebP при равном качестве. Поддерживается 94% браузеров.

Пострадает ли качество фото? Нет. На 800px в мобильном 4K неотличим — глаз не различает выше 300 PPI с руки.

Было полезно? Поделитесь.