Повне керівництво з використання формату зображення WebP

WebP, або неофіційно вимовляється як weppy, - це формат зображення, введений розробниками Google приблизно 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 - 285 кб
• PNG 8 - 241.2kb
• PNG 24 - 657.6kb

2. PNG - зображення без втрат

Тепер давайте спробуємо з PNG з прозорістю. (Джерело). Оригінал файлу - 587kb. ↓

Ось зображення оптимізовано за допомогою tinypng. Нові файли - 278 кб. ↓

І, нарешті, зображення перетворюється в формат WebP. Остаточний розмір файлу - 112kb. ↓

3. Анімовані GIF

При перетворенні в WebP зображення у форматі JPEG пройшло від 165 кб до 70 кб, а зображення PNG - від 587 кб до 112 кб.

Давайте подивимося, як анімовані тарифи GIF:

• Оригінальний розмір файлу - 6.8mb
• Розмір файлу WebP - 6.3mb

Підсумок:

Нижче наведена таблиця для узагальнення всього експерименту:

Без значних математичних розрахунків ці цифри вказують на суттєве зменшення розмірів файлів, і, судячи з зображень, ви не можете розрізнити їх з точки зору ясності та дозволу. Менші розміри файлів з меншим рівнем якості зображення, WebP, безумовно, варто розглянути.

Перетворення в WebP за допомогою інструментів

Якщо ви вже перебуваєте на борту і хотіли б почати випускати зображення у форматі WebP, давайте поринемо і подивимося, як можна легко конвертувати ваші зображення в цей формат. Всі наведені нижче методи відрізняються з точки зору контролю, простоти у використанні та зручності. Виберіть свою отруту.

WebPonize для Мак

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, а потім виконайте такі дії:

1. Завантажте та встановіть MacPorts. Якщо на комп'ютері Mac вже встановлено MacPorts, перейдіть до кроку 2.
2. Запуск Термінал.
3. Введіть "самообновлення порту sudo"і натисніть Enter. Це оновить ваш MacPorts до останньої версії.

   

4. Далі введіть "sudo порт установки webp"і натисніть Enter. Це встановить libwebp (Бібліотека WebP).

   

Це воно. Тепер давайте подивимося як конвертувати зображення в WebP за допомогою командного рядка.

Команди для перетворення / повернення

Нижче наведено команди для:

I - Перетворення файлів зображень JPEG / PNG у формат WebP

Формат: cwebp -q [image_quality] [JPEG / PNG_filename] -o [WebP_filename]

Приклад:

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 конвертувати webp онлайн , можливо, ви знайдете більше варіантів.

Додаток Photoshop

Ви можете бути раді дізнатися, що є також додаток Photoshop, який дозволяє зберігати зображення у форматі WebP через Photoshop. Цей плагін підтримує Mac OS X (CS 2 CS 6) і Windows (32 біт і 64 біт). [Завантажити плагін тут.]

Примітка: Просто подумав, що ви повинні знати, що я спробував його на Photoshop CC. Не працював там.

Підтримка веб-браузера

Нарешті, давайте поговоримо про сумісність. Наразі ви можете переглядати зображення формату WebP у таких переглядачах (посилання):

• Chrome / Chrome для iOS
• Opera / Opera Mini

Не так багато удачі для FireFox і Safari, які досі не підтримують формат WebP. Тим не менш, ви можете використовувати бібліотеку JavaScript JavaScript WebPJS конвертувати зображення WebP в рядок dataURI на сайті клієнта.

Поверніться до інших форматів зображень

Завжди варто використовувати запасний варіант, щоб уникнути помилок у зображеннях через непідтримувані браузери. У цьому випадку резервне зображення буде відображатися у форматі JPG або PNG. Ось як ви це робите.

  джерело srcset = "example.webp 1x" type = "image / webp">   

Для цього коду, images / full-guide-to-using-webp-image-format_13.jpg буде завантажено, якщо користувач використовував Firefox або Safari.

Перегляд зображень WebP

Можна переглядати зображення WebP в браузерах Chrome і Opera. Але якщо ви хочете зробити це локально на вашій машині, вам знадобляться кілька інструментів.

Користувачі Mac можуть використовувати WebPQuickLook для перегляду зображень формату WebP за допомогою функції швидкого перегляду (вибране або виділене зображення, натисніть пробіл).

Для користувачів Windows, WebPCodec відобразить мініатюру зображень WebP у Провіднику файлів. Будуть показані еквіваленти WebP та JPEG. У деяких підтримуваних ОС Windows (Vista, 7, 8) зображення WebP також може відображатися у засобі перегляду фотографій Windows.

Докладніше: ReSCR.it автоматично передає зображення у форматі WeBP і доступне, якщо ви зберігаєте зображення за допомогою програми MaxCDN. (Докладніше)

Подальші посилання

• Перетворення анімованих GIF в WebP
• Як працює WebP
• Розгортання WebP через Accept Content Negotiation
• Швидше, менше і красивіше з WebP
• Розгортання нових форматів зображень в Інтернеті
• Документація API WebP