Отзывчивые изображения: изменение размера или динамическая обрезка?

Question

Этот вопрос на самом деле не о кодировании, а о выборе правильного метода для задачи. Я не знаю, если это противоречит правилам SO, но здесь вы идете.

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

Теперь меня попросят возобновить эту старую и я столкнулся с дилеммой отзывчивости/адаптивности.

Что касается моих результатов в Интернете, то следующая большая вещь - это элемент <picture>. Я нашел много ресурсов, и когда я решил пойти на это, я пришел на сайт this. Если вы посмотрите на источник какого-либо изображения, вы поймете, что у него есть querystring, например width=940&height=320&mode=crop&scale=both&meta=panoramic Когда я изменяю размер окна, он становится чем-то вроде width=300&height=200&mode=crop&scale=both&meta=square&anchor=topcenter. Я считаю, что этот сайт использует Image Resizer и что в зависимости от размера экрана одна фотография обработанный на лету сервером для вывода нового изображения.

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

Answer 1

Библиотека Image Resizer звучит как ваш лучший выбор - избавляйтесь от необходимости загружать и управлять множеством разных размеров изображений!

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

Answer 2

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

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

С набором предварительно определенные изображения, хранящиеся на сервере и современной разметке с <img srcset="…"> или <picture>, браузер получает все необходимое непосредственно при загрузке HTML, который означает, что он может начать загрузку наилучшего качества изображения даже перед любым CSS или JavaScript загружается и/или выполняется. Это действительно намного лучше для производительности, и поэтому для пользователя.

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