Знаете ли, че причина, поради която посетителите на вашия сайт да напуснат за секунда, е възможно да е снимка, която сте включили?
Защо ли?
Представете си, че влизате в даден уебсайт.
Скролирате надолу и вместо снимки виждате това:
Зарежда…………
Какво си казвате?
…Оф, няма да ви чакам цял ден.
И какво правите?
Напускате.
Крайният резултат?
Отивате в сайт на конкурент!
По същия начин ще постъпят и вашите потребители, ако снимките, които сте вградили в сайта са прекалено големи и не зареждат достатъчно бързо.
Тук идва на помощ той – WebP форматът!
Какво е WebP?
WebP е формат за изображения, който за разлика от добре познатите JPEG и PNG, намалява размерите на файла с от 20 до 40 %.
Първо няколко думи за JPEG и PNG форматите, за да разберете с какво се отличава:
JPEG ( Joint Photographic Experts Group )
JPEG е основен формат за цифрови изображения. Показва до 16 милиона цвята.
Той поддържа компресия със загуби (lossy compression), която премахва данни, които потребителите не могат да видят, за да превърне изображението в достатъчно малък файл, който спестява място за съхранение.
Това е хубава характеристика, но по-скоро за не толкова специални случаи, тъй като се жертва част от оригиналното качество на изображението.
Факт, който не е за подценяване, е възможността на JPEG да съхранява метаданни. Това могат да бъдат детайли относно място на зансемане и дата и също така настройки на фотоапарата.
JPEG може да се използва не само от фотографи, а и от уеб дизайнери/издатели. Тъй като размерите на файловете не са големи, потребителите получават бърз достъп до съдържанието на страницата без досадно зареждане.
Форматът е съвместим с повечето браузъри, софтуери и приложения.
PNG ( Portable Network Graphic )
PNG е универсален формат за изображения. Уеб дизайнерите го предпочитат, тъй като им дава възможност да обработвт снимки с прозрачен или полупрозрачен фон и да създават лога.
PNG е създаден като нов, по-добър формат на GIF.
Основните причини за това са ограниченията, че не можете да отворите GIF файловете с всеки софтуер, за да ги редактирате, без да ви е необходим лиценз, както и фактът, че поддържа само гама от 256 цвята.
С PNG тези органичения се премахват и също така той може да обработва до 16 милиона цвята.
Форматът използва компресия без загуби (lossless comression), която запазва всичките оригинални данни при компресиране. Това прави PNG файловете подходящи за изображения с детайли, защото не се губи важна информация и няма риск от изкривяване, щум и неясноти.
Недостатък на PNG файла е, че размерът му е много по-голям от този на JPEG. Това означава заемане на повече място на вашия компютър и повече време за зареждане на уеб страниците.
WEBP
source: techadvisor.com
Webp е нов, модерен формат за изображения, създаден от Гугъл. Почти всички браузъри го поддържат.
Целта му е да комбинира най-добрите характеристики на JPEG и PNG форматите и дори да добави още нещо.
Предимства
Webp поддържа както компресия със загуби, така и компресия без загуби.
Още повече, форматът включва „alpha channel“ за прозрачност, което означава, че може да компресира PNG изображения и да запази прозрачния фон. Друго предимство пред добре познатите формати, е фактът, че Webp поддържа анимация.
Webp е важен дори и от image seo гледна точка. Изображенията представляват повече от половината байтовe на уеб страниците. Това колко бързо ще зареди страницата се определя от размера на самата страница.
При мобилните устройства е много важно да използвате подходящ формат, тъй като по-малките изображения харчат по-малко батерия и използват по-малко честотна лента.
Също така, по-бързо зареждащи качествени снимки са за предпочитане от търсачките.
Следователно, използването на webp файлове може да ви донесе по-високо място в страницата с резултати, повече трафик, доволни клиенти и повече продажби.
Обърнете внимание, че потребителите няма да могат да направят разлика между това дали е jpeg или webp:
source: google webp gallery
Погледнете следното видео, представено от John Mueller (Search Advocate at Google) за съвети как да оптимизирате изображенията си за SEO:
Недостатъци
WebP е проектиран по-скоро за интернет пространството. При условие, че се нуждаете от изображение за офлайн употреба с перфектно качество, изберете някой от другите формати.
Казахме, че „почти“ всички браузъри са съвместими с webp. По-старите браузъри може да не са достатъчно ефективни, когато използвате този формат.
Конвертиране
В случай, че се нуждаете от библиотека с инструменти за webp файлове, Google имат такава за команден ред, наречена „libwebp“.
За да конвертирате изображение във формат WebP, използвате инструмента „cwebp“. Когато ви трябва обратната функция, се насочете към инструмента „dwebp“.
Други начини, чрез които да го направите биват:
- Плъгинът WebPShop за Photoshop;
- Онлайн WebP конвертери;
- Плъгините в WordPress;
- Imagemin WebP plugin;
- XnConvert.
Плъгини за генериране на webp формат за изображения в wordpress:
Imagify
Source: imagify.io
Imagify позволявa оптимизиране и конвертиране на изображения в WebP формат.
Имате възможността да обработвате безплатно 20 MB всеки месец без да ви струва нищо. Ако не ви е достатъчно, разгледайте техните платени планове.
С Imagify можете да преоразмерявате и компресирате изображения от основните формати, а също и от PDF формат. Imagify преоразмерява изображенията ви пропорционално, без риск от изрязване на някоя част.
В случай, че ви трябва да обработите много изображения наведнъж, можете да ползвате опцията “bulk optimize” или групово оптимизиране.
Можете да конвертирате изображения в модерния формат WebP, за да зарежда уебсайта ви много по-бързо.
За да конвертирате в Webp, това което трябва да направите, е просто да се уверите, че опцията „създаване на WebP версии на изображения“ е отбелязана. Толкова е лесно, защото плъгинът оптимизира изображенията ви автоматично.
Тъй като старите браузъри не са съвместими с WebP, с Imagify можете да разполагате както с оптимизирани версии на изображенията ви в оригинален формат, така и с версии конвертирани в WebP формат.
По този начин, ако браузърът поддържа WebP, плъгинът ще показва тази версия на изображенията, а ако не -оптимизираният формат.
С Imagify сте способни да конвертирате GIF в WebP, JPEG в WebP и PNG в WebP.
Imagify посочват, че след обработка с плъгина файлът има значително по-малък размер, зарежда се по-бързо и качеството се запазва:
- Време за зареждане
Неоптимизирани изображения – 1.3 s
След обработка с imagify – 0.3 s
- Размер на файл
Неоптимизирани изображения JPG формат – 1.2 MB
След обработка с imagify – 0.4 MB
- Качество на изображението
Неоптимизирани изображения – страхотно качество
След обработка с imagify – страхотно качество
От youtube канала „WP Wiki – Optimize WordPress“ са направили лесен за разбиране tutorial за това как да ползвате Imagify:
EWWW Image Optimizer
С EWWW Image Optimizer нямате ограничения на скоростта и можете да обработвате файлове с огромни размери.
Предлага Premium функция за компресиране на JPG, PNG и PDF файлове, която запазва перфектно качество.
Оптимизаторът има интелигентни опции за конвертиране, които гарантират вие да получите точния формат на изображението, от което се нуждаете (WebP, GIF, JPEG или PNG).
Плъгинът като цяло е безплатен. Ако искате да имате достъп до още допълнителни функции и до 80% конверсия, ще трябва да платите за тях.
Освен своята медийна библиотека в WordPress, вие можете да оптимизирате и всички останали снимки на вашия сайт.
Вместо да обработвате изображенията си едно по едно, с оптимизатора можете да компресирате всички накуп (bulk optimize).
Също така, EWWW Image Optimizer гарантира сигурни операции, защитени с SSL криптиране.
В случай, че се затрудните с нещо, винаги може да изпратите въпрос до екипа им за поддръжка.
Плъгинът има способността да компресира автоматично изображения, както и да им променя размера с цел те да паснат на страницата и устройството.
Нещо повече, може да зарежда изображения с така наречения “lazy loading” и да ги преобразува в webp файлове.
Още една функция, която не е за изпускане, е съхраняването на резервни копия на вашите оригинални изображения до 30 дни.
WebP Converter for Media
Source: wordpress.org
WebP Converter for Media ви позволява да конвертирате файлове от JPEG, PNG и GIF формат в WebP и AVIF формати. По този начин спестявате голяма част от размера на страницата ви, без да жертвате високото качество.
Всички нови изображения, които добавяте към медийната библиотека в WordPress, се конвертират автоматично.
Оптимизаторът запазва вашите оригинални изображения без да ги променя.
Както при Imagify, плъгинът се уверява, че браузърът поддържа webp image и тогава зарежда тази версия на изображението.
WebP Converter for Media не прави пренасочвания в режим по подразбиране и URL адресът винаги е еднакъв.
Това премахва евентуални проблеми с кеша и осигурява по-бърза работа на вашия уебсайт.
В случай, че искате да премахнете плъгина, бъдете сигурни, че той ще премахне всичко и няма да остави следи.
Свързани статии:
- Да използваме или не WordPress за изработката на нашия сайт през 2022
- Как да направим по-добър онлайн магазин