Ако сте се опитвали да намалите времето за зареждане на сайта си, неизбежно сте търсили начин да намалите броя HTTP заявки към сървъра. Първата възможност, която ми идва наум е да използваме CSS Sprites, Стоян дори е направил полезен инструмент за генериране на общата картинка. Този похват обаче не е приложим във всички ситуации. На Шон Инман му е хрумнала друга идея – да използва data: протокола и да вкара картинките в CSS файла. По този начин HTTP заявките са намалени до минимум. В последната си публикация той представя идеята и представя CSS Cashier – с негова помощ можете да направите много неща със вашия CSS, едно от които е да вкара картинките в CSS файла и да го компресира за браузърите, позволяващи това.
Този похват също има недостатъци, CSS файла става доста голям, което прави първото зареждане на сайта по-бавно. Не всички браузъри поддържат data: протокола, освен това ако една картинка се използва за фон на няколко елемента, ще трябва за всеки от тях да повторите данните, което не е много ефективно. Независимо от естеството на вашия проект, накрая ще трябва да направите компромис между оптимизация, съвместимост с различни браузъри, лесна поддръжка. Изберете внимателно похватите за оптимизация, като оцените всички за и против.
Етикети: CSS, оптимизация
[…] Data URI – вече можем да вкараме например картинки директно в HTML или в CSS. […]