WebP Görüntü Formatını Kullanma Komple Kılavuzu

WebP veya gayri resmi olarak ilan edildi weppy, Google Geliştiriciler tarafından yaklaşık 5 yıl önce tanıtılan bir resim formatıdır. Bir web tasarımcısıysanız veya görüntü dosya boyutunuzu küçültmek ve optimize etmek için çabalayan bir geliştiriciyseniz, WebP'nin yapabileceklerini yüzünüze gülümsemelisiniz.

Kısacası, işte bu kadar yeni olmayan ama yine de havalı görüntü formatı hakkında bilmeniz gereken bazı önemli noktalar:

WebP, .webp dosya uzantısına göre gider.
WebP hem kayıpsız hem de kayıpsız sıkıştırmayı benimser.
WebP kayıplı görüntüler potansiyel olarak JPEG'den% 25-34 daha küçük.
WebP kayıpsız görüntüleri potansiyel olarak PNG'ye kıyasla% 25 daha küçük.
WebP kayıpsız şeffaflığı, yani alfa kanallı PNG'yi destekler.
WebP, animasyonu destekler. yani, animasyonlu GIF'ler.

Özetle, WebP, JPEG, GIF, PNG'nin resim dosyasının boyutunu önemli ölçüde azaltabilir. İşte eğlenceli şeylere girmeden önce WebP’te bir tazeleme.

Bir deney

Web'deki hak talepleriyle ilgili en iyi şey, doğruluk ve orijinallik durumunu kontrol etmek için her zaman deneyler yapmamızdır. Bunu bulmak için yaptığım bazı deneyler bir görüntünün potansiyel olarak ne kadar küçük olabileceği çeşitli görüntü biçimlerinden (JPEG, PNG ve GIF) WebP'ye dönüştürüldükten sonra.

1. JPEG - Kayıplı Görüntü

İşte Pexels'ten aldığım rastgele bir JPEG görüntüsü. Orijinal dosya boyutu - 165KB. ↓

Görüntü JpegMini ile optimize edildi. Yeni dosya boyutu - 101kb. ↓

Son olarak, aynı görüntü WebP formatına dönüştürülür. Son dosya boyutu - 70kb. ↓

Bir yandan not: Aynı resim aşağıdaki biçimlere dönüştürülmüşse, farklı dosya boyutları şunlardır:

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

2. PNG - Kayıpsız Görüntü

Şimdi PNG ile şeffaflığı deneyelim. (Kaynak). Orijinal dosya boyutu - 587KB. ↓

İşte tinypng ile optimize edilmiş resim. Yeni dosya boyutu - 278KB. ↓

Ve son olarak, görüntü WebP formatına dönüştürüldü. Son dosya boyutu - 112kb. ↓

3. Hareketli GIF

WebP'ye dönüştürüldüğünde, bir JPEG görüntü 165kb'den 70kb'ye, PNG görüntü 587kb'den 112kb'ye çıktı..

Animasyonlu GIF’lerin nasıl ücretlendiğini görelim:

Orijinal dosya boyutu - 6.8mb
WebP dosya boyutu - 6.3mb

Özet:

İşte tüm denemeyi özetleyen bir tablo:

	Kayıplı (JPG)	Kayıpsız (PNG)	Animasyonlu GIF
orijinal	165KB	587KB	6.8MB
Araçlarla optimize edilmiş	101kb	278KB	-
WebP formatı	70kb	112kb	6.3MB

Matematiksel hesaplamalarda çok fazla durmadan, bu rakamlar dosya boyutlarında önemli bir azalma olduğunu ve resimlerden bakıldığında, netlik ve çözünürlük açısından farkı gerçekten söyleyemezsiniz. Aynı görüntü kalitesiyle daha küçük, daha hafif dosya boyutları, WebP kesinlikle araştırılmaya değer.

Araçlarla WebP'ye Dönüştürme

Zaten teknedeyseniz ve görüntüleri WebP formatında yayınlamaya başlamak istiyorsanız, resimlerinize kolayca bu formata nasıl dönüştürebileceğimize bakalım. Aşağıda belirtilen tüm yöntemler kontroller, kullanım kolaylığı ve uygunluk bakımından farklılık gösterir. Zehirini al.

WebPonize için Mac

WebPonize, görüntüleri Mac'teki WebP formatına dönüştürmenin en basit ve en hızlı yoludur. Yapmanız gereken tek şey, resimlerinizi WebPonize'e sürükleyip bırakmak ve dönüştürmeyi gerçekleştirmektir. Çıktıyı, önceki boyutu, sonraki boyutunu ve orijinal dosyanın azaltma yüzdesini alırsınız. [WebPonize İndir]

Webpconv için , Windows

Windows kullanıyorsanız, Webpconv yüklemeniz gereken uygulamadır. Ayrıca taşınabilir sürümde gelir, böylece flash sürücünüzde bağımsız olarak çalıştırabilirsiniz. [Webconv İndir]

Komut Satırlarıyla Dönüştürme

Geeky hissediyorsanız, muhtemelen komut satırlarını kullanarak dönüştürmeyi çıkarmak isteyebilirsiniz.. cwebp JPEG, PNG veya TIFF görüntülerinizi WebP biçimine dönüştürür ve dwebp Onları tekrar PNG formatına dönüştürür. Bakalım bu nasıl çalışıyor?.

