Topik kita sekarang yakni Cara Optimasi Ukuran Gambar untuk Website Cepat. Bagaimana Anda dapat mengunggah / upload gambar berukuran kecil tapi dengan kualitas tetap bagus? Anda mesti mengoptimasi gambar tersebut supaya mempertahankan kualitasnya namun dengan ukuran yang jauh lebih kecil.
Jenis Format Gambar
Sebelum memulai optimasi ukuran gambar dengan bantuan plugin atau kompresor, pastikan Anda telah memilih format gambar yang tepat. Ada beberapa jenis format gambar yaitu :
a. 5 Jenis Format Gambar secara Umum
Berikut 5 jenis format secara umum untuk gambar pada website :
1. JPEG / JPG
JPEG (Joint Photographic Experts Group) merupakan format yang paling umum digunakan. Gambar berformat JPEG dipakai oleh kurang lebih 72,5% website di seluruh dunia. Format gambar ini bisa menampilkan berbagai warna dan gradient. Bisa dikatakan format ini dapat menampilkan ilustrasi visual dengan cukup detail.
Di samping itu, format JPEG cukup terkenal karena bisa dikompresi. Cara ini dipakai untuk mengecilkan atau optimasi ukuran gambar dengan sedikit mempengaruhi kualitas file gambar.
Meski begitu, kami rekomendasikan buat tak memakai format JPEG/JPG untuk gambar yang sangat detil misalnya desain tipografi. Karena kemungkinan besar detail tersebut akan jadi blur. Kekurangan lain dari JPEG yaitu tak bisa memuat latar belakang transparan.
Format JPEG biasanya digunakan untuk hasil fotografi atau gambar umum karena memiliki :
- file size yang lebih kecil,
- kualitas gambar yang solid, dan
- dapat di-resize serta dikompres tanpa mengurangi kualitas secara drastis.
2. PNG
PNG (Portable Network Graphics) adalah yang memiliki lossless compression. Artinya, meski dikompresi, kualitasnya tetap mendekati gambar sebelum dikompresi (optimasi ukuran gambar). Biasanya ukurannya lebih besar dibanding JPEG.
Karenanya format PNG sangat cocok dimanfaatkan untuk menampilkan gambar yang detail seperti :
- logo,
- vektor,
- tipografi,
- screenshot tulisan,
- gambar-gambar yang lebih kecil
- dan sebagainya.
Format gambar PNG juga mendukung latar belakang transparan. Hal ini cocok dimanfaatkan untuk membuat logo.
3. Vektor
Vektor merupakan jenis grafis yang dibikin dari sambungan garis atau kurva. Sambungan ini lalu membentuk berbagai wujud seperti poligon atau bangun segi-n. Jenis gambar yang satu ini sangat fleksibel.
Format ini tak akan kehilangan kualitas dan ketajaman gambar, walaupun diperbesar sekian kali lipat. Vektor pun sangat mudah diedit dan punya ukuran file yang cukup kecil. Hal ini tentu sangat menguntungkan bagi grafik desainer.
Meski begitu, vektor tidak bisa digunakan langsung di website. Hal ini karena gambar dengan format vektor tak bisa menjaga konsistensinya di berbagai macam search engine atau mesin pencari. Untuk bisa dipakai, grafik vektor harus diubah dalam format raster.
4. Raster
Raster merupakan grafik yang dibikin dari kumpulan kotak membentuk pixel. Berbeda dengan format vektor, raster cukup konsisten dilihat dari berbagai mesin pencari.
Meski konsisten dilihat, format raster perlu dilakukan optimasi ukuran gambar untuk website. Ini karena gambar raster cenderung punya ukuran file yang besar. Sesuatu hal yang harus dihindari bila tidak mau performa website menurun.
5. GIF
Graphic Interchange Format (GIF) adalah format gambar yang cukup populer. Format GIF terdiri dari 8-bit per pixel atau terbatas pada 256 warna dalam 1 gambar. Dengan warna yang terbatas, gambar GIF kurang cocok untuk menampilkan visual secara detail. Sebagai gantinya, format ini sering digunakan dalam memunculkan animasi singkat di website.
b. Format Gambar Terbaru
WebP file adalah format gambar yang dikembangkan oleh Google sejak tahun 2010. Format gambar WebP punya size file yang lebih kecil tanpa menurunkan kualitasnya. Jadi, ini bisa menjadi alternatif format gambar selain JPEG atau PNG.
Format gambar jenis ini penting, khususnya jika website Anda harus menampilkan banyak gambar. Seperti website portofolio fotografi, desain, traveling, atau food blog. Karena, makin kecil size gambar yang dipakai, semakin cepat juga loading website. Jadi, Anda bisa punya website cepat sekaligus menampilkan kualitas gambar yang jernih.
Cara Kerja WebP Format
Bagaimana bisa sebuah gambar dengan ukuran kecil bisa punya kualitas yang mumpuni? WebP format ini memakai metode yang dinamakan dengan lossless dan lossy.
Kedua metode ini sebenarnya juga merupakan metode optimasi ukuran gambar yang digunakan pada format JPEG/JPG dan PNG.
- Lossless merupakan metode pengompresan yang bisa mempertahankan tiap bit dari data asli pada gambar. Di sini, lossless WebP bisa mengkompres gambar 26% lebih banyak bila dibandingkan PNG.
- Lossy merupakan metode yang bisa menurunkan size gambar dengan mengurangi sejumlah data yang asli.
Selain kedua metode di atas, tim developer WebP memiliki sistem yang biasa disebut dengan predictive coding. Yaitu sebuah proses mengkodekan gambar untuk mengkompres keyframe.
Sistem ini dapat menghasilkan kompresi gambar yang berkualitas tinggi dalam ukuran lebih kecil setara dengan JPEG/JPG. Sekaligus mengurangi size gambar dari 25% jadi 34% lebih kecil.
Kekurangan WebP Format
WebP sudah ada dari tahun 2010. Lalu, kenapa pemakaiannya belum sepopuler JPEG atau PNG? Supaya bisa berfungsi, WebP format perlu dukungan dari browser yang digunakan oleh para pengunjung. Karena WebP format belum kompatibel di semua browser.
Saat ini broswer yang mendukung WebP format adalah :
- Chrome,
- Firefox,
- Opera,
- Opera Mini,
- Android Browser,
- Edge, dan
- Samsung Internet.
Sedangkan, untuk browser Internet Explorer dan Safari (milik Apple) belum kompatibel dengan WebP format. Sebetulnya, Apple sempat melakukan eksperimen pada tahun 2016 untuk memakai WebP format di bowser Safari. Namun hingga kini, mereka belum memberi kabar lebih lanjut soal itu.
Jadi, pengunjung yang nantinya mengakses dari browser Safari tak akan bisa melihat tampilan gambar dengan format WebP. Meski begitu, Anda sebaiknya tak ragu-ragu untuk menggunakan WebP file. Mengapa?
Alasannya, Chrome masih menduduki browser populer pertama di Indonesia yaitu market share mencapai 75%. Sedangkan Safari jadi urutan kedua dengan jumlah market share yaitu 7.7%. Jadi, Anda juga dapat memprediksi jika sebagian besar pengunjung website ialah pengguna Chrome. Sehingga mereka masih dapat melihat gambar WebP file Anda.
Untuk lebih akurat lagi, Anda bisa cek langsung ke Google Analytics. Kemudian, lihat browser apa yang paling banyak dipakai oleh pengunjung website Anda. Bila mayoritas pengunjung website mengakses dari Chrome / Firefox, artinya itu bukanlah perkara yang besar.
Plugin Khusus
Namun, bagaimana jika ternyata pengunjung Anda mayoritas adalah pengguna browser Safari? Tenang, Anda tidak perlu khawatir. Anda bisa memakai bantuan plugin khusus optimasi ukuran gambar untuk mengatasi hal ini.
Plugin ini akan secara otomatis mengkompres ke format asli bila browser yang digunakan pengunjung Anda tak mendukung. Plugin tersebut seperti :
- ShortPixel
- Imagify
- Optimole
Jadi, saat Anda memakai plugin ini, maka:
- Plugin akan melakukan kompresi gambar JPEG/JPG jadi WebP untuk pengunjung yang menggunakan broser yang kompatibel, seperti Chrome, Firefox, dll.
- Plugin akan melakukan kompresi gambar kembali dari WebP format ke format JPEG/JPG bagi pengunjung yang menggunakan Safari. Atau juga bagi pengguna browser yang belum kompatibel.
- Namun, Anda harus membayar untuk memakai plugins ini. Tapi, jika masih penasaran, Anda bisa menjajal fiturnya dengan menggunakan layanan free trial.
Mengapa Optimasi Gambar Penting?
Berikut adalah beberapa alasan optimasi ukuran gambar WordPress penting:
1. Meningkatkan Kecepatan Loading Website
Kecepatan loading website yang rendah akan menyebabkan pengalaman buruk bagi pengunjung. Hal ini juga akan menyebabkan bounce rate yang tinggi dan pengunjung akan menghabiskan waktu lebih sedikit di website Anda.
2. Membutuhkan Lebih Sedikit Space
Lazimnya, layanan hosting menyediakan unlimited disk space. Tapi, alangkah lebih baik lagi bila website Anda memakai space yang sedikit supaya bisa memberikan performa lebih gesit.
3. Meningkatkan Ranking di Hasil Pencarian
Mesin pencari seperti Google lebih menyukai website yang loadingnya cepat. Dengan mengunggah gambar yang telah teroptimasi, loading website Anda akan lebih cepat. Sehingga ranking website Anda di hasil pencarian Google akan meningkat.
Optimasi Ukuran Gambar untuk Website Cepat
Gambar merupakan elemen penting dalam sebuah website. Di samping akan bikin website terlihat lebih menarik, gambar pun bisa membantu pengunjung beristirahat sejenak sebelum melanjutkan membaca konten teks.
Namun, menampilkan gambar di website tidak bisa dilakukan sembarangan. Karena jika salah, malah akan membuat website terlihat kurang estetis. Lebih buruknya lagi, bisa mempengaruhi performa teknis website.
Berikut adalah langkah optimasi ukuran gambar di website WordPress Anda:
A. Memilih Format File yang Tepat
Langkah pertama dalam optimasi ukuran gambar adalah pemilihan format file gambar. Pemilihan gambar untuk suatu website lebih sering didasari oleh alasan estetika dan juga strategi marketing.
Sebanyak 60% pengguna internet mengaku cenderung mengklik hasil pencarian yang punya gambar. Itu mengapa konten visual lebih dipilih sebagai medium marketing.
Berikut perbandingannya :
- konten visual (32%)
- blog (27%),
- video (24%),
- live video (9%),
- podcast (1%).
Tapi, Anda pun harus tahu bahwa format gambar ikut mempengaruhi performa website. Khususnya dalam hal waktu loading (page load speed). Di mana format, pixel, dan resolusi gambar menentukan besar kecilnya suatu ukuran gambar.
Makin rapat pixel sebuah gambar dan besar resolusinya, maka kian besar juga ukuran gambarnya. Dan gambar yang besar akan lebih lama untuk dimuat. Itu kenapa gambar yang besar bisa mempengaruhi kecepatan loading sebuah website. Dan itu pentingnya melakukan optimasi ukuran gambar.
Tahun 2010, Google secara resmi mengumumkan 1 faktor yang menjadi pertimbangan dalam algoritma ranking yaitu kecepatan. Hal ini karena Google menyadari bahwa website yang cepat dan responsif lebih disukai oleh pengguna.
Sehingga, waktu loading yang lambat akan berdampak ke SEO (ranking) di mesin pencarian. Tanpa kecepatan optimal, besar kemungkinan juga para pengunjung akan meninggalkan website. Hal ini tentunya akan merugikan pemilik website, baik dari sisi bounce ataupun conversion rate.
Makin lama waktu yang diperlukan website untuk termuat secara sempurna, maka semakin besar bounce rate website tersebut. Dalam sebuah percobaan, website dengan waktu load 2 detik memiliki rata-rata bounce rate sebesar 9%.
Angka tersebut melonjak secara tajam pada website dengan waktu load 5 detik, yaitu 38%. Sedangkan dari sisi conversion rate, sebanyak 79% pelanggan online shopping merasa kapok dengan website ecommerce yang lamban atau bermasalah.
Itulah pentingnya gambar yang tepat di sebuah website. Untuk jenis-jenis format gambar bisa dilihat di atas.
B. Kompres Gambar
Saat mengompres atau optimasi ukuran gambar, Anda mesti menemukan keseimbangan antara kualitas kompres dan ukuran gambar. Tujuannya ialah memperoleh kualitas kompres yang tinggi dengan ukuran gambar seminimal mungkin.
a. Alat Optimasi Gambar Manual
Alat optimasi ukuran gambar lewat manual (desktop dan smartphone) memungkinkan Anda buat mengontrol pengaturan optimasi yang diinginkan. Berikut beberapa alat optimasi gambar yang populer yaitu sebagai berikut
- Adobe Photoshop,
- Microsoft Paint,
- Gimp,
- Affinity Photo,
- Photo & Picture Resizer
- Photo Compress & Resize
1) Microsoft Paint
Microsoft Paint merupakan software paling versatile yang pernah ada. Program ini selalu ada di komputer yang berbasis operating system Windows. Lebih baik lagi, karena Anda bisa memakainya untuk optimasi ukuran gambar di website.
Untuk langkah-langkahnya sebagai berikut
- Setelah tahu gambar mana yang harus dioptimalkan, Anda cuma perlu membuka fil tersebut di program Paint. Caranya klik file >> open >> pilih file gambar yang diinginkan.
- Lalu, pilih Resize di bagian tab Home.
- Klik pilihan pixel dan masukkan resolusi yang Anda inginkan atau sesuai dengan rekomendasi GT Metrix.
- Setelau itu simpan file, caranya klik file >> Save as >> pilih folder dan ekstensi yang diinginakan >> save.
- Kemudian, unggah gambar yang telah diubah tersebut ke website untuk menggantikan gambar yang kurang optimal.
2) Adobe Photoshop
Adobe Photoshop merupakan salah satu aplikasi unggulan untuk mengedit foto dan bikin desain grafis serta optimasi ukuran gambar website. Namun, kebanyakan orang awam menganggap aplikasi ini sulit dipakai, bahkan untuk melakukan hal sepele seperti mengecilkan size gambar.
Tapi, sebenarnya caranya sangat mudah.
- Jalankan aplikasi, klik File >> Open untuk membuka file gambar yang mau dikecilkan ukurannya.
- Kemudian, buka menu File lagi. Tapi, kali ini klik Export >> Save for Web. Lalu akan muncul pop-up window.
- Pada pop-up window tersebut memang ada banyak pengaturan yang terlihat cukup rumit. Namun, Anda hanya harus memperhatikan 3 hal: Preset, Quality, dan Image Size.
- Pastikan Preset yang digunakan ialah “JPG Medium” dengan Quality medium.
- Setelah itu, Anda bisa mengatur Image Size atau dimensi gambar sesuai dengan keperluan.
- Anda bisa melihat estimasi ukuran file sebelum menyimpan gambar yang mau dikecilkan. Estimasi tersebut dapat dilihat di bawah preview gambar.
- Bila sudah, klik tombol Save dan simpan di folder yang Anda inginkan.
3) Photo & Picture Resizer
Photo dan Picture Resizer merupakan aplikasi untuk memperkecil atau optimasi ukuran gambar yang cukup sederhana, yakni :
- Sesudah membukanya, Anda dihadapkan pada beberapa pilihan.
- Pilih Select photos buat membuka file gambar yang Anda inginkan.
- Berikutnya, klik tombol “4 tanda panah”.
- Pilih dimensi gambar yang tertera pada daftar. Tapi, jika mau dimensi gambar lain Anda bisa pilih “Custom”.
- Setelah memilih dimensi, file gambar yang sudah diubah ukurannya akan otomatis tersimpan di dalam perangkat Android Anda.
4) Photo Compress & Resize
Aplikasi Android lain yang bisa dipakai untuk memperkecil atau optimasi ukuran gambar adalah Photo Compress & Resize. Fungsi aplikasi ini cukup sederhana, yaitu untuk mengecilkan dan memotong file JPG (compress dan resize).
Saat melakukan compress pada sebuah file gambar (JPG), hanya mengurangi ukuran file tanpa mengurangi dimensi gambar tersebut. Tapi, Anda harus mempertimbangkan kualitas gambar yang dihasilkan dari proses ini.
Kompresi gambar bisa dilakukan berulang kali. Namun, Anda harus berhenti saat muncul distorsi pada gambar tersebut. Sedangkan, resize artinya mengubah dimensi dan juga mengubah ukuran file gambarnya.
Aplikasi ini menawarkan 2 opsi optimasi ukuran gambar tersebut (compress dan resize).
- Jika memilih compress, Anda tinggal menentukan ukuran file atau kualitas gambar yang diinginkan. Untuk memastikan bahwa dimensi gambar tak berubah, Anda bisa klik menu slider yang ada di sebelah kanan teks Maintain Resolution. Bila sudah, klik tombol Start Compressing. File yang ukurannya telah dikurangi akan langsung tersimpan.
- Jika memilih opsi resize, Anda dapat menentukan dimensi gambar dan melakukan kompresi secara bersamaan.
b. Alat Optimasi Gambar Otomatis
Terkadang, optimasi ukuran gambar bukan hanya sekedar memperkecil resolusi gambar. Saat dilakukan juga, masih ada kemungkinan gambar punya ukuran file yang besar. Itu artinya, Anda harus melakukan langkah tambahan, yakni mengkompres gambar.
Gambar pada umumnya punya metadata yang tersembunyi. Metadata ini berisi informasi tambahan mengenai
- jarak fokus kamera,
- profil warna,
- lokasi pengambilan gambar, dan
- waktu pengambilan gambar.
Informasi tersebut hanya penting bagi fotografer. Bagi pengguna selain fotografer, informasi ini cuma akan menambah ukuran gambar tanpa efek yang signifikan. Maka dari itu, lebih baik metadata ini dihapus.
Untuk menghapus dan/atau mengkompresi gambar, Anda bisa menggunakan berbagai pilihan kompresi gambar yang tersedia online. Berikut beberapa alat optimasi ukuran gambar otomatis / online yang dapat digunakan yaitu :
- TinyPNG,
- ImageOptim,
- OptiPNG,
- Trimage,
- Kraken,
- iLoveIMG,
- Tiny JPG,
- Media Library WordPress
1) Media Library WordPress
Optimasi ukuran gambar dengan software offline mungkin dianggap kurang efisien. Karena Anda harus berulang kali mengunggah untuk mengganti gambar yang kurang pas.
Oleh karena itu, mungkin Anda harus mengoptimasi gambar langsung dari Media Library website (WordPress).
- Anda cukup membuka tab Media di Dashboard website (WordPress).
- Lalu klik 2 kali di gambar yang Anda mau dan klik pilihan Edit Image.
- Di bagian tersebut, Anda bisa memotong (crop) gambar sesuai dengan keinginan. Caranya klik tombol paling kiri di bagian atas gambar. Bisa juga hanya untuk mengurangi resolusi gambar dengan memasukkan angka dan mengklik tombol Scale.
- Anda pun dapat mengatur di mana saja perubahan ini ditampilkan. Seperti semua ukuran gambar, thumbnail saja, atau semua gambar kecuali thumbnail.
2) iLoveIMG
Situs iLoveIMG menawarkan beragam tool untuk mengedit gambar, termasuk compress dan resize. Untuk panduan ini, hanya akan dijelasakan cara mengkompres atau optimasi ukuran gambar.
- Pilih file gambar yang mau Anda kecilkan. Anda bisa melakukannya dengan klik tombol Select Images. Perlu diingat bahwa Anda bisa mengkompres sejumlah file bersamaan dengan iLoveIMG.
- Setelah itu, tinggal klik Compress Images.
- File gambar akan langsung didownload ke komputer atau smartphone Anda setelah prosesnya selesai.
3) TinyJPG
Selain iLoveIMG, Anda bisa pakai TinyJPG sebagai alternatif. Tool optimasi ukuran gambar online ini sangat sederhana. Anda cuma perlu mengunggah gambar yang ukuran filenya mau dikecilkan.
- Klik atau drag file gambar ke tempat yang tersedia.
- Anda bisa mengkompres lebih dari 1 gambar dengan sekali klik dengan tool ini.
- Setelah proses selesai Anda bisa mengunduh hasilnya dengan klik tombol download.
c. Plugin Kompres WordPress
WordPress pun menyediakan berbagai plugin buat membantu Anda menyelesaikan masalah optimasi ukuran gambar. Berikut beberapa plugin yang bisa digunakan ialah
- Imagify Image Optimizer,
- ShortPixel Image Optimizer,
- Optimole,
- Smush Image Compression and Optimiation, dan
- Optimus Image Optimizer.
Baca : Plugin untuk Optimasi Ukuran Gambar
C. Resize Gambar untuk Tampilan Lebih Optimal
Sebelum mulai optimasi ukuran gambar, sebaiknya Anda bikin gambar yang bakal diunggah ke dalam ukuran yang tepat. Perbaiki lebih dulu dimensi gambar Anda, dengan begitu optimasinya bakal lebih mudah.
Misalnya, Anda hanya memerlukan gambar dengan dimensi 300×300, namun malah mengunggah gambar dengan dimensi 3000×3000. Hal ini bikin loading gambar tersebut menjadi lambat yang mungkin bakal menjengkelkan untuk pembaca.
Buat menentukan dimensi gambar yang bakal diunggah, Anda dapat menyesuaikannya dengan dimensi gambar dari tema website yang digunakan. Usahakan setiap gambar yang diunggah di WordPress tidak melebihi 100 KB.
Demikian info terkait dengan Cara Optimasi Ukuran Gambar untuk Website Cepat, semoga postingan kali ini membantu Anda. Tolong postingan optimasi gambar ini dibagikan biar semakin banyak yang mendapat manfaat.
Referensi: Jasa Kelola Manajemen Website