Размещение фоновых изображений в другом месте

Раньше я обычно размещал все свои изображения (используемые как в качестве фоновых элементов CSS, так и встроенных изображений, вставленных в разметку) в одной папке с именем, например, images или img. Однако если вы применяете Adaptive Images, то изображения, используемые через CSS в качестве фоновых (или любые другие изображения, размеры которых должны оставаться без изменений), рекомендуется размещать в другом каталоге. Adaptive Images по умолчанию определяет папку с именем assets для хранения изображений, размеры которых не должны изменяться. Следовательно, если вы хотите, чтобы какие-либо рисунки не меняли своих размеров, добавляйте их в эту папку. Если вы решите использовать папку с другим именем (или несколько папок), то внесите следующие изменения в файл. htaccess:

<IfModule mod_rewrite. c>

Options +FollowSymlinks RewriteEngine On

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

RewriteCond %{REQUEST_URI} lassets RewriteCond %{REQUEST_URI}ibkg

# 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>

В примере мы указали, что не хотим, чтобы изображения, располагающиеся в каталоге assets или bkg, адаптировались. И наоборот, если вы хотите, чтобы адаптировались только изображения, расположенные в определенных папках, то не указывайте восклицательный знак в правиле. Например, если бы я захотел, чтобы адаптировались только изображения в подпапке моего сайта, носящей имя andthewinnerisnt, то мне потребовалось бы отредактировать файл. htaccess следующим образом:

<IfModule mod_rewrite. c>

Options +FollowSymlinks RewriteEngine On

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

RewriteCond %{REQUEST_URI} andthewinnerisnt

# 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>

Вот и все. Наиболее легкий способ проверить, что все работает, — вставить большое изображение на страницу, а затем зайти на нее со смартфона. Если вы

Взглянете на содержимое своей папки ai-cache в FTP-клиенте, то увидите файлы и каталоги в папках, связанных с контрольными точками, например 480 (рисунок 3.15).

Содержимое папки ai-cache.

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