Лучше использовать CSS / HTML для настройки размера изображения или сохранить несколько версий изображения?

Question

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

В настоящее время каждое загруженное изображение имеет размер около 6 новых изображений и сохраняется на сервере.

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

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

Лучше ли продолжать сохранять разные размеры и просто справляться с накладными расходами, или лучше на этом этапе получить, возможно, 3 общих размера и изменить их размер на лету по мере необходимости?

Answer 1

«Изменение размера» изображений с использованием html / css (например, указание высоты и ширины), как правило, не то, что вы хотите сделать - это приводит к плохо масштабируемым изображениям с артефактами из-за изменения размера и неэффективно, поскольку пользователь потенциально загружаетгораздо больший файл, чем им действительно нужно.

Скорее всего, вам нужно иметь какое-то решение на стороне сервера, позволяющее оперативное изменение размера.Я бы порекомендовал использовать ImageMagick - в сочетании с реализацией для вашего любимого языка и некоторым веб-сервером voodoo (например, с использованием .htaccess для Apache), вы можете легко получить /path/to/yourimage.png?50x50 запускает вызов скрипта изменения размера, который изменяет размер изображения, сохраняет его в папке кэша и выводит файл с измененным размером в браузер.Это лучше всего - вы получаете правильное изменение размера, ваш пользователь загружает только тот файл, который ему нужен, а конечный результат кэшируется, поэтому действие по изменению размера происходит только один раз.Проверьте Image :: Magick :: Thumbnail для примера (в perl)

Edit - если вы ответите на это с тем, какой серверный язык / фреймворк вы используете, я бырад указать вам направление в виде эскиза / изменения размера ImageMagick или что-то еще для вашей платформы.

Answer 2

Несколько версий.

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

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

Answer 3

.resize {  
  width: 200px;  
  height : auto;  
}  

.resize {  
  width: auto;  
  height : 300px;  
}