Bootstrap единодушно считается стандартом де-факто для быстрого достижения действительно адаптивного дизайна на веб-сайтах и мобильных сайтах. Тем не менее, хотя Bootstrap отлично справляется с таблицами, меню и общим макетом с помощью собственной системы координатной сетки, это не так хорошо, как должно быть, когда дело доходит до обработки изображений. В частности, Bootstrap предлагает только один предопределенный класс для адаптивного оформления изображений. Вот его определение:
.img-responsive { display: block; max-width: 100%; height: auto; } Чистый эффект класса img-responsive заключается в том, что изображение отображается в виде блока и изменяется соответствующим образом, чтобы не превышать ширину контейнера и не растягиваться за пределы его собственной первоначальной ширины. Это отличный компромисс, но это компромисс. В частности, решение Bootstrap делает два предположения:
- Вы всегда будете связывать данное изображение для каждой конкретной страницы и сценария
- Ваша главная проблема заключается в том, что изображение хорошо отображается при изменении размера экрана
Решение Bootstrap специально не решает следующие проблемы:
- Необходимость изменения размера изображения для каждого устройства
- Изменение размера изображения для каждого сценария
Обслуживание изображения для каждого устройства — это предоставление запрашивающему устройству изображения, соответствующего его фактическим возможностям. В этом контексте, независимо от размера экрана, смартфон не то же самое, что планшет, и оба они не совпадают с настольным компьютером. Иными словами, одно дело иметь дело с окном браузера на рабочем столе, размер которого уменьшен до 480px; совсем другое дело с недорогим смартфоном с таким же размером экрана. В идеале вы можете захотеть иметь возможность обслуживать отдельные изображения для каждого устройства.
Но это еще не все.
Когда вы рассматриваете возможность передачи изображения меньшего размера на мобильные устройства меньшего размера, вы уверены, что хотите, чтобы одно и то же изображение было только меньшего размера? Посмотрите на следующие два изображения:
Исходное изображение 2560x1920px. Изображение большего размера на странице имеет ширину 500 пикселей; маленький размером с миниатюру имеет ширину 100 пикселей. Эскиз приемлем для вас?
Когда речь заходит об изображениях в мобильных и веб-сценариях, есть несколько аспектов, которые следует рассмотреть, прежде чем переходить к тому или иному решению.
- Размер загрузки
- Необходимость в миниатюрах
- Арт-директор
Давайте посмотрим основные моменты каждого аспекта.
Размер загрузки
Если вас беспокоит размер загрузки и влияние на младшие устройства, у вас есть два возможных варианта: 1) сохранить несколько копий образа и 2) использовать алгоритм маршрутизации на стороне сервера для обнаружения устройств и интеллектуального обслуживания наиболее подходящая копия изображения. Фреймворк, такой как Bootstrap, не поможет в этом сценарии. Вы можете написать свою собственную серверную инфраструктуру (например, обработчик HTTP) или использовать что-то вроде WURFL Image Tailor (WIT) .
WIT — это бесплатный серверный инструмент, который действует как прокси между веб-сайтом WURFL и источником изображения. Вместо того, чтобы запрашивать изображение непосредственно с исходного сервера, вы передаете исходный URL-адрес службе WIT. WIT получит изображение с исходного сервера, изменит его размер в соответствии с возможностями обнаруженного устройства и предоставит агенту пользователя только те биты, которые он считает необходимыми. Другими словами, изображение изменяется на лету в зависимости от типа запрашивающего устройства, и измененное изображение кэшируется для дальнейшего использования. Если у вас нет других проблем с изображением, кроме размера загрузки, вот все, что вам нужно:
<img src="http://wit.wurfl.io/full-url-of-the-image" alt="example">
Как уже упоминалось, WIT — это бесплатный сервис с лимитом 20000 изображений в месяц на сайт. После этого ограничения ваши страницы будут работать без изменений, а WIT будет просто выполнять роль перенаправителя.
Нужны миниатюры
Другой сценарий, когда вам нужно подавать миниатюры. Например, представьте новостной портал, где каждый новостной элемент имеет большое изображение при просмотре в детальном режиме и достаточно иметь миниатюру, когда он отображается на главной странице. Должен ли эскиз быть отдельным изображением или таким же изображением, представленным в меньшем контейнере? Это зависит от ожидаемого использования страниц.
Если вы ожидаете, что пользователи будут в основном просматривать заголовки и время от времени нажимать, чтобы прочитать новости, вы можете использовать отдельное миниатюрное изображение на смартфонах и других бюджетных устройствах. Это обеспечит подачу небольших изображений и максимально быстрое отображение страницы. Когда пользователь нажимает кнопку, чтобы прочитать новости, он загружает полное изображение, используя сервис, такой как WIT, для оптимизации загрузки.
Миниатюры могут представлять собой отдельные изображения, которые вы храните на сервере, или их можно создавать на лету и кэшировать с помощью WIT. В этом случае вы используете расширенный синтаксис, как показано ниже:
<img src="http://wit.wurfl.io/w_100/http://www.sitepoint.com/images/tennis1.jpg" alt="example">
Команда w_100 дает команду службе WIT изменить размер исходного изображения до ширины 100 пикселей, сохраняя соотношение сторон. Кроме того, вы можете установить фиксированную высоту с помощью команды h_XXX или даже указать процент экрана, который вы хотите, чтобы изображение h_XXX . В этом случае вы используете команду pc_XX , где XX — это число (процент) между 1 и 100. Обратите внимание, что при использовании команды процента WIT установит самый длинный размер экрана в качестве ширины. Таким образом, вам гарантированы оптимальные результаты независимо от текущей ориентации устройства.
В настольных браузерах это на самом деле не имеет большого значения, и вы можете просто использовать адаптивные изображения в стиле Bootstrap и просто поместить изображение в самый внешний элемент div , должным образом измененный для отображения в виде эскиза.
Миниатюры относительно легко получить, если все изображения имеют одинаковый размер или, по крайней мере, одинаковое соотношение. Если это не так, вы можете попросить WIT поместить измененное изображение в коробку фиксированного размера. WIT выполнит работу по подгонке изображения как есть, если размеры соответствуют соотношению исходного изображения. В противном случае, он просто следует вашим инструкциям, как показано:
<img src="http://wit.wurfl.io/w_200/h_200/m_cropbox/full-url" alt="example">
Пример изменит размер изображения, чтобы оно было размером 200 × 200 с повторной выборкой, чтобы соответствовать размеру. Если исходное изображение не является квадратом, то изображение обрезается от центра и берется фрагмент указанного размера. Список допустимых опций пересэмплирования находится в таблице ниже. Чтобы использовать бокс, вы должны указать ширину и высоту.
| имя | команда | Описание |
|---|---|---|
| коробка | m_box | Возвращает изображение, содержащееся в данном окне, которое сохраняет исходное соотношение сторон. |
| Протяжение | m_stretch | Возвращает изображение, соответствующее указанному блоку, независимо от исходного соотношения сторон. |
| CropBox | m_cropBox | Возвращает изображение, которое соответствует указанному блоку, с повторной выборкой обрезки по центру, если размеры не совпадают. |
| Letterbox | m_letterbox | Как и «коробка», за исключением того, что она может быть заполнена пустым пространством, если измененное изображение не подходит точно. Вы можете выбрать цвет отступа как m_letterbox_aarrggbb . |
Арт-директор
Наконец, есть ситуации, в которых вы просто хотите иметь разные копии одного и того же изображения для использования в различных ситуациях. Это имеет место, например, когда вы хотите сопоставить конкретную плотность пикселей для настройки отображения сетчатки или когда вы хотите, чтобы изображение доставляло значительный контент даже при меньшем размере. В качестве примера посмотрите на миниатюру на изображении, показанном ранее. Предполагая, что 100 × 75 — это размер, к которому мы стремимся, какой из следующих эскизов лучше подходит?
Дело в том, что тот, что справа, может быть легко получен через WIT; тот, что слева, требует некоторого художественного руководства и немного работы самостоятельно.
Последние мысли
Несмотря на то, что «отзывчивый» является сегодня очень распространенным прилагательным, а Bootstrap — чрезвычайно популярная и хорошо сделанная инфраструктура, когда речь идет об изображениях и мобильных устройствах, есть еще много вопросов, которые необходимо учитывать. Когда-нибудь в будущем все используемые браузеры будут поддерживать собственные решения, более богатые, чем сегодняшний элемент img . На данный момент, похоже, у нас будет хороший синтаксис, подобный медиазапросу, чтобы связать разные изображения в одном месте. С помощью WIT в большинстве случаев вы можете создавать и поддерживать один образ и нести бремя изменения размера и кэширования для службы.
Для получения дополнительной информации обратитесь к сервису WURFL Image Tailor и его документации .