Руководство по изменению размера изображений: оптимальные размеры для web и соцсетей
Выбор правильного размера изображения для сайтов, соцсетей и email влияет как на визуальное качество, так и на скорость загрузки страницы.
Обновлено:
Почему размер изображения важен
Большие изображения увеличивают время загрузки. Google Core Web Vitals: LCP должен быть менее 2,5 секунд. Маленькие изображения вызывают потерю качества. Правильный размер оптимизирует и качество, и производительность.
Оптимальные размеры для сайтов
Hero/banner: 1920x1080 px (16:9), 200-400 КБ. Обложка блога: 1200x628 px, 100-200 КБ. Изображение контента: 800x600 px, 50-150 КБ. Миниатюра: 300x200 px, 20-50 КБ. Логотип: 200x50 px, 10-30 КБ. Favicon: 32x32 или 16x16 px.
Оптимальные размеры для соцсетей
Instagram: квадрат 1080x1080, портрет 1080x1350, Story 1080x1920. Facebook: обложка 820x312, пост 1200x630. Twitter/X: шапка 1500x500, пост 1200x675. LinkedIn: обложка 1584x396, пост 1200x627. YouTube: миниатюра 1280x720.
Советы по изменению размера
1. Зафиксируйте соотношение сторон. 2. Используйте разрешение 2x для Retina. 3. Используйте WebP. 4. Lazy loading. 5. Адаптивные изображения (srcset).
Изменение размера изображений в Utilgo
Изменение размера изображений в Utilgo поддерживает изменение по пикселям или процентам, фиксацию соотношения сторон и выбор формата (JPEG/PNG/WebP). Файлы до 20 МБ и 40 мегапикселей.
Связанные инструменты
Пошаговые руководства
Практические статьи по теме
Производительность мобильного веба: оптимизация и лучшие практики
Производительность мобильного веба включает другие задачи, чем производительность десктопа.
Как уменьшить фото до 200 КБ для загрузки в форму
Форма может отклонить фотографию даже с подходящими размерами. Изображения одинаковой ширины могут занимать разный объём.
Адаптивные изображения: srcset, sizes и Art Direction
Адаптивные изображения подают оптимизированные изображения для разных размеров экрана и разрешений.