Как изменять размер изображений для сайта - правильные размеры для любых задач
Слишком большие изображения - причина №1 медленных сайтов. Фото 4000x3000, показанное в размере 800x600, впустую тратит 96% своих пикселей. Вот как правильно подобрать размеры.
Попробуйте прямо сейчас - бесплатно, без регистрации.
Изменить размер изображений бесплатно →Рекомендуемые размеры изображений
| Назначение | Ширина (px) | Retina (2x) |
|---|---|---|
| Главное изображение/баннер | 1600 | 3200 |
| Контент блога | 800 | 1600 |
| Миниатюра | 400 | 800 |
| Изображение товара | 1000 | 2000 |
| OG-изображение (соцсети) | 1200x630 | - |
| Фавикон | 512x512 | - |
Простое правило: уменьшите до максимальной ширины показа, а затем удвойте для retina-экранов. Изображение в блоге, которое показывается шириной 800px, должно быть шириной 1600px.
Как изменить размер
- Откройте инструмент изменения размера
- Загрузите изображение
- Задайте нужную ширину (высота изменится пропорционально)
- Скачайте изображение нового размера
Совет профи: СНАЧАЛА меняйте размер, потом сжимайте. Сжимать изображение 4000px, а потом уменьшать до 800px - пустая трата: вы сжимаете пиксели, которые потом выбросите.
Вопросы и ответы
Ухудшает ли изменение размера качество изображения?
Уменьшение обычно безопасно - вы убираете пиксели, а не добавляете. Увеличение снижает качество, потому что программе приходится придумывать новые пиксели. Никогда не увеличивайте изображения для веба.
Стоит ли использовать srcset для адаптивных изображений?
Да! Атрибут srcset позволяет браузеру выбрать подходящий для устройства размер изображения. Сделайте 2-3 размера (маленький, средний, большой), и пусть выбирает браузер.
Готовы? Конвертируйте изображения прямо сейчас - 100% бесплатно.
Изменить размер изображений бесплатно →