Лучшая практика обработки изображений на сайте

9

Я портирую старый сайт электронной коммерции на MVC 3 и хотел бы воспользоваться улучшениями дизайна. В настоящее время на сайте имеются изображения продуктов, сохраненные в 3 размерах: миниатюра, средняя (для отображения в списке) и расширенная для увеличенного изображения. Прямо сейчас нам нужно загрузить 3 отдельных изображения, которые имеют правильный размер, предоставить 3 разных имени, которые соответствуют тому, что ожидает сайт, и т. Д., Это боль.

Я хотел бы загрузить только один файл, большой, а затем разрешить сайту уменьшить его до необходимых размеров, и мне бы хотелось, чтобы гибкость изменялась в зависимости от предпочтений пользователя, форм-фактора (например, для мобильных устройств, iPad) и размеров списка. , рабочий стол) и т. д., поэтому может потребоваться много копий одного и того же изображения. У меня вопрос: нужно ли уменьшать изображение, а затем сохранять его несколько раз при загрузке, и если да, то каково хорошее соглашение о хранении / именовании?

Другая идея состоит в том, чтобы сохранить только одно изображение, но изменить его размер программно, прежде чем передать его клиенту. Кто-нибудь сделал это и каковы компромиссы помимо нескольких машинных циклов? Как вы передаете временное изображение в памяти клиенту (там нет URL)?

asp.net image-manipulation Стив
источник

Ответы:

13

Я ведущий разработчик в британской туристической компании. Одним из реализованных мною проектов была веб-версия нашей библиотеки изображений, к которой можно автоматически запрашивать фотографии для нашего сайта. Он содержит около 150 тыс. Изображений, из которых около 60-70 тыс. Доступны для веб-сайта (самый высокий рейтинг).

Мы начали с определения примерно 5 размеров, создавая версии на лету и сохраняя их в Amazon S3. Цена была минимальной, но Amazon построен так, чтобы изящно проваливаться, поэтому мы часто видим пропущенные изображения. Чем больше мы разрабатываем наш сайт, тем больше мы ненавидим, имея только пять размеров изображений.

Мы перешли к модели с динамическим изменением размера, так как мы можем добавить параметры ширины и / или высоты в URI любого изображения, чтобы оно отображалось в таком размере на лету. Мы кэшируем изображение с измененным размером (используя MD5-хэш URI запроса в качестве имени файла).

Чтобы получить изображение # 12345 (наши изображения выбираются через БД, но вы можете заменить это путем к файлу) при ширине 200 и качестве jpg 80%, формат URI будет:

http://images.domain.com/?imageid=12345&w=200&q=80

Это решение было легко внедрить и работает без сбоев - нет заметной задержки для посетителя сайта, даже на страницах с 20-30 изображениями.

Мы делаем все это с .net, хотя я также написал скрипт изменения размера изображения PHP, который делает то же самое.

Надеюсь, это поможет, Адам

Адам
источник
Самое смешное для меня в том, что «упреждающее изменение размера» на самом деле является формой кеширования - просто крайне примитивной и ограниченной. Кэширование после первого запроса является обычным подходом и, как правило, лучшим. Исключение составляют случаи, когда в противном случае вы будете иметь дело с огромными объемами данных одновременно , что, вероятно, здесь не так.
Aaronaught
Блестящий @ Адам (это моя лучшая английская речь), спасибо за вдумчивый пост. Я ухожу
Стив
2

ImageProcessor ImageProcessor

Imageprocessor - это легкая расширяемая библиотека, написанная на C #, которая позволяет вам управлять изображениями на лету с помощью .NET

Изменение размера на лету: 

<!--Automatic height based on width-->
http://your-image?width=600
<!--Automatic width based on height-->
http://your-image?height=250
<!--Both dimensions specified-->
http://your-image?width=600&height=250
<!--Both dimensions specified with the image anchored to the top-->
http://your-image?width=600&height=250&anchor=top
<!--Height ratio passed for automatic scaling-->
http://your-image?width=600&heightratio=0.416
<!--Width ratio passed for automatic scaling-->
http://your-image?widthratio=2.4&height=250
<!--Background color added to padded image-->
http://your-image?width=600&height=250&bgcolor=fff

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

Сорен
источник
1

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

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

Питер Роуэлл
источник
0

Небольшое изменение в том, что упомянул Адам:

(1) создать пользовательскую страницу ошибки (правило для изображений)

(2) Структура имен файлов изображений должна быть:

ImageId_Width_Height_Quality

Единственным исключением является исходное изображение, которое должно быть названо:

ImageId_Original

(3) При загрузке файла, например: 1245_Original -> все файлы с 1245_ * должны быть удалены

(4) Пользовательская страница ошибки (при условии, что 1245_Original Exists) должна динамически создавать запрошенный файл изображения, например:

1245_250_400_80.jpg

а также подавать его в первый раз.

По сути, загрузка нового изображения очищает кэш.

Темная ночь
источник