Optimasi Gambar – Anda dapat mengurangi ukuran file gambar Anda untuk meningkatkan kinerja situs web Anda. Masalah dengan pemformatan adalah bahwa perubahan sering kali mengganggu kualitas (yang pada gilirannya dapat menyebabkan pengunjung lari dari situs web Anda). Hal ini bukan hal yang buruk, selama Anda tidak membuatnya jelek. Ada beberapa trik dan teknik yang dapat Anda gunakan untuk mengurangi ukuran file gambar dan tetap membuatnya cukup bagus untuk ditampilkan pada di situs web Anda. Jadi mari kita lihat bagaimana Anda dapat memformat gambar Anda tanpa cacat, dan bagaimana Anda dapat mengoptimalkan gambar untuk web dan kinerjanya .
Apa arti dari optimasi gambar?
Gambar besar memperlambat halaman web Anda, menghasilkan pengalaman pengguna yang kurang optimal. Mengoptimalkan gambar adalah proses mengurangi ukuran file , baik dengan plug-in atau skrip, yang pada gilirannya mempercepat waktu pemuatan halaman. Kompresi adalah metode umum.
Keuntungan optimasi gambar untuk Anda
Pertama, mengapa Anda perlu memformat gambar Anda? Apa kelebihannya? Ada banyak manfaat untuk mengoptimalkan gambar Anda buat kinerja situs web. Menurut Arsip HTTP , gambar per Desember 2017 rata-rata 54% dari total berat halaman web . Jadi ketika Anda mengunjungi halaman WordPress Anda , gambar adalah perhentian pertama! Mereka lebih penting daripada skrip dan lainnya. Dan, ironisnya, alur kerja peningkatan gambar yang baik adalah salah satu cara termudah untuk diterapkan, tetapi banyak pemilik situs web mengabaikannya.
Cara optimasi gambar untuk web dan kinerjanya
Tujuan utama memformat gambar adalah untuk menemukan keseimbangan antara ukuran file terendah dan kualitas yang dapat diterima . Ada lebih dari satu cara untuk melakukan semua optimasi ini. Salah satu metode yang paling populer adalah dengan mengkompresnya sebelum mengunggah ke WordPress. Biasanya ini dapat dilakukan dengan alat seperti Adobe Photoshop atau Affinity Photo. Beberapa kinerja ini juga dapat dilakukan dengan plug-in.
Dua hal paling penting untuk dipertimbangkan adalah format file dan jenis kompresi yang Anda gunakan. Memilih kombinasi format file dan tipe kompresi yang tepat dapat mengurangi ukuran gambar hingga 5x lipat. Anda harus mencoba dengan setiap gambar atau format file untuk melihat mana yang terbaik.
Pilih format file yang benar
Sebelum mulai mengedit gambar, pastikan Anda memilih jenis file terbaik. Ada beberapa jenis file yang dapat Anda gunakan:
PNG – menghasilkan gambar dalam kualitas yang lebih tinggi, tetapi juga memiliki ukuran file yang lebih besar. Diciptakan sebagai format gambar lossless, tetapi juga bisa lossy.
JPEG – menggunakan optimasi lossy dan lossless . Tingkat kualitas dapat disesuaikan untuk keseimbangan kualitas dan ukuran file.
GIF – hanya menggunakan 256 warna. Ini adalah pilihan terbaik untuk gambar animasi. Ini menggunakan kompresi ketat lossless
Ada beberapa yang lain, seperti JPEG XR dan WebP, tetapi mereka tidak didukung oleh semua browser. Idealnya, Anda harus menggunakan JPEG (atau JPG) untuk gambar berwarna tinggi dan PNG untuk gambar sederhana.
Tools dan Aplikasi untuk pengoptimalan gambar
Ada banyak alat dan program di luar sana, baik yang premium maupun gratis, yang dapat Anda gunakan untuk mengoptimalkan gambar Anda. Beberapa memberi Anda fitur untuk melakukan optimasi Anda sendiri dan yang lainnya melakukan pekerjaan untuk Anda.
Berikut beberapa Tools dan Aplikasi untuk optimasi gambar:
- Adobe Photoshop
- Gimp
- Paint.NET
- GIFsicle
- JPEGtran
- JPEG Mini
- OptiPNG
- pngquant
- FileOptimizer
- ImageOptim
- Trimage
- ImageResize.org
Mengubah ukuran gambar untuk penskalaan
Di masa lalu, sangat penting untuk mengunggah gambar dengan skala dan tidak membiarkan skala dari CSS. Namun,hal ini menjadi tidak signifikan, karena WordPress 4.4 sekarang mendukung gambar responsif (tidak diperkecil oleh CSS). Pada dasarnya, WordPress secara otomatis membuat beberapa ukuran dari setiap gambar yang diunggah ke perpustakaan media. Dengan memasukkan ukuran gambar yang tersedia dalam suatu srcset atribut, browser sekarang dapat mengunduh ukuran yang paling tepat dan mengabaikan yang lain. Di bawah ini adalah contoh dari apa kode Anda sebenarnya terlihat.
Jadi dengan semakin banyak tampilan HiDPI, mungkin ada baiknya untuk menemukan hal yang cocok saat ini. Katakanlah 2x atau 3x ukuran kolom atau div situs web Anda, tetapi masih kurang dari ukuran aslinya. Mak browser akan menampilkan pilihan yang benar berdasarkan resolusi perangkat.
Perpustakaan Media WordPress membuat thumbnail berdasarkan pengaturan. Namun, aslinya disimpan dan tidak tersentuh. Jika Anda ingin mengubah ukuran gambar dan menghemat ruang dengan tidak menyimpan aslinya, Anda dapat menggunakan plugin gratis seperti Imsanity .
Imsanity memungkinkan Anda untuk menetapkan batas kewajaran sehingga semua gambar yang diunggah terbatas pada ukuran yang sesuai yang masih lebih dari cukup untuk kebutuhan halaman web biasa. Imsanity langsung terkunci setelah mengunggah gambar, tetapi sebelum pemrosesan WordPress di WordPress. WordPress berperilaku dengan cara yang persis sama dalam semua hal, kecuali bahwa seolah-olah kontributor telah mengubah gambarnya ke ukuran yang sesuai sebelum mengunggah.
Plug-in untuk optimasi gambar yang dapat Anda gunakan
Untungnya, dengan WordPress Anda tidak lagi harus melakukan semua pemformatan atau kompresi secara manual. Anda dapat menggunakan plugin untuk melakukan setidaknya beberapa pekerjaan untuk Anda secara otomatis. Ada beberapa plug-in yang mengoptimalkan file gambar saat Anda mengunggahnya. Anda bahkan bisa mengoptimalkan gambar yang sudah Anda unggah. Hal ini adalah fitur yang berguna terutama jika Anda sudah memiliki halaman web dengan banyak gambar. Berikut ini beberapa plug-in terbaik untuk memformat gambar Anda untuk kinerja yang lebih baik.
Namun, penting bagi Anda untuk tidak hanya mengandalkan plug-in itu sendiri. Misalnya, Anda tidak boleh mengunggah 2 MB gambar ke Perpustakaan Media WordPress Anda. Ini dapat menyebabkan ruang penyimpanan webhoster Anda digunakan dengan sangat cepat. Cara terbaik adalah dengan cepat mengubah ukuran gambar dengan editor foto, kemudian unggah dan kurangi lebih lanjut dengan salah satu plug-in berikut ini .
Imagify Image Optimizer
Imagify sedang dikembangkan oleh tim yang sama yang mengembangkan WP Rocket, yang mungkin akrab bagi sebagian besar dari Anda. Ini kompatibel dengan WooCommerce, NextGen Gallery, dan WP Retina.
ShortPixel Image Optimizer
ShortPixel Image Optimizer adalah plug-in gratis yang memampatkan 100 gambar per bulan dan memampatkan beberapa jenis file seperti PNG, JPG, GIF, WebP, dan bahkan file PDF.
Optimus WordPress Image Optimizer
The Optimus WordPress Image Optimizer menggunakan kompresi lossless untuk mengoptimalkan gambar Anda. Lossless berarti tidak ada kehilangan kualitas. Ini mendukung WooCoomerce dan Multi-Site dengan memiliki fitur optimisasi massa yang bagus untuk mereka yang memiliki perpustakaan media yang sudah besar
WP Smush
WP Smush menawarkan versi gratis dan premium. Plugin ini mengurangi informasi tersembunyi dari gambar untuk mengurangi ukuran tanpa mengurangi kualitas. Hal ini memindai gambar dan menguranginya saat Anda mengunggahnya ke situs web Anda. Itu juga akan memindai gambar yang sudah Anda unggah, dan mereka juga akan berkurang ukurannya.
Demikianlah pembahasan tentang Cara optimasi gambar untuk web dan kinerjanya yang bisa anda praktekan langsung dengan beberapa aplikasi dan plugin yang terpasang ke WordPress.
