Какво е WebP и как да ускорим WordPress като намалим размера на снимките с до 35%

Ако искаш да ускориш своя WordPress сайт, намаляването на размера на изображенията е една голяма стъпка в тази посока. Средно изображенията представляват около половината от размера на уеб страницата, така че дори малките подобрения могат да доведат до големи резултати.

WebP е модерен формат на изображението, който може да помогне за намаляване размера на снимките, без да се променя качеството. Конвертирането на изображение в WebP може да намали размера му с ~ 25-35% без видима загуба на качество.

Ето защо ще разгледаме по-подробно форматът WebP в тази статия!

Какво е WebP?

Що се отнася до запазването на изображения за използване в интернет, има редица типове файлове, които можете да се използват. Трите най-често срещани формата са PNG, JPEG (или JPG) и GIF. Въпреки че тези формати са популярни, всеки има своите плюсове и минуси:

• JPEG могат да показват изображения с много детайли, с много цветове, което ги прави идеални за снимки. В същото време файловете често са много големи и не винаги се държат добре при компресия.
• PNG са идеални за изображения без много данни, като лога или екранни снимки на интерфейса, икони. Те отлично запазват качеството при компресиране и поддържат прозрачност, но не работят добре за снимки.
• GIF файловете са отлични за анимации, но не и за запазване на статични изображения.

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

За да постигне това, WebP предоставя опции за компресиране както със „загуба“ (lossy), така и „без загуба“ (lossless). Последният запазва повече данни, докато първият прави размерите на получените файлове още по-малки.

Според данните на Google, WebP изображенията са средно с:

• 25-34% по-малък размер от сравними JPEG изображения.
• 26% по-малък размер в сравнение с PNG.

Ето защо, ако тестваш сайта си чрез PageSpeed Insights, една от многото препоръки е да се използват изображения във формати от следващо поколение като WebP:

Как WebP постига намаление в размера на файла?

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

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

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

Ако искаш да научиш повече за техниките за компресиране на WebP, тази статия е добра отправна точка.

Как WebP допринася за по-бързото зареждане на WordPress?

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

Файловете с изображения заемат място – без значение в какъв формат са запазени. Колкото повече изображения и други медийни файлове се добавят към сайта, толкова по-голям е шансът за увеличаване скоростта на зареждане. Поддържането на бързо зареждане на страниците е изключително важно, тъй като бавните сайтове отблъскват посетителите преди дори да са видели какво се предлага. Освен това скоростта на зареждане на един уебсайт вече се счита за ранкинг фактор от Google.

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

Изображенията, запазени във формат WebP, могат да бъдат значително по-малки от JPEG и PNG с едно и също качество. WebP изображенията без загуби функционират като заместител на PNG и файловете са с около 26% по-малки. Компресирането със загуби при WebP изображенията от друга страна са с около 25-34% по-малки от JPEG.

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

? Научи повече за: Оптимизация на изображения.

Кои браузъри поддържат WebP?

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

WebP изображенията се поддържат от почти всички браузъри като:

• Chrome
• Firefox
• Edge
• Opera
• Safari – има частична поддръжка на WebP като изискването е да се използва macOS 11 Big Sur и следващите версии.
• Internet Explorer – не поддръжа WebP (но Edge поддържа WebP, тъй като е базиран на Chromium).

Как да използваме WebP изображения в WordPress?

До сега, WordPress не поддържа нативно снимки във формат WebP – тоест не може да бъдат ъплоуднати в Media като PNG/JPG, тъй като не всички браузъри поддържаха този файлов формат. За да използвате WebP в WordPress с версия до 5.7 е нужно да се използва плъгин:

• ShortPixel
• Imagify
• Optimole

WordPress 5.8 обаче предстои да излезе и най-хубавото е че ще поддържа WebP. ???

Създаване на WebP изображения

Инструментите за редактиране на изображения като Photoshop поддържат експортиране в WebP. Също така може да се използват и уеб базирани инструменти като Squoosh. След като запазиш изображенията си като WebP, ще може да ги качиш в WordPress и да ги използваш както всяко друго изображение.

Използване на WebP в WordPress

WebP изображенията работят като всяко друго изображение в WordPress с някои малки бележки.

WebP изображенията поддържат компресия със загуби и без загуби, както и анимиран формат и прозрачност. В WordPress форматът WebP без загуби се поддържа само когато хостинг сървърът използва Imagick, докато LibGD добави поддръжка за WebP. Освен това анимираните и алфа форматите все още не се поддържат за преоразмерени изображения (вместо това се създават изображения със загуби, когато се качвате в тези формати).

Поддръжката на WebP в медийната библиотека на WordPress изисква библиотеката за обработка на изображения на уеб сървърa (WordPress поддържа както Imagick, така и LibGD) да поддържа формата WebP. За щастие тези библиотеки поддържат WebP от доста време, така че поддръжката е широко достъпна. Ако твоят уеб сървър не поддържа WebP, ще видиш съобщение за грешка при опит да се качи изображение в WebP формат.

Ако твоите посетители използват предимно неподдържани браузъръ (като IE11 например) най-добре е да се избягва използването на WebP изображения.

WordPress планират в бъдеще да се използва WebP като формат на изображенията по подразбиране като при качване на PNG/JPG то да се конвертира автоматично в WebP.

Често задавани въпроси ✌️

Финални думи

Какво е WebP? Това е файлов формат за изображения, който има потенциал да ускори уебсайта ти като намали размера на изображенията дори повече, отколкото с помощта на компресирани PNG или JPEG файлове. WebP се предлага компресиране със загуби и без загуби, с по-малък размер на файла и със сравнително качество като при PNG/JPG.

? Научи повече за нашата услуга по Оптимизация за скорост на WordPress и WooCommerce.