Panduan Lengkap untuk Menggunakan Format Imej WebP

WebP, atau secara tidak rasmi disebut sebagai weppy, adalah format imej yang diperkenalkan oleh Google Developers sekitar 5 tahun yang lalu. jika anda seorang pereka web, atau seorang pemaju yang berusaha untuk mengurangkan dan mengoptimumkan saiz fail imej anda, WebP yang mampu meletakkan senyuman di muka anda.

Ringkasnya, berikut adalah beberapa perkara penting yang perlu anda ketahui mengenai format imej yang tidak begitu baru-tetapi-masih-sejuk ini:

• WebP berjalan melalui sambungan fail .webp.
• WebP mengamalkan pemampatan lossy dan lossless.
• Imej lossy WebP berpotensi 25-34% lebih kecil daripada JPEG.
• Imej tanpa WebP berpotensi 25% lebih kecil berbanding dengan PNG.
• WebP menyokong ketelusan tanpa kehilangan, iaitu PNG dengan saluran alfa.
• WebP menyokong animasi. jadi GIF animasi.

Ringkasnya, WebP mampu mengurangkan saiz fail imej JPEG, GIF, PNG dengan ketara. Berikut adalah penyegaran di WebP anda perlu menyemak sebelum kita pergi ke perkara yang menyeronokkan.

Suatu kajian

Perkara terbaik mengenai tuntutan di Web adalah bahawa kami sentiasa boleh menjalankan eksperimen untuk melihat kebenaran dan keaslian. Berikut adalah beberapa percubaan yang saya lakukan untuk mengetahui berapa kecil imej yang berpotensi dapat diperoleh selepas mereka ditukar daripada pelbagai format imej (JPEG, PNG dan GIF) ke WebP.

1. JPEG - Image Lossy

Berikut adalah imej JPEG rawak yang saya ambil dari Peksel. Fail fail asal - 165kb. ↓

Imej difahami dengan JpegMini. Fail baru - 101kb. ↓

Akhirnya, imej yang sama ditukar kepada format WebP. Fail fail akhir - 70kb. ↓

Pada nota sampingan: Berikut adalah fail yang berbeza jika imej yang sama ditukarkan kepada format berikut:

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

2. PNG - Imej yang Tidak Hilang

Sekarang, mari cuba PNG dengan ketelusan. (Sumber). Fail fail asal - 587kb. ↓

Inilah imej yang dioptimumkan dengan tinypng. Fail baru - 278kb. ↓

Dan akhirnya, imej itu ditukar kepada format WebP. Fail fail akhir - 112kb. ↓

3. GIF animasi

Apabila ditukar kepada WebP, imej JPEG pergi dari 165kb ke 70kb, manakala imej PNG pergi dari 587kb ke 112kb.

Mari lihat bagaimana graf animasi GIF:

• Fail fail asal - 6.8mb
• WebP fail - 6.3mb

Ringkasan:

Berikut ialah jadual untuk meringkaskan keseluruhan eksperimen:

	Lossy (JPG)	Lossless (PNG)	Animasi-GIF
Asal	165kb	587kb	6.8mb
Dioptimumkan dengan alat	101kb	278kb	-
Format WebP	70kb	112kb	6.3mb

Tanpa mengira banyak pengiraan matematik, angka-angka tersebut menunjukkan pengurangan saiz fail yang besar, dan menilai imej, anda tidak boleh benar-benar memberitahu perbezaan dari segi kejelasan dan resolusi. Saiz fail yang lebih kecil, lebih ringan dengan tahap kualiti imej yang sama, WebP pasti bernilai dipertimbangkan.

Menukar ke WebP dengan Alat

Sekiranya anda sudah berada di atas kapal dan ingin melepaskan imej dalam format WebP, marilah masuk dan lihat cara anda boleh menukar imej anda dengan mudah ke format ini. Semua kaedah yang disebutkan di bawah ini berbeza dari segi kawalan, mudah digunakan, dan kebolehmampuan. Pilih racun anda.

WebPonize untuk Mac

WebPonize mungkin cara yang paling mudah dan paling cepat untuk menukar imej ke format WebP pada Mac. Apa yang perlu anda lakukan hanyalah seret dan lepaskan imej anda ke WebPonize dan ia akan melakukan penukaran. Anda akan menerima ouput, saiz sebelum saiz, dan saiz pengurangan fail asal. [Muat turun WebPonize]

Webpconv untuk Windows

Jika anda menjalankan Windows, Webpconv adalah aplikasi yang perlu dipasang. Ia juga datang dalam versi mudah alih supaya anda boleh menjalankannya secara berasingan pada pemacu kilat anda. [Muat turun Webconv]

Menukar dengan Baris Perintah

Sekiranya anda berasa geeky, anda mungkin mahu mengecualikan penukaran menggunakan baris arahan. cwebp menukarkan imej JPEG, PNG, atau TIFF anda ke dalam format WebP dan dwebp menukarnya kembali ke format PNG. Mari lihat bagaimana ini berfungsi.

