Пълно ръководство за използване на 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 документация