Pull to refresh

Data URI изображения вместо спрайтов в Ruby on Rails

Reading time2 min
Views5.2K
dataURI-image

Кому?

  • Тем кто на Ruby on Rails.
  • Кто не использует спрайты изображений, но собирается на них переходить — и при этом считает это «замором и гимором».
  • Кто не собирается поддерживать IE6-7 (и 8) или знает все их прелести (да это легко поправить — но реально давайте уже их похороним).

Не освещено

  • Правильность написания «data URI» vs «data URL»
  • Тесты производительности — да здесь только теория


Оптимизация web-приложения (страницы, ресурса, портала — далее для краткости просто — приложение) напрямую зависит от количества запросов к серверу. Есть замечательная презентация по этой теме. В качестве оптимизации (уменьшения количества запросов к серверу) применяются спрайты с изображениями, т.е. группа изображений объединяется в одно — и после силами css показываются лишь отдельные его части. Это в свою очередь добавляет разработчику немало усилий — в том случае, если разработчик никогда не пользовался спрайтами, а только собирается на них переводить своё детище. В любом случае изображения, которые помещаются в спрайты, маловероятно, будут когда либо изменены — если конечно, не переделывать дизайн приложения вообще, т.е. не менять основной CSS-файл приложения. Но — зачем нам отдельный файл с изображениями, если можно использовать data URI?

Итак, стратегия


  • с необходимой фоновой картинкой вместо изображения (вместо )
    это позволит переместить все изображения в css-файл
    <input type=image ... /> с прозрачной основой и фоновой картинкой вместо изображения
    в качестве прозрачной основы используется однопиксельный прозрачный GIF
    склейка всех css в один
    меньше файлов — меньше запросов ( в RoR так и есть )
    css-файлу в конец md5-хэш
    удобно для разработки — меняется файл, меняется его имя ( в RoR так и есть )
    css-файлу в заголовке запроса: хранить год
    если файл не меняется — то храним его у клиента в кэше
Tags:
Hubs:
+5
Comments11

Articles

Change theme settings