Catatan: Panduan berikut untuk Mac OS X. Untuk pengguna Windows dan Linux, klik di sini.

Menyediakan MacPorts pada Mac OSX

Mula-mula, pastikan anda memasang Xcode, kemudian ikuti langkah-langkah berikut:

1. Muat turun dan pasang MacPorts. Jika anda sudah mempunyai MacPorts yang dipasang di Mac anda, terus ke langkah 2.
2. Pelancaran Terminal.
3. Taipkan "sudo port selfupdate"dan tekan Enter. Ini akan mengemas kini MacPorts anda ke versi terkini.

   

4. Seterusnya, taipkan "port sudo memasang webp"dan tekan enter. Ini akan dipasang libwebp (Perpustakaan WebP).

   

Itu sahaja. Sekarang mari kita lihat bagaimana untuk menukar imej ke WebP menggunakan baris arahan.

Perintah Tukar / Pulih

Berikut adalah arahan untuk:

Saya - Menukar fail imej JPEG / PNG ke format WebP

Format: cwebp -q [image_quality] [JPEG / PNG_filename] -o [WebP_filename]

Contoh:

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

II - Imej imej Covert WebP kembali ke PNG

Format: dwebp [WebP_filename] -o [PNG_filename]

Contoh:

dwebp image.webp -o image.png 

Lebih banyak: Jika anda menilai penukaran melalui cara lain, berikut adalah arahan untuk menggunakan tugas Grunt dan Gulp untuk menukar fail JPG / PNG ke WebP.

Tukar dengan Alat Dalam Talian

Jika anda tidak melihat memasang sebarang aplikasi pada sistem pengendalian anda untuk melaksanakan tugas ini, memilih alat-alat dalam talian ini sebaliknya. Berikut adalah beberapa yang saya tahu:

• Online-converter.com
• Webp-convertor.com
• Zamzar

Petua: Jika anda google menukar webp dalam talian , anda mungkin akan mendapati lebih banyak pilihan.

Plugin Photoshop

Anda mungkin gembira mengetahui bahawa terdapat juga Plugin Photoshop yang membolehkan anda menyimpan imej ke format WebP melalui Photoshop. Plugin ini menyokong Mac OS X (CS 2- CS 6) dan Windows (32 bit & 64 bit). [Muat turun plugin di sini.]

Catatan: Saya fikir anda harus tahu bahawa saya mencubanya di Photoshop CC. Tidak bekerja di sana.

Sokongan Penyemak Imbas WebP

Terakhir, mari kita bercakap tentang keserasian. Pada masa ini, anda boleh melihat imej format WebP pada penyemak imbas berikut (ref):

• Chrome / Chrome untuk iOS
• Opera / Opera Mini

Tidak banyak nasib FireFox dan Safari, yang masih tidak menyokong format WebP secara asli. Walau bagaimanapun, anda boleh menggunakan perpustakaan Javascript WebPJS ke menukar imej WebP ke dalam rentetan dataURI di laman web klien.

Jatuh kembali ke format imej lain

Adalah idea yang baik untuk menggunakan sandaran untuk mengelakkan daripada menunjukkan kesilapan imej kerana penyemak imbas yang tidak disokong. Dalam kes ini, sandaran akan kepada imej dalam format JPG atau PNG. Berikut adalah cara anda melakukannya.

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

Untuk kod ini, imej / lengkap-panduan-untuk-menggunakan-webp-image-format_13.jpg akan dimuatkan jika pengguna menggunakan Firefox atau Safari.

Pratonton imej WebP

Anda boleh pratonton imej WebP pada Chrome dan penyemak imbas Opera. Tetapi jika anda mahu melakukannya secara tempatan pada mesin anda, anda memerlukan beberapa alat.

Pengguna Mac boleh menggunakan WebPQuickLook untuk melihat imej format WebP menggunakan fungsi Pantas Pantas (dengan imej yang dipilih atau diserlahkan, tekan bar ruang).

Untuk Pengguna Windows, WebPCodec akan memaparkan pratonton imej kecil imej WebP dalam File Explorer. Kesamaan WebP dan JPEG akan ditunjukkan. Pada OS Tetingkap tertentu (Vista, 7, 8), imej WebP juga boleh ditunjukkan pada Windows Photo Viewer juga.

Lebih banyak: ReSCR.it menyampaikan imej dalam format WeBP secara automatik dan ia boleh didapati jika anda menyimpan imej anda dengan MaxCDN. (Baca lebih lanjut)

Rujukan lebih lanjut

• Menukar GIF Animasi ke WebP
• Bagaimana WebP berfungsi
• Menyebarkan WebP melalui Terima Rundingan Kandungan
• Lebih cepat, lebih kecil dan lebih cantik web dengan WebP
• Menggunakan Format Imej Baru di Web
• Dokumentasi API WebP