Важно не путать понятия адаптивности и респонсивности.

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

Адаптивное изображение отдается с наиболее подходящим размером.

Adaptive Images: PHP скрипт

Подробности скрипта и скачать на сайте adaptive-images.com.

Установка не представляет сложности.

Необходимо скопировать скрипт adaptive-images.php в корень сайта.

Загрузить .htaccess файл также в корень сайта (или добавить блок правил в уже имеющийся).

<IfModule mod_rewrite.c>
Options +FollowSymlinks
RewriteEngine On

# Adaptive-Images -----------------------------------------------------------------------------------

# Add any directories you wish to omit from the Adaptive-Images process on a new line, as follows:
# RewriteCond %{REQUEST_URI} !some-directory
# RewriteCond %{REQUEST_URI} !another-directory

RewriteCond %{REQUEST_URI} !assets

# Send any GIF, JPG, or PNG request that IS NOT stored inside one of the above directories
# to adaptive-images.php so we can select appropriately sized versions
RewriteRule \.(?:jpe?g|gif|png)$ adaptive-images.php

# END Adaptive-Images -------------------------------------------------------------------------------
</IfModule>

Загрузить JS скрипт в заголовок темы, перед исполнением других скриптов.

<script>document.cookie='resolution='+Math.max(screen.width,screen.height)+'; path=/';</script>

В общем, всё. Скрипт подключен и выполняется.

Дополнительно, можно вписать собственные брэкпоинты (размеры изображений) в области конфигурации скрипта.

Новые созданные изображения сохраняются в папку ai-cache, и используются при следующих запросах.

На сайте adaptive images разработчик сообщает, что скрипт не будет работать совместно с CDN, т.е. с кэширующими прокси.

к содержанию ↑

Adaptive Images for WordPress: плагин для адаптивных изображений

Плагин можно бесплатно скачать из хранилища — Adaptive Images for WordPress.

Плагин создавался на основе скрипта adaptive-images и другого уже не развиваемого плагина, но, в последствии, как уверяет автор, был значительно переписан.

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

Adaptive Images Plugin Settings — WordPress

Есть экспериментальная опция для совместимости с CDN.

Что выбрать: оригинальный скрипт или плагин.

Есть смысл использовать плагин, так как он проще в установке, использовании, дорабатывается и обновляется под WordPress.

Стоит прочитать описание оригинального скрипта, чтобы понимать принцип работы.

Оставить комментарий

avatar
  Подписаться  
Уведомление о