Cara Mengukur Ukuran Gambar dengan Benar
Diterbitkan: 2022-07-13Apakah Anda mendapatkan peringatan "ukuran gambar yang benar" saat menjalankan audit kinerja di Google PageSpeed Insights? Masalah ini dipicu jika Lighthouse mengidentifikasi gambar apa pun di halaman Anda yang ukurannya tidak sesuai.
Mengukur gambar Anda dengan benar dapat secara drastis meningkatkan waktu pemuatan halaman dan mengurangi konsumsi bandwidth. Pada artikel ini, kami membagikan beberapa teknik pengoptimalan yang dapat Anda ikuti untuk mengoptimalkan gambar situs WordPress Anda.
Apa Arti Ukuran Gambar yang Benar?
Mengukur ukuran gambar Anda dengan benar berarti bahwa URL gambar tidak boleh lebih besar dari ukuran yang ditampilkan di layar pengunjung. Anda tidak boleh menyajikan sesuatu yang lebih besar dari yang dibutuhkan – itu akan membuang byte dan membuat halaman lebih lambat.
| Aturan emas: Gambar yang diunggah di situs WordPress Anda harus berukuran berdasarkan dimensi yang akan ditampilkan. |
Apa yang Memicu Peringatan Mercusuar
Lighthouse membandingkan ukuran gambar yang dirender (rasio piksel perangkat) dan ukuran gambar sebenarnya. Peringatan "gambar dengan ukuran yang benar" dipicu jika ukuran yang dirender setidaknya 4KiB lebih kecil dari ukuran sebenarnya.
Dampak Ukuran Gambar yang Tidak Tepat pada Performa
Jika gambar tidak berukuran dengan benar, browser akan mengambil "keputusan" untuk mengubah ukurannya sebelum menampilkannya kepada pengunjung, membuang-buang waktu dan sumber daya. Gambar yang terlalu besar merusak pengalaman halaman, memaksa pengguna untuk mendownload lebih banyak data daripada yang dibutuhkan.
| Gambar beresolusi tinggi = ukuran file besar = mempengaruhi kinerja web secara drastis = lebih banyak data seluler yang dikonsumsi |
Inilah yang terjadi di sisi browser ketika mem-parsing gambar dengan ukuran yang tidak tepat:
Browser akan menghabiskan lebih banyak waktu untuk mengunduh file dan mengubah ukuran gambar, meningkatkan bandwidth yang dikonsumsi. Untuk menghindari masalah kinerja yang terkait dengan gambar, ada beberapa teknik mudah yang dapat Anda terapkan. Mari kita bahas mereka di bagian selanjutnya!
3 Tips untuk Mengukur Ukuran Gambar dengan Benar di WordPress
Untuk mengukur gambar dengan benar di WordPress, Anda dapat mengikuti tiga tips pengoptimalan gambar yang mudah:
- Ubah Ukuran Gambar Untuk Memperbaiki Dimensi
- Gunakan Gambar Responsif
- Gunakan Format Gambar Berbasis Vektor
Mari selami!
1. Ubah Ukuran Gambar ke Dimensi yang Benar
Ukuran Gambar yang Benar Dengan Perangkat Lunak dan Alat Online
Ada banyak perangkat lunak gratis dan premium yang dapat Anda gunakan untuk mengubah ukuran gambar ke dimensi yang benar. Kami membagikan dua opsi gratis di Mac dan Windows:
- Pratinjau (Gratis di Mac)
- GIMP – perangkat lunak pengeditan gratis yang memungkinkan Anda mengedit dan mengubah ukuran gambar dengan cara yang sangat nyaman:
Tentu saja, Anda juga memiliki opsi untuk menggunakan dua perangkat lunak Photoshop dan Lightroom yang terkenal, tetapi keduanya bisa menjadi kurva belajar yang curam. Kami telah membuat daftar 10 alternatif untuk Photoshop untuk pengoptimalan gambar jika Anda tertarik.
Penting: Jika Anda mengubah ukuran beberapa gambar, Anda mungkin merasa lebih nyaman menggunakan skrip seperti Imagemagick untuk mengotomatiskan proses.
Ukuran Gambar dengan Benar Menggunakan CDN Gambar
CDN Gambar dapat membantu mengatur ukuran gambar dengan benar untuk situs WordPress Anda. Mereka berspesialisasi dalam transformasi, pengoptimalan, dan pengiriman gambar. Mereka seperti API yang mengakses dan mengurutkan gambar yang digunakan di situs Anda menurut perangkat pengguna.
Bagaimana cara kerjanya?
Setiap gambar yang dimuat dari CDN gambar memiliki URL yang menunjukkan gambar mana yang akan dimuat, ditambah ukuran, format, dan kualitas. Kemudian dapat "mengubah" gambar untuk menyajikannya dalam format yang dioptimalkan terbaik.
CDN gambar juga membuat variasi gambar untuk kasus penggunaan yang berbeda dan mengurangi konsumsi byte gambar setidaknya 40%. Pengembang Google melakukan penelitian menarik tentang perusahaan yang memutuskan untuk beralih ke CDN gambar. Ini adalah berapa banyak data yang mereka simpan:
2. Gunakan Gambar Responsif
Salah satu strategi terbaik untuk menyajikan gambar yang dioptimalkan disebut "gambar responsif", yang berarti menyesuaikan lebar dan tinggi agar sesuai dengan layar apa pun (ponsel, tablet, atau desktop). Semua gambar akan dioptimalkan dan disajikan ke layar yang tepat, sehingga bandwidth yang dikonsumsi lebih sedikit dan eksekusi browser lebih cepat.
Anda harus membuat beberapa versi dari setiap gambar dan kemudian menentukan mana yang akan digunakan dalam HTML atau CSS Anda menggunakan dimensi viewport, kueri media, dll.
Penting: ukuran gambar akan berubah tergantung pada breakpoint tata letak situs (blok penyusun desain responsif).
Jika Anda ingin mengikuti standar Bootstrap, Anda dapat menggunakan kueri media berikut untuk memastikan bahwa gambar Anda responsif:
- 576px untuk ponsel potret
- 768px untuk tablet
- 992px untuk laptop
- 1200px untuk perangkat besar
Sekarang setelah kita mengetahui dimensi yang harus kita tentukan untuk setiap layar, bagaimana kita memberi tahu browser mana yang harus dipilih menurut layar pengunjung?
Anda dapat menggunakan atribut src, srcset, dan size untuk menyajikan gambar yang berbeda ke kepadatan (kualitas) tampilan yang berbeda di seluler atau desktop. Pada contoh di bawah, kami menggunakan atribut src untuk memberi tahu browser bahwa ukuran yang berbeda tersedia untuk gambar bunga:
Untuk secara otomatis menyajikan gambar responsif di situs WordPress Anda, Anda dapat menggunakan Cloudinary (tidak perlu penyiapan). Ini adalah solusi manajemen gambar dan video ujung ke ujung untuk situs web dan aplikasi seluler. Anda dapat dengan mudah mengunggah gambar dan video ke cloud dan mengotomatiskan manipulasi cerdas dari media tersebut (mengundurkan diri, pengoptimalan, dll.) tanpa menginstal perangkat lunak pengeditan lainnya.
Setelah dioptimalkan, Cloudinary menyajikan gambar melalui tiga CDN tersebut: Akamai, Fastly, dan CloudFront. Jika Anda ingin menghubungkan CDN Anda sendiri, Anda harus menghubungi mereka.
Ingin menguji apakah situs Anda menggunakan desain responsif? Buka Google Search Console > Mobile Friendly dan masukkan URL Anda.
3. Gunakan Format Gambar Berbasis Vektor
Strategi lain untuk mengubah ukuran gambar Anda dengan benar adalah dengan menggunakan format gambar berbasis vektor (seperti SVG). Gambar SVG dapat diskalakan tanpa batas dengan jumlah kode yang terbatas tanpa kehilangan kualitas.
Mengubah ukuran gambar sangat penting untuk kinerja web, tetapi Anda dapat mengikuti banyak teknik pengoptimalan lanjutan lainnya untuk memberikan peningkatan kecepatan ekstra pada situs web Anda.
Pernahkah Anda mendengar tentang pengkodean, kompresi, dan penggunaan format generasi berikutnya untuk membuat situs WordPress Anda lebih cepat? Di bagian selanjutnya, kami membahas beberapa strategi pengoptimalan gambar lagi yang dapat Anda terapkan dalam beberapa klik, berkat Imagify, salah satu plugin kompresi gambar terbaik untuk WordPress.
Membuat Gambar Lebih Cepat dengan Imagify
Dengan Imagify, Anda tidak dapat mengubah ukuran gambar secara manual. Namun, Anda dapat melakukan pengoptimalan ukuran file berikut:
- Kompres gambar besar Anda secara massal menggunakan tiga tingkat kompresi tanpa (hampir) memengaruhi kualitas: Normal, Ultra, dan Agresif.
| Pelajari lebih lanjut tentang perbedaan antara kompresi gambar lossless dan lossy di panduan khusus kami. |
Dalam hal kompresi, Imagify dapat menghemat hingga 95% dari ukuran file Anda! Pada contoh di bawah, kita tidak dapat mengubah ukuran gambar dengan nilai kita, tetapi kompresi telah memperkecil lebar dan tinggi gambar kita.
Seperti disebutkan di atas, pengoptimalan massal memungkinkan Anda untuk mengoptimalkan semua gambar sekaligus:
- Konversikan ke WebP, format generasi berikutnya yang direkomendasikan oleh Lighthouse.
Membungkus
Cara terbaik untuk menghindari peringatan gambar berukuran tepat adalah dengan mempelajari pengukuran berbagai area situs web Anda (logo, bilah sisi, bilah geser, gambar unggulan, dll.). Setelah Anda mengetahui dimensi mana yang diperlukan untuk setiap bagian, menampilkan ukuran yang tepat untuk perangkat apa pun akan sangat mudah!
Mengubah ukuran gambar bukan satu-satunya cara untuk mengoptimalkannya. Anda juga perlu mengompres (atau menyandikannya) dan menyajikannya dalam format generasi berikutnya seperti WebP.
Semua strategi tersebut akan secara signifikan mengurangi ukuran file gambar, menghasilkan waktu pengunduhan yang lebih cepat bagi pengunjung Anda. Dan kabar baiknya, mereka dapat diimplementasikan dengan mudah dengan plugin Imagify! Uji coba gratis tersedia sehingga Anda dapat mengoptimalkan beberapa gambar dan melihat bagaimana kinerja halaman Anda meningkat. Tidak ada risiko yang diambil!