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

Зачем это нужно?

Затем, что все больше и больше посетителей просматривает ваш сайт с маленьких, медленных устройств с низкой пропускной способоностью. Ваши ориентированные на десктоп изображения грузятся медленно, тормозят работу интерфейса и выливаются вашим посетителям в копеечку из-за нежелательного и бесполезного траффика. Применяете вы или нет технологию http://www.abookapart.com/products/responsive-web-design реагирующего дизайна, вам стоит добавить немного адаптивности вашим изображениям.

Как установить

• Скопируйте файлы .htaccess и adaptive-images.php в корень сайта
• Создайте папку ai-cache и установите ей права на запись
• Добавьте одну строку кода JavaScript в вашего сайта

Что вам потребуется

• Apache 2
• PHP 5.x
• библиотека GD (обычно в составе PHP)
• 5 минут времени :)

Идея крайне проста, в двух словах скрипт работает следующим образом:

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

Правило .htaccess на сервере перехватывает любой запрос файла .jpg .gif или .png, не находящегося в защищенной папке. Защищенные папки можно задать в .htaccess, и сервер не станет изменять размер изображений, которые вы желаете оставить, как есть.

Проверочные запросы отсылаются PHP-скрипту, который, в свою очередь, проверяет существование кэшированной версии изображения нужного размера. Если она нашлась, она и подается. Если нет, тербуемый файл генерируется. Все Кэшируемые файлы сохраняются в папке ai-cache, внутренняя структура которой повторяет структуру местонахождения запрашиваемых файлов.

Дополнительные настройки

Файлы с кодом содержат подробные комментарии, однако не мешает разместить дополнительный обзор:

PHP

• $resolutions — это массив, содержащий размеры, под которые вы хотите адаприровать изображения. Вы можете задать любое количество прерывания.
• $jpg_quality может варьироваться от 0 до 100
• $cache_path можно установть в TRUE или FALSE. По умолчанию TRUE, но на загруженном сервере можно установить FALSE. Регулирует проверку соответствия кэшированного файла исходному. Если вы измените исходный файл, скрипт узнает об этом и заменить кэшированный.
• $sharpen можно установть в TRUE или FALSE. По умолчанию TRUE. Отвечает за легкое повышение резкости при уменьшении размеров изображения, чтобы предотвратить потерю мелких деталей.
• $browser_cache регулирует длительность хранения браузером изображения. По умолчанию 1 неделя.
• $mobile_first — если установлен в TRUE и не обнаружен cookie, скрипт отправит версию изображения для мобильного. Если FALSE — при отсутствии cookie отправит изображение с максимальным разрешением, указанным в $resolutions.

Предполагается, но не является обязательным, что Adaptive-Images используется вместе с применением responsive design и Fluid Image технологий.

Скачать скрипт и получить более подробную информацию можно на adaptive-images.com



Комментарии