code

WebP: нов формат на изображението за уеб страници

Днес, скоростта на зареждане на уебсайтове, Това се превърна в една от най-важните корекции при оптимизиране на изображения за постигане на желаното 100/100, което ни предлага инструментът Google Page Speed ​​Insight.

Ето защо Google вече представи свой собствен безплатен формат на изображението през 2010 г. за уебсайтове по-бързо, обадено WebP. Нека да видим малко за какво става въпрос в този формат на изображението.

Какво е WebP?

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

Без загуби изображения WebP те са с 26% по-малки от PNG. Загубени изображения WebP са с 25-34% по-малки от сравнимите JPEG изображения с еквивалентен SSIM качествен индекс.

WebP Lossless поддържа прозрачност (известен още като алфа канал) на цена от само 22% допълнителни байта. За случаите, когато RGB компресия със загуби е приемлива, WebP Lossy също поддържа прозрачност, като обикновено осигурява 3 пъти по-малки размери на файлове в сравнение с PNG.

Как работи WebP?

Компресия WebP Lossy използва предсказуемо кодиране за кодиране на изображение, същия метод, използван от видео кодека VP8 за компресиране на ключови кадри във видеоклипове. Предсказуемо кодиране използва стойностите в съседни блокове от пиксели, за да предскаже стойностите в блок и след това кодира само разликата.

Компресия WebP Lossless използва предварително разгледани фрагменти от изображения, за да реконструира точно новите пиксели. Можете също да използвате локална палитра, ако не бъде намерено интересно съвпадение.

Да видим пример:

Изображение във формат PNG с тегло 53KB

Изображение във формат WebP с тегло 11KB

Изображението вляво, неговият формат е PNG и вече беше компресиран и адаптиран за мрежата с тегло от 53KB. Преобразувахме това изображение във формат WebP, и можем да оценим, че поддържа същите размери и не е загубил резолюция и въпреки това теглото му е 11KB.

Използвайте WebP нашите уеб страници ще ни помогнат да подобрим времето за зареждане и да предложим по-добро изживяване на нашите потребители.

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

Правилният начин да го направите е следният:

По този начин, ако браузърът позволява WebP, първо ще зареди този формат. В случай, че не знаете как да го интерпретирате, той ще зареди изображенията в jpg.

Уеб поддръжка

WebP се поддържа от Google Chrome, Firefox, Edge, браузър Opera и в много други софтуерни инструменти и библиотеки. The разработчици те също са добавили поддръжка за различни инструменти за редактиране на изображения.

WebP включва леката библиотека за кодиране и декодиране libwebp и инструменти за команден ред cwebp Y. dwebp за конвертиране на изображения във и от WebP формата, както и инструменти за преглед, смесване и анимиране на изображения WebP. Пълният изходен код е достъпен на официална страница за изтегляне на Google.

Другата алтернатива е да изтеглите предварително компилирания cwebp инструмент за преобразуване за Linux, Windows или Mac OS X.