Продуктивност | Уеб сайт

Новите изображения: какво е WebP и каква е ползата от него?

Какво е webp?

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

Въпреки че съществува още от далечната 2010-та година, до ден днешен не е станал заместител на JPEG и PNG. Разбира се, за това има основателни причина, която е – недостатъчната му поддръжка от най-използваните браузъри по света. Според Can I Use в момента само Safari и Internet Explorer 11 не поддържат напълно формата за изображения. Firefox поддържат този тип компресия от 2019, което е цели 9 години по-късно. Единствено Chrome (Google са разработчиците на webp) най-рано започнаха поддръжката на собствения си формат на изображения.

Колко спестяваме с webp?

Краткият отговор на този въпрос е – спестяваме много. Но за да сме по специфични, ще покажем нагледно с няколко примера.

Важно е да се отбележи, че най-голям ефект се забелязва при компресиране на висококачествени оригинални изображения. Ако вземем едно оптимизирано изображение и го компресираме с webp, то няма да забележим толкова голяма разлика. Но ако вземем оригинална снимка от фотоапарат или прясно генерирано PNG, тогава ще има много по-голяма полза.

Експеримент

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

Оригиналното изображение – формат PNG, което ще оптимизираме в JPEG и WEBP

Преобразуване на изображение в webp?

Има много начини да преобразувате едно изображение от PNG в JPEG или в WEBP. За нашата демонстрация ще използваме командата convert, която е част от инструментите на imagеmagic. Ако ползвате Linux-базирана операционна система (и все още не сте се похвалили), то ще може да използвате същите команди от примерите.

Със следния скрипт генерираме 20 файла: по 1 изображение в JPEG и WEBP с качество от 10 до 100.

#!/bin/bash
 inputfilename="bulgarweb_bg.png"
 outputfile="bulgarweb_bg"
 for i in seq 10 10 100
 do
     filename="${outputfile}_q${i}"
     echo "Converting ${inputfilename} quality=${i}"
     convert -quality $i $inputfilename "${filename}.jpg"
     convert -quality $i $inputfilename "${filename}.webp"
 done

Резултати

А ето и резултатите от нашия опростен експеримент върху посочения по-горе скрийншот. Линковете в таблицата сочат към изображенията със съответния формат и качество:

Размер (байтове) JPEGРазмер (байтове) WEBPКачествоСпестено
757,549560,184100%26%
271,565144,32690%46%
160,05295,99880%40%
131,42778,32270%40%
113,12971,25460%37%
100,41064,85250%35%
88,80857,88240%34%
76,03150,16230%34%
60,47043,03020%28%
40,37536,32610%10%

Без да правим генерални заключения, тъй като сме използвали само едно единствено изображение, може да кажем, че WEBP успя да компресира изображението по-оптимално, отколкото JPEG.

Най-логичното, което може да направите, е да започнете да ползвате WebP във вашите сайтове. Така ще намалите размера на файловете, което съответно ще качи точките ви в популярните класации за скорост (Google PageSpeed, GTMetrix и други). И не на последно място – ще имате сайт, който използва модерни технологии.


Последвайте ни и във Facebook, където споделяме още интересно съдържание.

Подобни публикации

Вашият коментар

Вашият имейл адрес няма да бъде публикуван. Задължителните полета са отбелязани с *