Коротко: причина — жёстко заданные width и height (в пикселях или CSS), не совпадающие с реальным соотношением сторон фото. Решение: указывайте только одну из сторон (вторая посчитается автоматически) или используйте object-fit: cover в CSS.
Загрузили фото на сайт или в редактор — и оно вытянулось по горизонтали, сплюснулось, или стало выглядеть «сжатым». Люди на фото похожи на отражение в кривом зеркале. Это нарушение пропорций изображения — одна из самых раздражающих проблем при работе с фото.
Что такое aspect ratio (соотношение сторон)
Aspect ratio — это соотношение ширины к высоте изображения. Например:
- 16:9 — стандарт для видео и большинства экранов (1920×1080, 1280×720)
- 4:3 — старые мониторы и фотоаппараты
- 1:1 — квадрат (Instagram, аватарки)
- 9:16 — вертикальное видео (Reels, TikTok, Stories)
- 3:2 — большинство зеркальных фотоаппаратов
Если вы меняете ширину и высоту независимо друг от друга — пропорции нарушаются, и изображение деформируется.
Почему нарушаются пропорции — 4 частые причины
1. Неправильный ресайз в редакторе
В Photoshop и других редакторах при изменении размера есть кнопка «Сохранить пропорции» (значок цепочки). Если снять галочку — можно задать любую ширину и высоту независимо. Это моментально деформирует изображение.
2. Шаблон сайта с фиксированным соотношением
Многие сайты на WordPress, Tilda или Битрикс имеют карточки товаров или блоки с фиксированным соотношением сторон (например, строго 1:1 или 4:3). Если загрузить фото в другом соотношении — CMS «растянет» его под шаблон.
Решение: перед загрузкой на сайт узнайте у разработчика или в документации, какое соотношение сторон ожидает шаблон. Обрежьте фото под это соотношение заранее.
3. CSS на сайте без object-fit
Иногда проблема не в изображении, а в вёрстке. Если тег <img> на сайте имеет заданную ширину и высоту, но без CSS-свойства object-fit: cover — браузер просто растягивает картинку под размер блока.
4. Загрузка в поле с crop без указания размера
Некоторые формы загрузки обрезают изображение до определённых размеров без сохранения пропорций. Результат — «обрезанное» или деформированное фото.
Как правильно изменить размер, не нарушая пропорции
Главное правило: всегда меняйте только одну сторону — либо ширину, либо высоту. Вторая автоматически пересчитается пропорционально.
| Исходный размер | Хотим ширину 800 пк | Высота автоматически |
|---|---|---|
| 1200 × 900 | 800 | 600 (соотношение 4:3) |
| 1920 × 1080 | 800 | 450 (соотношение 16:9) |
| 1000 × 1000 | 800 | 800 (квадрат) |
Формула: новая высота = (новая ширина × исходная высота) / исходная ширина. Любой редактор с включённой «цепочкой» делает это автоматически.
Если нужны строго заданные ширина И высота
Когда нужны конкретные размеры (например, 800×600 обязательно) — используйте crop с сохранением пропорций: сначала масштабируете изображение так, чтобы оно вписалось в нужный размер, затем обрезаете лишнее. Это называется «fill» или «crop» — в отличие от «fit» (вписать с полями) или «stretch» (растянуть).
Сожмите фото без деформации
AeroPic уменьшает вес файла, сохраняя исходные пропорции
Открыть компрессор →