Новите изображения: какво е WebP и каква е ползата от него?
Какво е webp?
WebP е формат за компресиране на изображения (картинки), който има за цел да замени популярните формати (например JPEG и PNG), като намаля размера на файловете драстично, без осезаема разлика в качеството на изображението.
Въпреки че съществува още от далечната 2010-та година, до ден днешен не е станал заместител на JPEG и PNG. Разбира се, за това има основателни причина, която е – недостатъчната му поддръжка от най-използваните браузъри по света. Според Can I Use в момента само Safari и Internet Explorer 11 не поддържат напълно формата за изображения. Firefox поддържат този тип компресия от 2019, което е цели 9 години по-късно. Единствено Chrome (Google са разработчиците на webp) най-рано започнаха поддръжката на собствения си формат на изображения.
Колко спестяваме с webp?
Краткият отговор на този въпрос е – спестяваме много. Но за да сме по специфични, ще покажем нагледно с няколко примера.
Важно е да се отбележи, че най-голям ефект се забелязва при компресиране на висококачествени оригинални изображения. Ако вземем едно оптимизирано изображение и го компресираме с webp, то няма да забележим толкова голяма разлика. Но ако вземем оригинална снимка от фотоапарат или прясно генерирано PNG, тогава ще има много по-голяма полза.
Експеримент
Започваме теста, като си избираме висококачествено необработвано изображение. Цъкнете върху него, за да го видите в пълен размер:
Преобразуване на изображение в 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,549 | 560,184 | 100% | 26% |
| 271,565 | 144,326 | 90% | 46% |
| 160,052 | 95,998 | 80% | 40% |
| 131,427 | 78,322 | 70% | 40% |
| 113,129 | 71,254 | 60% | 37% |
| 100,410 | 64,852 | 50% | 35% |
| 88,808 | 57,882 | 40% | 34% |
| 76,031 | 50,162 | 30% | 34% |
| 60,470 | 43,030 | 20% | 28% |
| 40,375 | 36,326 | 10% | 10% |
Без да правим генерални заключения, тъй като сме използвали само едно единствено изображение, може да кажем, че WEBP успя да компресира изображението по-оптимално, отколкото JPEG.
Най-логичното, което може да направите, е да започнете да ползвате WebP във вашите сайтове. Така ще намалите размера на файловете, което съответно ще качи точките ви в популярните класации за скорост (Google PageSpeed, GTMetrix и други). И не на последно място – ще имате сайт, който използва модерни технологии.
Последвайте ни и във Facebook, където споделяме още интересно съдържание.
