More

    Apa itu WebP? dan Apa Kelebihan dan Kekurangan WebP

    Pada artikel sebelumnya saya sudah membahas tentang Cara Mengubah Gambar Menjadi WebP di WordPress. Dimana, tujuan dari tutorial tersebut adalah kita akan mengubah format PNG atau JPG menjadi for WebP ketika diupload ke media wordpress. Webp (atau biasa yang dibaca webpi) adalah format gambar digital terbaru dari Google. Webp, atau bisa dibaca Weppi sebenarnya sudah dikembangkan sejak 30 September 2010. Namun, karena banyak perangkat yang belum mendukung untuk format tersebut, sehingga kurang dikenal luas. Ekstensi WebP masih kalah populer dibanding ekstensi lainnya seperti PNG, JPEG dan GIF.

    Pada umumnya format gambar itu ada PNG, JPG, JPEG dan GIF. Dan dari beberapa ekstensi gambar memiliki kekurangan dan kelebihan, misalnya:

    • PNG ideal untuk gambar yang tidak terlalu melibatkan banyak data misalnya logo atau hasil screenshot. Format ini mampu mempertahankan kualitas gambar saat dikompresi, dan mendukung transparansi. Namun, format ini kurang bagus untuk fotografi.
    • JPG/JPEG merupakan format yang dapat menampilkan gambar yang sangat detail dengan banyak warna. Format ini sangat cocok untuk fotografi. Namun, ukuran filenya cenderung lebih besar dari format yang lain dan hasilnya kurang baik bila dikompresi. Selain itu, format JPEG tidak mendukung transparansi.
    • GIF sangat baik untuk gambar animasi sederhana, dan ukuran filenya lebih kecil dari format lainnya. Namun, GIF kurang bagus untuk gambar statis.

    Oleh karena itu, google mengembangkan sendiri ekstensi gambar yang akan ditampilkan di website, dengan mengembangkan gambar dengan form webp. Google merancang webp untuk memungkinkan kita menampilkan gambar di web dengan kualitas yang sama dengan format gambar yang ada, tetapi dengan ukuran file yang lebih kecil.

    Secara ukuran, memang webp ini mempunyai ukuran hingga 80% lebih kecil dari pada ekstensi lainnya. Anda bisa lihat dari perbandingan berikut ini:apa itu webp

    Dengan kualitas yang sama, anda bisa menghemat ukuran gambar dengan 80% WOW!!

    apa itu webp

    Apa itu WebP? dan Apa Kelebihan dan Kekurangan WebP

    Kelebihan WebP

    Seperti yang sudah saya katakan sebelumnya, format ini dibuat untuk menyediakan opsi yang lebih baik untuk menampilkan gambar pada media website dengan ukurannya yang lebih kecil.

    Ukuran gambar sangatlah penting dalam sebuah website. Dimana, dalam kondisi tertentu kualitas gambar website tidak begitu penting, karena biasanya gambar di website hanya untuk ditampilkan di layar monitor, bukan untuk dicetak.

    Dengan mengecilnya ukuran sebuah gambar, ini bisa menghemat ruang hardisk (storage) hosting anda. Disisi lain, Semakin kecil ukuran sebuah gambar, maka cepat halaman website tersebut bisa diaksses. Terlalu banyak gambar dengan ukuran besar akan membuat sebuah website menjadi lambat, dan pada akhirnya menurunkan reputasi website tersebut. Baca : 10 Tips Mempercepat Loading Website WordPress

    Dengan tidak berkurangnya kualitas yang begitu signifikan, webp menjadi alternatif bagi anda yang ingin membuat loading halaman website menjadi lebih cepat, namun tidak mengurangi kualitas gambar.

    Kekurangan WebP

    Selain kelebihan webp, ada pula kekurangannya yaitu webp belum disupport sepenuhnya oleh browser. Meskipun webp sudah dikembangkan dari tahun 2010, namun sayangnya masih banyak browser yang belum mendukung untuk format tersebut. Menurut Can I use…, saat ini broswer yang mendukung WebP file adalah Chrome, Firefox, Opera, Opera Mini, Android Browser, Edge, dan Samsung Internet.Sedangkan, Internet Explorer dan Safari (browser milik Apple) belum kompatibel dengan WebP file. Sebenarnya, Apple sempat melakukan eksperimen di tahun 2016 untuk menggunakan WebP file di Safari. Tetapi sampai sekarang, mereka belum memberi kabar lebih lanjut soal itu.

    Jadi, seandainya Anda memakai format WebP pada website, pengunjung yang nantinya mengakses dari Safari tidak akan bisa melihat tampilan gambar Anda.

    Meskipun masih ada beberapa browser yang mendukung form webp ini, anda tidak perlu ragu untuk menggunakan format tersebut. Kenapa?

    Alasannya, Chrome masih menduduki browser populer pertama di Indonesia. StatCounter menunjukkan kalau market share Chrome mencapai 75%. Sedangkan Safari menjadi urutan kedua dengan jumlah market share yaitu 7.7%.

    Angka yang cukup jauh bukan? jadi, bisa disimpulkan mayoritas pengguna internet menggunakan browser chrome. Untuk memastikan, anda bisa melihat google analitycs untuk melihat browser mana yang paling banyak digunakan oleh pengunjung situs anda.

    Untuk permasalahan tersebut tentu saja anda bisa mengatasinya dengan menggunakan plugin (jika website anda menggunakan wordpress). Cara kerja plugin tersebut adalah:

    • Plugin akan mengkompres gambar JPEG menjadi WebP untuk pengunjung yang memakai Chrome, Firefox, Opera, Android Browser, Edge dan Samsung Internet.
    • Plugin akan mengkompres gambar kembali dari WebP ke JPEG untuk pengunjung yang memakai Safari atau browser yang belum kompatibel.

    Beberapa plugin yang anda gunakan adalah:

    • ShortPixel
    • Imagify
    • Optimole

    Namun sayangnya plugin tersebut merupakan plugin berbayar.

    Kesimpulan

    Jadi, gambar merupakan komponen penting dalam kecepatan website. Itulah sebabnya, kita perlu mengoptimasi gambar, agar loading website anda menjadi lebih cepat. Untuk itu google mengembangkan sebuah format gambar baru, dimana format ini bisa mengurangi ukuran hingga 80% lebih kecil dibandingkan format JPEG dan PNG — tapi tidak mengurangi kualitas gambar itu sendiri.

    Dikarenakan beberapa browser belum mendukung format webp tersebut. Maka anda perlu menggunakan plugin seperti ShortPixelImagify dan Optimole. untuk mengatasi masalah tersebut.

    Sayangnya ketiga plugin tersebut tidak menawarkan layanan gratis. Artinya, anda harus membeli lisensi untuk bisa menggunakan plugin tersebut secara full

    Alternatif lain yang bisa anda gunakan plugin WebExpress atau anda juga bisa menggunakan converter online seperti XnConvertZamzarFileZigZagAdapter dan PixConverter.

    Bagaimana? Tertarik untuk mencoba?

    Recent Articles

    [td_block_21]

    Related Articles

    2 Comments

    1. Sampai saat ini browser safari masih belum support gambar webp. Jadi di blog gambar yang mengandung webp seperti tidak ter-load. #nasib

    Leave A Reply

    Please enter your comment!
    Please enter your name here

    This site uses Akismet to reduce spam. Learn how your comment data is processed.

    Dapatkan konten terbaik dari kami!

    [tdn_block_newsletter_subscribe input_placeholder="Masukkan Alamat Email..." btn_text="Subscribe" tds_newsletter2-image="730" tds_newsletter2-image_bg_color="#c3ecff" tds_newsletter3-input_bar_display="" tds_newsletter4-image="731" tds_newsletter4-image_bg_color="#fffbcf" tds_newsletter4-btn_bg_color="#f3b700" tds_newsletter4-check_accent="#f3b700" tds_newsletter5-tdicon="tdc-font-fa tdc-font-fa-envelope-o" tds_newsletter5-btn_bg_color="#000000" tds_newsletter5-btn_bg_color_hover="#4db2ec" tds_newsletter5-check_accent="#000000" tds_newsletter6-input_bar_display="row" tds_newsletter6-btn_bg_color="#da1414" tds_newsletter6-check_accent="#da1414" tds_newsletter7-image="732" tds_newsletter7-btn_bg_color="#1c69ad" tds_newsletter7-check_accent="#1c69ad" tds_newsletter7-f_title_font_size="20" tds_newsletter7-f_title_font_line_height="28px" tds_newsletter8-input_bar_display="row" tds_newsletter8-btn_bg_color="#00649e" tds_newsletter8-btn_bg_color_hover="#21709e" tds_newsletter8-check_accent="#00649e" embedded_form_code="YWN0aW9uJTNEJTIybGlzdC1tYW5hZ2UuY29tJTJGc3Vic2NyaWJlJTIy" tds_newsletter="tds_newsletter1" tds_newsletter3-all_border_width="2" tds_newsletter3-all_border_color="#e6e6e6" tdc_css="eyJhbGwiOnsibWFyZ2luLWJvdHRvbSI6IjAiLCJib3JkZXItY29sb3IiOiIjZTZlNmU2IiwiZGlzcGxheSI6IiJ9fQ==" tds_newsletter1-btn_bg_color="#dd3333" tds_newsletter1-f_btn_font_family="406" tds_newsletter1-f_btn_font_transform="uppercase" tds_newsletter1-f_btn_font_weight="800" tds_newsletter1-f_btn_font_spacing="1" tds_newsletter1-f_input_font_line_height="eyJhbGwiOiIzIiwicG9ydHJhaXQiOiIyLjYiLCJsYW5kc2NhcGUiOiIyLjgifQ==" tds_newsletter1-f_input_font_family="406" tds_newsletter1-f_input_font_size="eyJhbGwiOiIxMyIsImxhbmRzY2FwZSI6IjEyIiwicG9ydHJhaXQiOiIxMSIsInBob25lIjoiMTMifQ==" tds_newsletter1-input_bg_color="#fcfcfc" tds_newsletter1-input_border_size="0" tds_newsletter1-f_btn_font_size="eyJsYW5kc2NhcGUiOiIxMiIsInBvcnRyYWl0IjoiMTEiLCJhbGwiOiIxMyJ9" content_align_horizontal="content-horiz-center"]