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

Question

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

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

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

Спасибо,

Answer 1

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

Answer 2

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

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

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

Answer 3

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

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

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