Изображения на сайтах

Question

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

Для решения этой проблемы могут использоваться два метода: использование снимка продукта и создание всех необходимых миниатюр путем копирования исходного изображения с последующим изменением его размера или обрезки до всех требуемых размеров, или можно создать миниатюры разных размеров «по требованию» путем изменения размера их при необходимости и отправки «временного» изображения клиенту.

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

Спасибо

Answer 1

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

Answer 2

Я согласен с Andy и Petah (за исключением URI данных, поскольку он не будет кэшироваться или широко поддерживаться).

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

Вы отметили PHP, я использовал Библиотека SLIR .

Answer 3

Изменение размера и кадрирование по требованию очень ресурсоемко. Вы должны сделать это один раз, а затем кэшировать.

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

Если у вас много небольших изображений или изображений, которые загружаются при каждом запросе, рассмотрите возможность размещения их в своем CSS с использованием URI данных: http://en.wikipedia.org/wiki/Data_URI_scheme