Пълно ръководство за използване на WebP формат на изображението

WebP, или неофициално произнася се като weppy, е формат за изображения, представен от Google Developers преди около 5 години. ако сте уеб дизайнер или разработчик, който се стреми да намали и оптимизира размера на вашия графичен файл, това, на което WebP е способен, би трябвало да постави усмивка на лицето ви.

Накратко, ето някои от важните неща, които трябва да знаете за този не толкова нов, но все още хладен формат на изображението:

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

Накратко, WebP може значително да намали размера на файла с изображения в JPEG, GIF, PNG. Ето прессъобщение за WebP, което трябва да проверите, преди да отидем в забавните неща.

Експеримент

Най-добрите неща, свързани с твърденията в мрежата, са, че винаги можем да провеждаме експерименти, за да проверим истинността и автентичността. Ето някои експерименти, които направих, за да разбера колко малко изображение може да получи след преобразуването им от различни графични формати (JPEG, PNG и GIF) в WebP.

1. JPEG - Загубен образ

Ето случайно JPEG изображение, което взех от Pexels. Оригинален размер на файловете - 165kb. ↓

Изображението е оптимизирано с JpegMini. Нов размер на файловете - 101kb. ↓

И накрая, същото изображение се преобразува във формат WebP. Окончателна версия на файла - 70KB. ↓

На странична бележка: Ето различните файлове, ако едно и също изображение е конвертирано в следните формати:

GIF - 285kb
PNG 8 - 241.2kb
PNG 24 - 657.6kb

2. PNG - изображение без загуба

Сега нека опитаме с PNG с прозрачност. (Източник). Оригинален размер на файловете - 587kb. ↓

Ето изображението, оптимизирано с tinypng. Нов размер на файловете - 278kb. ↓

И накрая, изображението се преобразува във формат WebP. Окончателна версия на файла - 112kb. ↓

3. Анимирани GIF

Когато се конвертира в WebP, JPEG изображението е от 165kb до 70kb, докато PNG изображението е от 587kb до 112kb.

Нека да видим как се предлагат анимирани GIF файлове:

Оригинален размер на файла - 6.8mb
Размер на WebP файла - 6.3MB

Резюме:

Ето таблица, която обобщава целия експеримент:

	Загуба (JPG)	Без загуба (PNG)	Animated GIF-
оригинал	165kb	587kb	6.8mb
Оптимизиран с инструменти	101kb	278kb	-
WebP формат	70KB	112kb	6.3mb

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

Преобразуване в WebP с инструменти

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

WebPonize за Mac

WebPonize е може би най-простият и най-бързият начин за конвертиране на изображения във формат WebP на Mac. Всичко, което трябва да направите, е просто да плъзнете и пуснете вашите изображения в WebPonize и това ще направи конвертирането. Ще получите изхода, преди-размера, след-размера и% от намаляването на оригиналния файл. [Изтегляне на WebPonize]

Webpconv за Windows

Ако използвате Windows, Webpconv е приложението, което трябва да инсталирате. Той също така идва в преносима версия, така че можете да го стартирате независимо от флаш устройството. [Изтегли Webconv]

Преобразуване с командни линии

Ако се чувствате примамливи, вероятно ще искате да изключите преобразуването чрез командните редове. cwebp преобразува вашите JPEG, PNG или TIFF изображения във формат WebP и dwebp ги превръща обратно в PNG формат. Нека видим как работи това.

Забележка: Следващото ръководство за Mac OS X. За потребители на Windows и Linux кликнете тук.

Настройка на MacPorts на Mac OSX

Първо се уверете, че сте инсталирали Xcode, след което изпълнете следните стъпки:

Изтеглете и инсталирайте MacPorts. Ако вече сте инсталирали MacPorts във вашия Mac, преминете към стъпка 2.
хвърлям терминал.
Тип "самоуправление на судо портТова ще актуализира MacPorts до последната версия.
След това въведете „sudo порт инсталирате webp"и натиснете Enter. Това ще се инсталира libwebp (Уеб библиотека).

Това е. Сега нека разгледаме как да конвертирате изображения в WebP чрез команден ред.

Команди за конвертиране / връщане

Ето командите за:

I - Конвертиране на JPEG / PNG файлове с изображения във формат WebP

формат: cwebp -q [image_quality] [JPEG / PNG_filename] -o [име_на_файл]

пример:

cwebp -q 80 example.png -o example.webp

II - Прикриване на WebP файлове с изображения обратно към PNG

формат: dwebp [WebP_filename] -o [PNG_filename]

пример:

dwebp image.webp -o image.png

| Повече ▼: Ако прехвърляте конверсии чрез други средства, ето инструкциите за използване на Grunt и Gulp задачи за конвертиране на JPG / PNG файлове в WebP.

Конвертиране с онлайн инструменти

Ако не търсите инсталирането на приложения в операционната система, за да изпълните тази задача, изберете вместо тях тези онлайн инструменти. Ето няколко неща, които научих:

Online-converter.com
Webp-convertor.com
Zamzar

Бакшиш: Ако сте в Google конвертирате уеб онлайн , вероятно ще намерите още опции.

Добавка за Photoshop

Може да се радваме да знаете, че има и Photoshop Plugin, който ви позволява да запазвате изображения във формат WebP чрез Photoshop. Този плъгин поддържа Mac OS X (CS 2- CS 6) и Windows (32 бита и 64 бита). [Изтеглете плъгина тук.]

Забележка: Просто си помислих, че трябва да знаеш, че съм го изпробвал на Photoshop CC. Не работи там.

Поддръжка на уеб браузър

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

Chrome / Chrome за iOS
Opera / Opera Mini

Не толкова за късмет FireFox и сафари, които все още не поддържат WebP формат. Въпреки това, можете да използвате JavaScript библиотеката на WebPJS конвертирате WebP изображения в dataURI низ на сайта на клиента.

Върнете се към други формати на изображения

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

  source srcset = "example.webp 1x" type = "image / webp">

За този код, изображения / пълен-водач до използване-WebP образ-format_13.jpg ще бъде зареден, ако потребителят е използвал Firefox или Safari.

Предварителен преглед на WebP изображения

Можете да прегледате изображенията на WebP в браузъри Chrome и Opera. Но ако искате да го направите локално на вашата машина, ще ви трябват няколко инструмента.

Потребителите на Mac могат да използват WebPQuickLook за преглеждане на изображения във формат на WebP с помощта на функцията за бързо гледане (с избрано или осветено изображение, натиснете интервала).

За потребителите на Windows WebPCodec ще покаже миниатюрен преглед на изображения на WebP в File Explorer. Ще бъдат показани както WebP, така и JPEG еквиваленти. При някои поддържани операционни системи Window (Vista, 7, 8) изображението на WebP може да се покаже и в Windows Photo Viewer.

Повече ▼: ReSCR.it доставя изображения в WeBP формат автоматично и е налице, ако съхранявате вашите изображения с MaxCDN. (Прочетете още)

Допълнителни препратки

Преобразуване на анимиран GIF в WebP
Как работи WebP
Разполагане на WebP чрез Accept Content Negotiation
По-бързо, по-малко и по-красиво уеб с WebP
Разполагане на нови графични формати в мрежата
WebP API документация