[FreeWare] Скрипт для помещения изображений внутрь css файла. Повышает SEO сайта.

[wwwww]

Набросал скрипт для загрузки нескольких изображений в одном css файле. Инструкция по использованию в архиве.

Название: dataURL_css
Автор: vlad77
Описание: Этот скрипт помещает картинки внутрь css файла. Тем самым уменьшает количество DNS запросов при открытии страницы. Увеличивая SEO сайта. Объем передаваемых данных увеличивается примерно на треть, но если включить gzip компрессию (опция скрипта), то объем будет меньше, чем у картинок по отдельности. Инструкция по установке в архиве.
Версия: 1.0.3

Title: dataURL_css
Author: vlad77
Description: This script places pictures inside css a file. That reduces quantity DNS of inquiries at opening page. Increasing SEO a site. The volume of passed data increases about by a third but if to include gzip a compression (an option of a script) the volume will be less, than at pictures separately. The instruction on installation in archive.
Version: 1.0.3

 

[ol9ol9ol9]

Набросал скрипт для загрузки нескольких изображений в одном css файле. Инструкция по использованию в архиве.

Название: dataURL_css
Автор: vlad77
Описание: Этот скрипт помещает картинки внутрь css файла. Тем самым уменьшает количество DNS запросов при открытии страницы. Увеличивая SEO сайта. Объем передаваемых данных увеличивается примерно на треть, но если включить gzip компрессию (опция скрипта), то объем будет меньше, чем у картинок по отдельности. Инструкция по установке в архиве.
Версия: 1.0.1

Title: dataURL_css
Author: vlad77
Description: This script places pictures inside css a file. That reduces quantity DNS of inquiries at opening page. Increasing SEO a site. The volume of passed data increases about by a third but if to include gzip a compression (an option of a script) the volume will be less, than at pictures separately. The instruction on installation in archive.
Version: 1.0.1

А не проще использовать протокол http/2, по этому протоколу все запросы сайта грузятся в одном потоке (css,js,images...)

 

[mr-graffity]

А собственно в чем повышение? Открой любой крупный интернет магазин, там картинки в классическом виде размещаются.

 

[wwwww]

SEO рекомендует объединять файлы изображений в один файл, так же объединять в один файл подгружаемые css и js. В данном случае css стили и изображения объединены в общий файл (на один подгружаемый файл меньше).
Гугл вебмастер тоже рекомендует объединять картинки в один файл. Это более простая альтернатива css спрайтам. Не требуется делать css спрайты в фотошопе и не требуется знание css.

У меня после установки этого скрипта, рейтинг сайта в Для просмотра ссылки Войди или Зарегистрируйся повысился на несколько пунктов. По видимому, благодаря уменьшению количества изображений (с точки зрения Гугла) и ускорению времени загрузки страниц.

На всякий случай поясню. Этот скрипт удобная альтернатива css спрайтам. Использовать его надо так же, как css спрайты. Не поддерживается тег "alt", картинки не попадут в поиск изображений, большие изображения размещать на сайте с помощью скрипта не надо. Удобно использовать для повторяющихся на разных страницах небольших изображений.

P.S. На этом форуме обнаружены css спрайты Для просмотра ссылки Войди или Зарегистрируйся , с помощью данного скрипта, можно сделать то же самое, но проще.

 

[Black#FFFFFF]

то есть вы изобретаете Google Pagespeed? Ну - ну. О всех "альтернативах". Тут как бы бабушка на двое сказала. Подробнее: если преобразовывать картинки к base64, то это на 30% больший размер. В случае со спрайтами это оправдано, когда сам размер картинок мал. И тогда количество запросов к серверу меньше, а сам css файл разрастается незначительно. Те же Jpeg можно пережать, вывести на внешнее облако, подать серверные заголовки для принудительного длительного кэширования, кешировать средствами Nginx. При помощи srcset можно заставить каждое устройство грузить свою картинку. Например: для мобильников будут подаваться картинки меньшего разрешения и объема. И наконец сжать в вэб формат тем же pagespeed. Сделать отложенную асинхронную загрузку! А вот при этом кодированный css файл тот же gzip особо и не сожмет. Жутко большой файл уже асинхронно не загрузишь. Он будет ползти в один поток, парализуя загрузки остальных файлов, идущих после него. И размер кэша браузера обычно лимитирован.

 

[wwwww]

В сообщении на которое вы ответили написано, что это скрипт для спрайтов

Этот скрипт удобная альтернатива css спрайтам

В первом сообщении этой темы про gzip компрессию уже написано. Конечно я замерял на сколько сжимает gzip.

Объем передаваемых данных увеличивается примерно на треть, но если включить gzip компрессию (опция скрипта), то объем будет меньше, чем у картинок по отдельности.

В предыдущем сообщении написано, что скрипт рекомендуеется использовать для небольших изображений

Удобно использовать для повторяющихся на разных страницах небольших изображений.

Наконец в скрипте можно настроить браузерное кэширование, не имея доступа к настройкам сервера Nginx.

Помещать картинки во внешнее облако нельзя, это замедлит время загрузки страницы и приведет к утеканию PR и ТИЦ с сайта, в это самое облако.

 

[wwwww]

Version 1.0.2

Добавлены костыли для старых MSIE: background-position:center center; и a {cursor:hand;}
Архив перезалит.

Про иексплорер. Мне доступен для тестирования ИЕ8. В более старших версиях все должно быть в порядке. Если кому нужно полное соответствие отображения в старых ИЕ, как в остальных браузерах, то в них контейнер с изображением немного смещается вниз и теряются пробелы после контейнера. Лечится добавлением style="vertical-align: top". и заменой пробела на неразрывный пробел, на  
Но не думаю, что кому-то это понадобится.

 

[Trytone]

Ох какую больную тему Вы тут затронули.. Сколько я в своё время натр@х*лся и с кешированиями, и со сжатиями и с отдачей заголовков и со спрайтами, и с http2 speedy, и со ужатием картинок.

Но в итоге - интернет работает всё быстрее, и многое из этих оптимизаций даже не чувствуется конечным пользователем.
Глюки, которые ловятся из-за "мощного" кеширования - иногда блокируют работу форм, куков и скриптов.
Шаблоны стали проще (мода такая пошла) - никаких десятков мелких картинок нарезеннах в фотошопе.
Иконки - и те можно в виде шрифта подгружать.
Мода на векторную графику опять возрождается - достаточно посмотреть любые презентации Яндекса - сплошные svg файлы, причём иногда встроенные в стили, но чаще в сам код страницы встраивают.
В общем со всеми этими оптимизациями надо как-то поаккуратнее быть.
Проще сервер помощнее поставить и отдавать всё nginx'ом.

 

[Upyachki]

>> интернет работает всё быстрее, и многое из этих оптимизаций даже не чувствуется конечным пользователем.
Вы забываете про тренды MobileFirst AMP PWA, турбо страницы и прочее.

 

[steelgray9]

полезно, но только если у тебя на сайте куча маленьких картинок. тогда съекономиш соединений для загрузки другого контента.

а так для средних / больших файлов размер даже больше будет