Изменение размера изображений: руководство для веб

Размер изображений напрямую влияет на скорость загрузки сайта, показатели Core Web Vitals и пользовательский опыт. Слишком большие картинки замедляют страницу, слишком маленькие — выглядят размыто. В этом руководстве разберём, как правильно изменять размер изображений для веба, какие размеры использовать и на что обращать внимание.

Почему размер изображений важен

Изображения — одни из самых «тяжёлых» ресурсов на веб-странице. По данным HTTP Archive, в среднем изображения составляют около 50% от общего веса страницы. Это напрямую влияет на несколько аспектов:

• Скорость загрузки. Каждый лишний мегабайт — это дополнительные секунды ожидания, особенно на мобильных сетях.
• Core Web Vitals. Метрика LCP (Largest Contentful Paint) часто привязана именно к главному изображению на странице. Огромная картинка может провалить эту метрику.
• Мобильный трафик. Отдавать изображение 4000×3000 пикселей на экран смартфона шириной 375 пикселей — расточительство трафика пользователя и ресурсов устройства.
• SEO. Google учитывает скорость загрузки при ранжировании. Оптимизированные изображения дают преимущество в поисковой выдаче.

Сохранение пропорций

При изменении размера критически важно сохранять соотношение сторон (aspect ratio). Если исходное изображение имеет пропорции 16:9, а вы зададите размер 500×500, картинка будет растянута или сжата и будет выглядеть искажённо.

Правильный подход — задавать только одну из сторон (ширину или высоту), а вторую рассчитывать автоматически. Например, при уменьшении изображения 1920×1080 до ширины 800 высота будет пропорционально вычислена как 450 пикселей. Наш инструмент изменения размера делает это автоматически — достаточно указать одну из сторон.

Распространённые размеры для веба

Существуют устоявшиеся стандартные размеры изображений для различных целей:

• og:image (Open Graph). 1200×630 пикселей — рекомендуемый размер для превью при шаринге в социальных сетях (Facebook, LinkedIn, Telegram).
• Превью для Twitter/X. 1200×675 пикселей (соотношение 16:9) для карточек с большим изображением.
• Фавиконы. 32×32, 180×180 (Apple Touch Icon), 192×192 и 512×512 (для PWA-манифеста).
• Миниатюры (thumbnails). 150×150 или 300×300 пикселей — типичные размеры для карточек товаров и галерей.
• Баннеры и героические изображения. 1920×1080 или 1440×600 — для полноэкранных фоновых секций.

Алгоритмы ресэмплинга

При изменении размера пиксели исходного изображения нужно пересчитать для нового разрешения. Этот процесс называется ресэмплинг, и от выбора алгоритма зависит качество результата:

• Nearest Neighbor (ближайший сосед). Самый быстрый, но самый грубый — просто берёт ближайший пиксель. Подходит для пиксель-арта, где нужны чёткие границы.
• Билинейная интерполяция. Усредняет цвет соседних пикселей. Хорошее соотношение скорости и качества для большинства задач.
• Бикубическая интерполяция. Учитывает 16 окружающих пикселей и применяет кубическую функцию. Даёт более плавные переходы, лучше подходит для фотографий.
• Lanczos. Самый качественный алгоритм, особенно при значительном уменьшении. Сохраняет чёткость деталей, но работает медленнее остальных.

Адаптивные изображения

Современный веб требует, чтобы изображения подстраивались под устройство пользователя. HTML-атрибут srcset позволяет задать несколько вариантов одного изображения в разных размерах:

<img src="photo-800.jpg" srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w" sizes="(max-width: 600px) 400px, 800px">

Браузер сам выберет подходящий вариант на основе ширины экрана и плотности пикселей (Retina). Для этого вам нужно подготовить изображение в нескольких размерах — и здесь наш инструмент ресайза станет незаменимым помощником.

Современные форматы изображений

Помимо размеров, формат файла играет ключевую роль в оптимизации:

• WebP. Формат от Google, обеспечивающий на 25–35% меньший размер файла по сравнению с JPEG при том же качестве. Поддерживается всеми современными браузерами.
• AVIF. Ещё более эффективный формат на основе кодека AV1. Экономия до 50% по сравнению с JPEG. Поддержка растёт, но пока не универсальна.
• SVG. Для иконок, логотипов и иллюстраций с чёткими линиями лучше использовать векторный формат SVG — он масштабируется без потери качества.

Оптимальная стратегия: подготовьте изображение нужного размера, сохраните в WebP с запасным вариантом в JPEG, и используйте тег <picture> для автоматического выбора формата.

Заключение

Правильный размер изображений — это баланс между качеством и производительностью. Не загружайте оригиналы из камеры на сайт, подготовьте несколько размеров для адаптивной подачи и используйте современные форматы. Начать можно прямо сейчас — измените размер изображения в нашем онлайн-инструменте за пару кликов.