Научете развитие в Frontend Masters
Когато създаваме PNG изображение, използваме етикет или CSS фон и това е всичко. Мъртво просто и гарантирано работи.
PNG е много по-лесен за използване в HTML от SVG
За съжаление, същото не може да се каже за SVG, въпреки многото му предимства. Въпреки че сте разглезени от избора, когато използвате SVG в HTML, той наистина се свежда до вграден и всичко със сериозни проблеми и компромиси.
Проблеми с вградения SVG
Ако вграждате SVG, губите възможността да използвате кеш на браузъра, Gzip компресия между сървъри и браузъри и индексиране на изображения на търсачката (вграденият SVG не се счита за изображение). Въпреки че изображението ви може да не се е променило с малко, те винаги се презареждат и това води до по-бавно време за зареждане на уебсайта ви, компромис, който повечето не са склонни да толерират.
Освен това вграждането на SVG също причинява сложни проблеми със зависимостта, при които не можете лесно да вмъквате изображения в HTML и трябва да прибягвате до скриптове (PHP или по друг начин). Когато имате повече от няколко изображения, това се превръща в огромен проблем, когато става въпрос за поддържане на вашия сайт, защото по същество вече не можете да използвате маркера.
Няма съмнение, че има области, в които вграденият SVG блести - тоест, ако искате изображенията ви да се показват бързо, без да чакате зареждането на други ресурси. Освен това, ясно е, че просто не можете да вградите всичко.
Проблеми с обектния маркер
SVG е добре известен със своето отлично качество, когато се показва на устройства с всякаква разделителна способност и способността му да се позовава на външни ресурси - като CSS и шрифтове - като същевременно поддържа размера на файла много малък. Идеята е да имате много SVG файлове, които всички споделят един CSS или един шрифт, за да намалите количеството ресурси, които трябва да изтеглите.
Митът за споделянето на ресурси
Неизвестно за мнозина, споделянето на външни ресурси за SVG се отнася само за вградения SVG. Тъй като използването на тагове позволява достъп до тези ресурси, възприятието е, че браузърът ще изтегли едно копие на вашия CSS, въпреки че имате много тагове, отнасящи се до един и същ CSS файл.
Това обаче изобщо не е вярно:
Множество обектни маркери ще изтеглят множество CSS
Проблемът усложнява факта, че маркерите не се разпознават като изображение и следователно индексирането при търсене на изображения не е възможно.
Допълнително усложняване на проблема са проблемите на зависимостта. Да приемем например, че имате 100 изображения и 25 от тях използват шрифт Roboto, други 25 използват Lato, 25 използват Open Sans, докато останалите използват комбинация от трите шрифта. Вашият CSS ще трябва да се позовава и на трите шрифта, защото е напълно невъзможно да се проследи кой файл използва кои шрифтове, което означава, че може да зареждате шрифтове, които може да не са ви необходими на определени страници.
Това ни оставя с етикета, който има много неща. Тъй като това е същият маркер, използван за други формати на изображения, получавате познания, кеширане в браузъра, компресиране на Gzip и търсене на изображения. Всяко изображение е самостоятелно, без проблеми със зависимостта.
SVG губи шрифтове, ако се използва с маркера
Единственият проблем е ще загубите шрифтовете си. За да бъдем по-точни, ако имате някакъв текст във вашия SVG, освен ако не вградите шрифтове, вашият текст ще се показва със системни шрифтове, обикновено Times New Roman. Прекарали сте часове в избор на красив шрифт, но в момента, в който използвате маркера за вграждане на SVG, всичко това се губи. Как може да бъде приемливо това?
Изследване на растеризацията на шрифтове
Първата ни реакция е да видим дали можем да извършим растеризация на шрифтове. Това е често използвана техника за преобразуване на шрифтове в пътеки, така че ще се визуализира добре на всички устройства и ще поддържа нулеви зависимости. На пръв поглед това работи много добре, а в редактора всичко изглежда перфектно.
Въпреки че растеризираният SVG влезе в огромна 137 KB в сравнение с 15,7 KB преди растеризацията бяхме оптимисти, защото след оптимизиране на SVG с помощта на Gzip компресия, растеризираният файл се намалява до 11 KB, малко по-малък от еквивалентния PNG при 11,9 KB.
| 15,7 KB | 137 KB | 11,0 KB |
| 11,9 KB | 26,5 KB | 42,6 KB |
Уви, след като вградим растризирания SVG в HTML, открихме, че нашият оптимизъм е преждевременен. Въпреки че може да изглежда страхотно на дисплеи с висока разделителна способност, качеството на дисплеите с ниска резолюция е неприемливо.
Растеризирани шрифтове отгоре и оригинални отдолу
В долната част на изображението е оригиналът, с ясно показани шрифтове, докато отгоре шрифтовете са пикселизирани с растеризация на шрифтове.
Разлика между типовете, когато се показва на екрани
Това, което се случва, е, че повечето операционни системи ще оптимизират шрифтовете, за да гарантират, че те се показват ясно и ясно на всички екрани. В Windows това се нарича ClearType и тъй като сме растрирали шрифтовете си, няма да бъдат приложени оптимизации, което води до размазан текст, особено видим на екрани с ниска разделителна способност.
Очевидно е, че намаляването на качеството е неприемливо, така че обратно към чертожната дъска.
Вграждане на шрифт за спасяване
Първоначално бяхме изключително скептични към вграждането на шрифтове, главно поради сложния работен процес.
За да вградите шрифтове в SVG, първо трябва да знаете какви семейства шрифтове се използват. След това трябва да намерите тези файлове с шрифтове и да ги изтеглите. Веднъж изтеглени, трябва да конвертирате обикновени, получер, курсив и получер курсив в Base64 кодиране. Ако го правите ръчно, е много невъзможно при голям брой файлове да разберете кой файл използва получер и кой не. След това трябва да копирате всичките четири кодирани низове Base64 във вашия SVG.
Със сигурност трябва да има по-добър начин. И затова изградихме Nano. Nano сканира SVG автоматично и вмъква само използваните шрифтове. Например, ако не се използва удебелен шрифт или ако не съществува текст, тогава няма да бъдат вградени шрифтове.
И все пак полученият файл е огромен и не е конкурентен с PNG еквивалента, затова се включихме и изградихме свой собствен SVG оптимизатор (Nano), който ще намали размера на SVG файла до струйка. (Вижте как Nano компресира SVG.) Освен това оптимизирахме и как вграждаме шрифтовете в SVG, което води до много малки размери на файла.
SVG изображение с текст, оптимизирано с Nano и вградени шрифтове
Сравняване на размерите на файловете и спестяванията на честотна лента
| Размер | 15,7 KB | 137 KB | 65,2 KB | 22,0 KB |
| Gzip | 3,57 KB | 11,0 KB | 44,5 KB | 11,7 KB |
| Размер | 11,9 KB | 26,5 KB | 42,6 KB |
| Gzip | 12,1 KB | 26,1 KB | 41,7 KB |
От горното можем да видим, че Nano произвежда SVG, който е изключително лек, дори и с вградени шрифтове, идващи в 11,7 KB (Gzipped) в сравнение с еквивалентния PNG @ 1x при 11,9 KB. Въпреки че това може да изглежда незначително, общата честотна лента, запазена на вашия сайт, със сигурност ще бъде значителна.
Да приемем, че 50% от трафика ви е с ниска разделителна способност, 40% е 2Х резолюция, а останалите 10% са 3Х резолюция. Ако вашият уебсайт има 10 000 посещения на едно изображение:
(5000 * 11,9 KB) + (4000 * 26,5 KB) + (1000 * 42,6 KB) = 208,1 MB
Ако използвате Nano, компресиран SVG с GZip:
10 000 * 11,7 KB = 117,0 MB
Това ще доведе до: 208,1 MB - 117,0 MB = спестявания от 91,1 MB или 43,7%, спестявания на честотна лента, значителна сума по всякакви мерки.
В допълнение към спестяването на честотна лента получавате далеч по-опростен работен процес, без да прибягвате до множество PNG изображения с множество srcset, с много по-добро качество, включително подобряване на шрифта на операционната система, за да гарантирате, че вашите изображения остават свежи и остри на устройства с всякаква резолюция. Най-доброто от всичко, по-добро потребителско изживяване за вашите потребители, тъй като сайтът ви ще се зарежда по-бързо - особено при устройства с висока разделителна способност.
Старателно тестване на Nano
Не сме доволни от всички спестявания, започнахме да търсим SVG изображения, за да тестваме щателно Nano. Общо 2,571 Използвани са SVG файлове с различни размери и дизайн, на обща стойност 16,3 MB. А след оптимизацията на Nano, което доведе до 6,2 MB, удивителни 61,8% спестявания в размера.
Малка селекция от над 2500 SVG изображения, използвани за тестване на Nano
Показване на визуална разлика
Поради огромния брой файлове, които тествахме и той се увеличава от време на време, трябва да изградим автоматизиран тест, включващ автоматично подчертаване на пикселните разлики преди и след оптимизацията. Едно от оплакванията на други SVG оптимизатори е фактът, че минимизирането на SVG може да повреди вашето изображение, което да го направи да се изобразява по различен начин в сравнение с оригинала.
За тази цел пренасяме диференциацията на пикселите в нашия автоматизиран тест в самия Nano. Тоест, Nano ще ви предупреди, ако установи, че SVG, което оптимизира, има пикселна разлика над 1% в сравнение с оригинала, поради което гарантира, че оптимизацията на Nano никога няма да наруши SVG.
Нано оптимизация, показваща визуална разлика
Тъй като шрифтовете са вградени и запазени, плюс SVG като векторен графичен формат, качеството на изобразяване във всяка резолюция е несравнимо с другите растерни формати.
Надяваме се, че нашата работа ще направи SVG по-лесен за използване навсякъде. Сега работим върху създаването на още по-малки размери на файлове, пренасяме нашите кодове, за да работим с Node.js, за да можете да автоматизирате своите производствени компилации с Nano, наред с други.
Мислите ли, че ще намерите Nano за полезен във вашите проекти? Кажете ми в коментарите!
- Отнасяйте се към Giardia по естествен начин, използвайки аюрведа за прочистване на паразитите - йога приключения в Аляска
- Най-добрите рецепти, използващи пушена риба
- Отслабване - Ще ви покажа как - Използване на инструментите на Кундалини йога и медитация от Джоан Бейкър
- Постигане на загуба на тегло с помощта на горчив лист - Nature Herbal Life, Inc.
- Какво е здравословна закуска с помощта на извара Здравословно хранене SF Gate