Как организовать групповое изменение размеров фото на сайте?

Question

[MVP_Master]

На сайте сейчас только полного размера фотки разных форматов.

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

принято решение создавать копии картинок для превьюх и хранить их в подпапке где указаны размеры, например,
products/
10001/
product.png
100х100
product.png
200x200
product.png

Вопрос:

одно и тоже имя оставлять в папках, соответствующих каждому размеру? или добавлять постфикс к имени в виде
ИмяФайла.'100x100'.',png' ?

Или как лучше?

И может быть в webp конвертить каждый рисунок?

Answer 1

[ThunderCat]

одно и тоже имя оставлять в папках, соответствующих каждому размеру?

Очевидно же что рано или поздно вы перезапишете какую-то фотку, так как такое имя уже будет загружено (типичный пример без имени(1).jpg). И да - для каждого размера своя папка. Кроме того, часто имена фоток бывают на русском языке, с пробелами, в разном регистре, что для веба не очень хорошо. Фото надо переименовывать. Есть 2-3 варианта, которые зависят от условий. Самый простой и очевидный, подходящий для одной фото на объект - имя будет соответствовать идентификатору объекта (товара в вашем случае). Если их больше одной - можно использовать
а) идентификатор + _микротайм после точки,
б) хеш микротайма / идентификатора + _микротайма после точки,
в) просто микротайм
г) любой другой алгоритм, гарантирующий высокую уникальность и совместимость с вебстандартами.

Хранить стандартный вариант в жпег, так же можете добавить вебп, на радость гуглу. Для ог лучше использовать жпег, так как не все соцсети нормально понимают вебп, так же все еще есть проблемы с некоторыми браузерами, например сафари не всегда нормально его понимает.

Для вывода изображений используйте <picture>, в котором задайте приоритеты вывода и размерность.

Comments

[MVP_Master]

ну так то много полезного узнал от вас! спасибо!
правда уточню - фотки я выкачиваю из прайсов, предоставляемых заказчиком и в базе данных храню оригинальное имя (русское часто) а у себя уже на диск сохраняю как преобразованное в латиницу. оба имени хранится в базе. Но вот тут появляются еще сородичи раных размеров.

Если для брендов картинки все одинакового размера идут и их по одному экземпляру, то для товаров и товарных категорий по несколько фоток бывает и на главной и в каталоге нужно выводить превьюхи определенного размера. идентификатором служит папка с id товара или id категории и т.п.
а вот как разные размеры выводить под каким имеенм с точки зрения seo пока не решено. Есть мнение, что поисковики обращают внимание на имя картинок. и тогда идентификатор в названии уже не прокатит. и микротайма.

jpeg не умеет прозрачные фоны делать. вот что плохо. А то что вебп одновременно подсовывать - это идея! спасибо.

А если картинки в совершенно разных расширениях прилетают - jpg, png, bmp, gif, то лучше jpg + webp сделать и конвертировать всех в эти форматы?

[ThunderCat]

MVP_Master,

А если картинки в совершенно разных расширениях прилетают - jpg, png, bmp, gif, то лучше jpg + webp сделать и конвертировать всех в эти форматы?

Да, на сайте не должно быть зоопарка форматов, а для фото лучше всего подходят жпег и вебп.

Есть мнение, что поисковики обращают внимание на имя картинок. и тогда идентификатор в названии уже не прокатит. и микротайма.

Хз что там считают, пока ни на одном проекте смена имен фото никакого сео эффекта не выявила, а для подсказки поисковикам есть альт, титл и дескрипшн. Хотя можете почитать тут, вроде там описывается как это все работает. Кроме того - ничего не мешает хранить то же имя на латинице + ид + микротайм.

идентификатором служит папка с id товара или id категории и т.п.

Тут есть нюанс. При достижении некоторого большого количества подпапок в папке начнутся тормоза при просмотре этой папки, то же относится и к файлам. Учитывайте это, в идеале желательно как-то разбивать папки на группы, например сохранять по путям типа /images/таймстамп_текущего_года+месяца/размер/123.jpg

jpeg не умеет прозрачные фоны делать. вот что плохо.

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

[MVP_Master]

ThunderCat, у нас просто от разных поставщиков загружаются прайсы. в произвольных форматах. Вот и думаю в какой формат конвертироватьт это дело. видимо jpg + webp.