Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Изменяем размер изображений с Adaptive Images

16 сентября 2011 | Опубликовано в Веб-дизайн | 4 Комментариев »

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




Комментарии

  1. Chudik
    Thumb up Thumb down +2

    Интересно, обязательно попробую.

    Ответить

Оставить ответ


один + = 2

Вставить изображение