Mengoptimalkan Gambar untuk Meningkatkan Kinerja Website yang Lebih Baik
Jumat, 04 Oktober 2019
Jika gambar yang belum optimal, maka akan diberi keterangan, “Optimizing the following images could reduce their size by xxxKiB (xx% reduction). Losslessly compressing URL-namafile could save xxxKiB (xx% reduction). Pada GTMetrix akan memberi keterangan sebagai berikut: “Optimizing the following images could reduce their size by xxKiB (xx% reduction). Losslessly compressing URL-namafile could save xxKiB (xx% reduction). See optimized version. GTMetrix juga sudah memberikan link (optimized version) hasil kompresi file gambar yang telah dioptimalkan.
Banyak cara untuk mengoptimalkan gambar tanpa mengorbankan kualitas. Di antaranya dengan aplikasi image editor misalkan Adobe Photoshop dan GIMP. Selain itu ada pula alat kompresi image online gratis lainnya seperti: "Online Image Optimizer atau Yahoo! Smush it".
Mengoptimalkan sebuah size pada gambar artikel dengan cara menentukan ukuran/skala gambar tersebut. Ketika gambar akan ditampilkan pada artikel berukuran 550×300, maka skala pada aplikasi pengolah gambar dibuat 550×300 juga lalu ditentukan berapa KB ukuran perfile-nya. Cara ini adalah salah satu praktik terbaik untuk mempercepat loading blog dari pada dimensi gambar yang tidak ditentukan terlebih dahulu.
Untuk menurunkan ukuran file gambar dapat diturunkan level kualitasnya (level quality) oleh aplikasi image editor ketika akan disimpan, misalkan antara 50-75%. Perhatikan tampilan gambar setelah diturunkan kualitasnya di layar tidak pecah, rusak, ataupun kualitas nya menurun ketika dilihat pada dimensi ukuran aslinya (bukan perbesaran).
Mengurangi ukuran file keseluruhan yang diunduh browser atau minimize payload size, komponen ini terdiri dari: Enable compression, Remove unused CSS, Minify JavaScript, Minify CSS, Minify HTML, Defer loading of JavaScript, Optimize images, Serve scaled images, Serve resources from a consistent URL akan menghemat bandwith dan mempercepat loading blog. Namun yang perlu diingat, pengurangan ukuran file jangan sampai mengorbankan kualitas.
Google Page Speed Insights menempatkan optimize images pada prioritas sedang atau (medium priority), sedangkan GTMetrix menempatkan nya pada prioritas yang tinggi atau (high priority). Bagaimanapun juga image yang kurang optimal menjadi masalah serius situs web jika dibiarkan.
Untuk tambahan, segera beralih ke optimize gambar yang lebih baru yaitu: Webp
Tips: Untuk menyisipkan gambar kedalam artikel, jangan melalui online upload seperti diblogger. Gunakanlah localhost atau tempat untuk menyimpan file-file seperti github. Setelah itu barulah Anda masukan Url gambar tersebut kedalam artikel, dan jangan lupa untuk mengkompresnya terlebih dahulu agar gambar tetap optimal.
Pengertian Webp Dan Cara Kerjanya
Apa itu Webp?
WebP adalah format gambar modern yang memberikan kompresi lossless dan lossy unggul untuk gambar di web. Menggunakan WebP, webmaster dan pengembang web dapat membuat gambar yang lebih kecil dan lebih kaya yang membuat web lebih cepat.
Gambar lossless WebP berukuran 26% lebih kecil dibandingkan dengan PNG. Gambar webp lossy adalah 25-34% lebih kecil dari gambar JPEG yang sebanding pada indeks kualitas SSIM yang setara.
Lossless WebP mendukung transparansi (juga dikenal sebagai saluran alpha) dengan biaya hanya 22% byte tambahan. Untuk kasus ketika kompresi RGB lossy dapat diterima, lossy WebP juga mendukung transparansi, biasanya menyediakan ukuran file 3x lebih kecil dibandingkan dengan PNG.
Cara Kerja WebP
Kompresi WebP yang hilang menggunakan pengkodean prediktif untuk menyandikan gambar, metode yang sama yang digunakan oleh codec video VP8 untuk mengompresi kerangka kunci dalam video. Pengkodean prediktif menggunakan nilai-nilai dalam blok piksel yang berdekatan untuk memprediksi nilai-nilai dalam sebuah blok, dan kemudian hanya mengkode perbedaannya.
Kompresi WebP lossless menggunakan fragmen gambar yang sudah terlihat untuk merekonstruksi piksel baru secara tepat. Itu juga dapat menggunakan palet lokal jika tidak ditemukan kecocokan yang menarik.
File WebP terdiri dari data gambar VP8 atau VP8L, dan sebuah wadah berdasarkan RIFF. Pustaka libwebp mandiri berfungsi sebagai implementasi referensi untuk spesifikasi WebP, dan tersedia dari repositori git atau sebagai tarball.
Browser Yang Mendukung WebP
WebP didukung secara asli di Google Chrome, Firefox, Edge, browser Opera, dan oleh banyak alat dan pustaka perangkat lunak lainnya. Pengembang juga menambahkan dukungan ke berbagai alat pengeditan gambar.
WebP termasuk dalam kategori pengkodean ringan dan decoding libwebp library dan alat baris perintah cwebp dan dwebp untuk mengonversi gambar, serta alat untuk melihat, muxing, dan menganimasikan gambar WebP.