Not: Aşağıdakiler Mac OS X için rehberlik eder. Windows ve Linux kullanıcıları için burayı tıklayın..

Mac OSX'te MacPorts'u Ayarlama

İlk önce, Xcode'un kurulu olduğundan emin olun, ardından aşağıdaki adımları izleyin:

MacPorts'u indirin ve yükleyin. Mac'inizde zaten yüklü MacPorts varsa, 2. adıma geçin..
Başlatmak terminal.
Yazın "sudo portu selfupdate"ve enter tuşuna basın. Bu MacPorts'unuzu en son sürüme günceller.
Sonra, "yazınsudo port yükleme webp"ve enter tuşuna basın. Bu yüklenecek libwebp (WebP Kütüphanesi).

Bu kadar. Şimdi bir bakalım komut satırını kullanarak görüntüleri WebP'ye dönüştürme.

Dönüştürme / Geri Alma Komutları

İşte komutlar:

I - JPEG / PNG görüntü dosyalarını WebP formatına dönüştürme

Biçim: cwebp -q [image_quality] [JPEG / PNG_dosya adı] -o [WebP_dosya adı]

Örnek:

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

II - WebP görüntü dosyalarını PNG'ye geri döndürme

Biçim: dwebp [WebP_dosyaadı] -o [PNG_dosyaadı]

Örnek:

dwebp image.webp -o image.png

Daha: Eğer dönüşümleri başka yollarla görürseniz, JPG / PNG dosyalarını WebP'ye dönüştürmek için Grunt ve Gulp görevlerini kullanma talimatı.

Çevrimiçi Araçlarla Dönüştür

Bu görevi gerçekleştirmek için işletim sisteminize herhangi bir uygulama yüklemeyi düşünmüyorsanız, bunun yerine bu çevrimiçi araçları seçin. İşte tanıdığım birkaç tane:

Online-converter.com
Webp-convertor.com
Zamzar

Bahşiş: Eğer google online webp dönüştürmek , Muhtemelen daha fazla seçenek bulacaksınız.

Photoshop Eklentisi

Görüntüleri Photoshop aracılığıyla WebP formatına kaydetmenize izin veren bir Photoshop Eklentisi bulunduğunu bilmek de memnun olabilir. Bu eklenti Mac OS X (CS 2- CS 6) ve Windows (32 bit ve 64 bit) yazılımlarını destekler. [Eklentiyi buradan indirin.]

Not: Photoshop CC'de denediğimi bilmen gerektiğini düşündüm. Orada işe yaramadı.

WebP Tarayıcı Desteği

Son olarak, uyumluluk hakkında konuşalım. Şu anda, WebP formatındaki görüntüleri aşağıdaki tarayıcılarda görüntüleyebilirsiniz (ref):

İOS için Chrome / Chrome
Opera / Opera Mini

İçin çok fazla şans yok FireFox ve Safari, hala yerel olarak WebP formatını desteklemiyor. Ancak, WebPJS Javascript kütüphanesini kullanabilirsiniz. WebP görüntülerini istemci sitesinde dataURI dizgisine dönüştürün.

Diğer resim formatlarına geri dönün

Desteklenmeyen tarayıcılar nedeniyle görüntü hatalarını göstermemek için geri dönüş kullanmak her zaman iyi bir fikirdir. Bu durumda, geri dönüş JPG veya PNG formatında görüntü olacaktır. İşte nasıl yapıyorsun?.

  source srcset = "example.webp 1x" tür = "görüntü / webp">

Bu kod için, images / tam-rehber-to-the-webp-görüntü-format_13.jpg kullanarak kullanıcı Firefox veya Safari kullanıyorsa yüklenir.

WebP görüntülerini önizleme

WebP görüntülerini Chrome ve Opera tarayıcılarında önizleyebilirsiniz. Ancak makinenizde yerel olarak yapmak istiyorsanız, birkaç araca ihtiyacınız olacaktır..

Mac Kullanıcıları, Quick Look işlevini kullanarak WebP formatındaki görüntüleri önizlemek için WebPQuickLook'u kullanabilir (görüntü seçili veya vurgulanmış durumdayken boşluk çubuğuna basın).

Windows Kullanıcıları için WebPCodec, Dosya Gezgini'nde WebP görüntülerinin küçük resim önizlemesini görüntüler. Hem WebP hem de JPEG eşdeğerleri gösterilecektir. Bazı desteklenen Windows işletim sistemlerinde (Vista, 7, 8), WebP görüntüsü Windows Fotoğraf Görüntüleyicisi'nde de gösterilebilir..

Daha: ReSCR.it görüntüleri otomatik olarak WeBP formatında sunar ve görüntülerinizi MaxCDN ile saklarsanız kullanılabilir. (Daha fazla oku)

Diğer referanslar

Animasyonlu GIF'i WebP'ye Dönüştürme
WebP nasıl çalışır?
İçerik Pazarlığını Kabul Et aracılığıyla WebP'yi dağıtma
WebP ile daha hızlı, daha küçük ve daha güzel web
Web’de Yeni Resim Formatlarını Dağıtma
WebP API Belgeleri