fbpx
-0.3 C
София

Вектор? Растер? Защо не и двете

Оригиналът е на Zach Leatherman

Най-четени

Даниел Десподовhttps://www.kaldata.com/
Ежедневен автор на новини. Увличам се от съвременни технологии, оръжие, информационна безопасност, спорт, наука и концепцията Internet of Things.

Миналата седмица се сблъсках с интересен клас проблеми, за решаването на които сега ми се струва че би могло да се използва много по-удачен подход. Но дали наистина съществува подобен подход?

По-конкретно, става дума за изображение, което трябва да се използва в горната дясна част на сайта jamstackconf.com. Ние сме маркетинговият екип на Netlify и използваме Figma. Първият ми опит да взема оттам най-подходящото изображение изобщо не се оказа удачен.

Опит №1 – използване на SVG

Ето какви изображения получих, след като ги експортирах в SVG формат:

  • 10,1 MB – оригиналният SVG файл, който експортирах от Figma
  • 9,9 MB – такъв файл се получи, след оптимизацията с помощта на софтуерния инструмент SVGOMG (https://jakearchibald.github.io/svgomg)

Сега вече знам, че това всъщност са размерите на некомпресираните файлове, преди към тях да бъдат приложени алгоритмите за компресия.

Да напомним, че SVG (Scalable Vector Graphics – „мащабируема векторна графика“) е маркиращ език, базиран на XML, за описване на двумерна векторна графика с възможност за включване и на растерни изображения, създаден от W3C. С термина се обозначава и множеството от спецификации, дефиниращи езика. Поддържа както неподвижна, така и анимирана графика.  Разработва се още от 1999 година. През 2001-ва година излезе версия 1.0, а през 2011-та – версия 1.1, която е актуална и до днес. Сега се разработва версия 2.0.

Опит №2 – използване на PNG

  • 1,2 MB – такава е големината на PNG, оптимизиран с помощта на ImageOptim

Навярно всички вие се досещате, че няма да сложа изображение с размер 1,2 MB в толкова важно място на уеб-страницата. Ето защо реших по-сериозно да се заема с оптимизация. Важно е да уточня, че ми се налага да запазя канала за прозрачността на изображението. Идеята е, че ако се наложи да променя фоновия цвят на страницата, няма да ми се налага отново да оптимизирам изображенията. Този факт означава, че ние веднага се отказваме от JPEG формата.

ImageOptim
  • 831 KB – това се получи от PNG файла, след като бе оптимизиран с помощта на ImageOptim

Наистина се впечатлих от това, че буквално с един клик на мишката, ImageOptim намали с 400 KB моето изображения. Но все пак получените 831 KB са твърде много.

Squoosh

375 KB – това е размерът на PNG файла, оптимизирана с помощта на Squoosh (https://squoosh.app). Да уточня, че тук намалих цветовата палитра до 256 цвята.

Това вече е доста по-прилично и съвсем близо до необходимото. Опцията с намаляването на цветовата палитра (Squoosh (Reduce palette)) значително намалява крайното изображение. Направих някои експерименти с промяната на редица параметри на AVIF в Squoosh, но PNG форматът се оказа по-добър (уточнение, направено на 27 август тази година – обърнете внимание на точката „Опит №4 – AVIF).

Да уточним, че PNG (Portable Network Graphics) е много популярен графичен формат за изображения, които може да записва по 16,7 милиона цвята на пиксел, поддържа 24 и 48-битови изображения. Позволява да се включват канали на маски за управление на постепенна прозрачност. PNG по принцип е създаден като свободен и безплатен формат за замяната на GIF, както и за частична замяна на много по-сложния TIFF формат. Позициониран е за използване предимно в интернет. Основните преимущества на PNG в сравнение с GIF са следните: на практика неограничен брой на цветовете, опционална поддръжка на алфа канал, възможност за гама корекция, възможност за разширяване с помощта на потребителски блокове. 

Опит №3: използване на WebP

152 KB! – крайният WebP файл, оптимизирана с помощта на Squoosh, като са избрани параметри компресия без загуби и цветна палитра намалена до 256 цвята.

WebP е формат за компресиране на изображения , който има за цел да замени популярните формати (например JPEG и PNG), като намаля размера на файловете драстично, без осезаема разлика в качеството на изображението.

Опит №4: използване на AVIF

  • 168 KB – това е AVIF файла, оптимизиран с помощта на Squoosh при пълна цветова палитра

Уточнение от 27 август тази година. Тогава Джейк Арчибалд ми дойде много добър съвет, според който си струва отново да се пробва AVIF, но в режим компресия със загуби, без намаления в цветовата палитра. Стори ми се, че това е една много добра идея! Въпреки че намаляването на цветовата палитра дава значителна икономия по отношение размера на файла, това се отразява на крайното изображение и човешкото око съвсем ясно забелязва тази разлика. И така, моя неофициална цел стана получаването на AVIF с възможно най-високо качество при условие, че размерът на файла няма да превиши този, който използвах при WebP версията с намалена цветова палитра.

Необходимия резултат получих при използването на следните параметри:

  • Lossless : изключено
  • Quality: 45
  • Subsample Chroma: изключено
  • Effort: 6

Да уточним, че AVIF е сравнително нов формат за изображения в интернет, който компресира средно с 50% по-добре от JPEG. Ползите от тази компресия са следните:

  • 20% по-добре от WEBP
  • 50% по-добре от JPEG (но понякога JPEG компресира по-добре)

Средно AVIF компресира повечето изображения много по-добре.

Използването на AVIF (AV1 Still Image File Format) започна от зимата на 2019-та година едновременно с отворения видеокодек AOMedia Video 1 (AV1), специално предназначен за стриймване на видео в уеб пространството. По принцип AVIF използва софтуерните библиотеки за компресия на този видеокодек. Той записва данните на файловете в HEIF формат и компресира поредиците от изображения с помощта на AV1.

.AVIF поддържа:

  • HDR – висок динамичен обхват
  • Компресия без загуби, като разбира се много по-малки файлове се получават при използването на опцията за компресия със загуби
  • Различни цветови пространства
  • Зърнистост
  • Цветова субдискретизация – технология за кодиране на изображенията, при която измененията на различните оттенъци на цвета са по-малко важни от промените на яркостта.

Победителят: два отделни SVG слоя плюс AVIF/WebP/PNG

  • 74 KB + 4,2 KB: оптимизираните SVG слоеве и AVIF/WebP/PNG файла

Ако отделим тези части на изображението, които добре се описват с помощта на векторните инструменти (градиенти, линии и други подобни), и ги поместен в SVG слой, а всичко останало запишем в растерен формат, то можем да получим великолепни резултати, които са много по-добри от всичко описано дотук. Но когато използвах този метод, аз не направих всичко, което бе възможно. А именно – във векторния слой не прехвърлих всичко, което можеше да се прехвърли. Може някой да реши да използва същия подход, но да остави повече изображения на преден план, което може да е полезно, ако някой реши да разпечата тази уеб страница. Но едва ли в наши дни някой ще се занимава с разпечатването на уеб страници на принтер.

Двата слоя на изображението

Използвайки растерния слой за изображението от преден план, спомагателното векторно изображение зададох чрез CSS свойството background-image и по този начин стана възможно комбинирането на тези изображения. Може даже да бъде върнато оптимизираното растерно изображение обратно в SVG формат, във вид на Data URI, вмъкнат в <image>, но в крайна сметка реших да не правя така.

Крайните резултати

Тук, в една обща таблица по-нагледно съм показал описаните по-горе експерименти. Предполагам, че от оригиналното изображение с големина над 10 MB да се стигне до картинка с размер 78 KB една много добре свършена работа. Икономията е значителна, а уеб страницата се зарежда изключително бързо.

Метод Големина Съкращаване
Оригиналният SVG 10,06 MB  
SVG, оптимизиран с помощта на SVGOMG 9,92 MB -0,14 MB
PNG 1,16 MB -8,76 MB
PNG, оптимизиран с помощта на ImageOptim 831 KB -329 KB
PNG, оптимизиран с помощта на Squoosh (намалена палитра) 376 KB -455 KB
WebP, оптимизиран с помощта на (намалена палитра) 152 KB -224 KB
AVIF, оптимизиран с помощта на Squoosh (цялата палитра) 168 KB +16 KB
Двата слоя SVG (SVGOMG) и AVIF/WebP/PNG (Squoosh) 78 KB -900 KB

А вие оптимизирате ли изображенията в своите уеб-проекти?

Абонирай се
Извести ме за
guest
3 Коментара
стари
нови
Отзиви
Всички коментари

Нови ревюта

Huawei P50 Pro – възродена легенда

От днес актуалният флагман на китайския производител Huawei вече е наличен за предварителна поръчка в България. След забавяне, породено от редица причини, компанията размести...

Подобни новини