SVG Спрайтове
Мащабирането на изображение до спрайтове спестява трафик и намалява броя на HTTP заявките. Спрайтовете са много важни при изграждането на всеки уебсайт, особено с адаптивния дизайн за различни мобилни устройства.
Файловете SVG (Scalable Vector Graphics) са рядкост в интернет. Причини:
- SVG файловете не работят в по-старите версии на Internet Explorer 6-8
- Технологията е създадена през 1999 г. - изглежда стара и безинтересна
- Малко инструменти за векторно проектиране
- XML-базиран SVG означава много файлове.
SVG е идеален за лога, оформления и икони. За разлика от растерните изображения, SVG файловете могат да бъдат мащабирани до всякакъв размер без загуба на качество и манипулирани с помощта на клиентски и сървърни кодове. За разлика от иконите на уеб шрифтове, SVG файловете могат да имат различни цветове, градиенти и дори сложни филтри.
Спрайтове за растерни изображения
Създаването на спрайтове от изображения е добра техника сега. Ако трябва редовно да използвате графики на сайта, можете да ги поставите в едно изображение, а не в отделни файлове, например, на фигурата по-долу, спрайтовете на сайта pixel.com:
спрайт
Този пример съдържа множество икони и лога на ресурси в един файл 26 x 211px. Файлът може да бъде компресиран без загуба на качество, за да се намали теглото му, но основното предимство на спрайта е, че той изисква само една HTTP заявка за всички икони, а не множество заявки за всяка икона, ако те са отделни. Въпросът е, че отнема повече време за зареждане на иконите поотделно, тъй като браузърите имат ограничен брой паралелни заявки за един домейн.