@Evgeniuster
Делается интернет магазин. Встал вопрос про компоновку каталога, а именно выбор формфактора изображений.
Изначально планировал сделать квадратные блоки, в которые подставляется квадратная картинка с товаром, предварительно собранная в фотошопе, с небольшими отступами по краям и т.д., т.е. по композиции (товары же все разные, есть квадратные, есть узкие вертикальные/горизонтальные).
А потом подумал, что при смене формфактора блока, придется менять все изображения. Ну и вообще этот «воздух» по краям будет мешать, т.к. им можно управлять только в фотошопе.
Подсмотрев в разных интернет магазина увидел такой ход — изображение обрезается по объекту, т.е. впритык. А на сайт вставляется в блок с отступами. Тогда можно без проблем сделать блок чуть вертикальнее или чуть горизонтальнее, отличный от квадрата, и самое главное изображение используется одно. Отступы будут регулироваться CSS и все нормально смотрится в итоге.
Но. На сайте все будет смотреться хорошо, а чистое изображение будет не очень, т.к. не «воздуха» по краям.
И тогда вопрос про индексацию. В поиск пойдет изображение без «воздуха» по краям, как сделан сам jpg или есть какой-то способ, чтобы в поиске оно отображалось как выглядит на сайте, с CSS-ными отступами? В picture если его завернуть или еще как…
Но это даже не главный вопрос.
Главный вопрос какую стратегию выбрать изначально, чтобы потом не было мучительно больно, т.к. товаров очень много.
Как вы делаете изображения для каталога? Есть какая-то практика стандартная, удобная/оптимальная.
Когда товаров 10-20-30, их можно менять при необходимости, сделать побольше/поменьше «воздуха» по краям и т.д. и редизайнить как захочешь. А когда картинок 10 000… проще же композицией управлять через CSS.
С таким не сталкивался еще, поэтому все рассуждения с нуля.
Решения вопроса 0
Ответы на вопрос 2
@AntonLitvinenko
.product .img-wrapper {
position: relative;
padding-bottom: 66%;
}
.product .img-wrapper img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
}А при интеграции на движок, на пример wordpress, есть возможность сделать так, чтобы каждое новое изображение кропалось по заданным параметрам, а в карточке выводилось уже кропнутое
@Sanes
Ну и вообще этот «воздух» по краям будет мешать
Не будет. Соотношение 1:1 самое универсальное для превью в списке/таблице.
Тем более это фотография предмета.