Cara Mengoptimalkan Gambar di Postingan Blogger: Panduan Lengkap dengan Kode HTML dan CSS

Optimasi gambar merupakan salah satu aspek penting dalam mempercepat situs web dan meningkatkan pengalaman pengguna. Dalam artikel ini, kami akan membahas langkah-langkah mendalam untuk mengoptimalkan gambar di postingan Blogger menggunakan kode HTML dan CSS. Dengan mengikuti panduan ini, Anda dapat memastikan gambar di situs Anda memiliki kualitas terbaik, kecerahan yang sesuai dengan standar mesin pencari, dan lulus uji kecepatan pada halaman (pagespeed).

Langkah-langkah Mengoptimalkan Gambar di Postingan Blogger

Berikut ini Langkah-langkah Mengoptimalkan Gambar di Postingan Blogger:

1. Optimalkan Ukuran Gambar:

Sangat penting untuk menggunakan gambar dengan ukuran yang tepat dan telah dioptimalkan sebelum diunggah ke situs Anda. Gunakan alat kompresi gambar untuk mengurangi ukuran file tanpa mengorbankan kualitas.

Salah satu alasan pengguna untuk mengoptimalkan ukuran gambar adalah agar gambar tidak terlalu besar. Gunakan gambar dengan ukuran sebenarnya yang Anda butuhkan, dan pastikan gambar yang diunggah telah dioptimalkan dengan alat kompresi gambar.

2. Responsive Images:

Gunakan tag <img /> dengan atribut srcset untuk menyediakan gambar dengan resolusi yang berbeda sesuai dengan perangkat pengguna. Ini membantu memastikan gambar ditampilkan dengan baik di berbagai perangkat dan ukuran layar.

Contoh:

<img src="gambar.jpg" 
     srcset="gambar-kecil.jpg 480w,
             gambar-sedang.jpg 768w,
             gambar-besar.jpg 1200w"
     sizes="(max-width: 480px) 100vw,
            (max-width: 768px) 80vw,
            1200px"
     alt="Deskripsi Gambar">

Kode diatas adalah contoh penggunaan elemen <img> dengan atribut srcset, sizes, dan alt. Mari kita jelaskan setiap bagian dari kode tersebut:

• <img>: Ini adalah tag HTML yang digunakan untuk menampilkan gambar di halaman web.
• src="gambar.jpg": Atribut ini menentukan gambar yang akan ditampilkan jika browser tidak mendukung atribut srcset atau ukuran yang diberikan.
• srcset="gambar-kecil.jpg 480w, gambar-sedang.jpg 768w, gambar-besar.jpg 1200w": Atribut ini memberi tahu browser beberapa versi gambar dengan ukuran berbeda, diikuti oleh lebar gambar (dalam piksel). Browser akan memilih gambar terbaik berdasarkan lebar tampilan perangkat pengguna.
• sizes="(max-width: 480px) 100vw, (max-width: 768px) 80vw, 1200px": Atribut ini memberi tahu browser bagaimana menyesuaikan lebar gambar pada berbagai lebar layar. Misalnya, jika lebar layar maksimum 480 piksel, gambar akan menggunakan 100% dari lebar layar (100vw). Jika lebar layar antara 481 dan 768 piksel, gambar akan menggunakan 80% dari lebar layar (80vw). Jika lebar layar melebihi 768 piksel, gambar akan tetap memiliki lebar 1200 piksel.
• alt="Deskripsi Gambar": Atribut ini memberikan deskripsi teks untuk gambar. Ini penting untuk aksesibilitas dan membantu pengguna yang tidak dapat melihat gambar, serta mesin pencari memahami konten gambar.

Dengan menggunakan kombinasi atribut srcset, sizes, dan alt, Anda memungkinkan gambar menyesuaikan diri dengan berbagai lebar layar perangkat, memastikan tampilan yang optimal dan pengalaman pengguna yang baik, terlepas dari ukuran layar yang digunakan.

3. Gunakan Format WebP:

Ganti format gambar menjadi WebP, format gambar modern yang memberikan kualitas yang baik dengan ukuran file yang lebih kecil. Pastikan gambar yang Anda gunakan telah dikonversi ke format WebP.

4. Lazy Loading:

Tambahkan atribut loading="lazy" ke tag <img /> untuk memastikan gambar dimuat hanya saat pengguna melihatnya. Ini mengurangi waktu pemuatan halaman, terutama untuk gambar di bagian bawah halaman.

5. CSS untuk Kecerahan dan Kontras:

Gunakan properti CSS filter untuk mengatur kecerahan dan kontras gambar. Dengan menyesuaikan nilai brightness dan contrast, Anda dapat mencapai tampilan yang optimal sesuai dengan desain situs Anda.

img {
  filter: brightness(1.2) contrast(1.2);
}

Kode diatas adalah contoh penggunaan properti CSS filter pada elemen gambar (<img />) di situs web. Properti filter digunakan untuk mengubah tampilan visual elemen tersebut. Dalam kasus ini:

• brightness(1.2): Meningkatkan kecerahan gambar sebanyak 20% dari kecerahan aslinya. Nilai 1.0 adalah kecerahan normal, nilai di atas 1.0 meningkatkan kecerahan, sementara nilai di bawah 1.0 menguranginya.
• contrast(1.2): Meningkatkan kontras gambar sebanyak 20% dari kontras aslinya. Nilai 1.0 adalah kontras normal, nilai di atas 1.0 meningkatkan kontras, sementara nilai di bawah 1.0 menguranginya.

Dengan menggabungkan kedua properti ini, gambar akan terlihat lebih terang dan memiliki perbedaan warna yang lebih jelas. Penggunaan nilai numerik (misalnya, 1.2 untuk kecerahan dan kontras) dapat disesuaikan sesuai kebutuhan desain situs web Anda. Semakin besar nilai yang Anda berikan, semakin terang dan kontras gambar tersebut.

6. Batasi Lebar Gambar:

Tentukan lebar maksimum gambar menggunakan properti CSS max-width. Ini memastikan gambar tidak melebar lebih dari lebar tata letak halaman, menjaga estetika situs Anda.

img {
  max-width: 100%;
  height: auto;
}

Kode CSS diatas img { max-width: 100%; height: auto; } digunakan untuk mengontrol tata letak gambar di halaman web. Mari kita jelaskan arti dari setiap properti:

max-width: 100%;
Properti ini memastikan bahwa lebar gambar tidak akan melebihi lebar elemen induknya. Dengan kata lain, gambar tidak akan melebar lebih dari lebar area di mana itu ditempatkan. Ini memastikan gambar akan tetap proporsional dan tidak merusak tata letak halaman.

height: auto;
Properti ini memastikan bahwa tinggi gambar akan disesuaikan secara otomatis sesuai dengan lebar gambar yang diatur oleh max-width: 100%;. Dengan mengatur tinggi gambar ke "auto", gambar akan tetap proporsional, dan tidak akan terdistorsi, meskipun lebar gambar disesuaikan.

Dengan menggunakan kombinasi max-width: 100%; dan height: auto;, gambar akan selalu menyesuaikan diri dengan tata letak halaman, memastikan tampilan yang baik dan menjaga proporsi gambar, bahkan ketika ukuran layar atau tata letak halaman berubah. Kode ini sangat berguna dalam desain responsif, di mana halaman web harus dapat menyesuaikan diri dengan berbagai perangkat dan ukuran layar yang berbeda.

7. Tambahkan Alt Text:

Selalu sertakan atribut alt yang deskriptif untuk setiap gambar. Ini tidak hanya membantu mesin pencari memahami konten gambar, tetapi juga meningkatkan aksesibilitas situs web.

8. Implementasi Kode HTML dan CSS:

Terapkan semua langkah-langkah di atas pada tag <img> di postingan Anda. Contoh implementasi lengkap dapat ditemukan di bagian akhir artikel ini. Misalnya pada kode gambar di postingan yang saya gunakan seperti ini:

<figure style="border: 1px solid rgb(204, 204, 204); box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 4px; margin: 0px; padding: 10px;">
    <img alt="Blogger Templates SEO" height="200" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdE-BHPMi0byAYExYOAVNbSPhnruOONYQIy1clvAHFIV-x8lmNkmWPRF0xvGvQXpp9nIp_7lUqErRJSacRRfk9zQxvH5vU-cSGQkYWCJvPYA0WIhktfoXF4gD8KO_1tOxNGGruWj-KJUQ/s0/How-To-Edit-Blogger-Template-xml-and-css.webp" width="800" style="max-width: 100%; height: auto; filter: brightness(1.2) contrast(1.2);" />
    <figcaption style="margin: 10px 0px; text-align: center;">
        <span style="font-size: 12px;">Blogger Templates</span>
    </figcaption>
</figure>

Dengan mengikuti langkah-langkah ini, Anda dapat mengoptimalkan gambar di postingan Blogger Anda agar memenuhi standar kecerahan yang sesuai dengan mesin pencari dan memastikan performa halaman yang baik. Pastikan untuk memeriksa hasilnya menggunakan alat seperti Google PageSpeed Insights untuk memastikan bahwa halaman Anda memenuhi standar kecepatan dan kualitas gambar yang diinginkan.

Kesimpulan

Dengan mengoptimalkan gambar di postingan Blogger Anda menggunakan teknik-teknik di atas, Anda dapat memastikan situs Anda memiliki kualitas gambar terbaik, mematuhi standar kecerahan mesin pencari, dan memberikan pengalaman pengguna yang optimal. Pastikan untuk memeriksa hasilnya menggunakan alat seperti Google PageSpeed Insights untuk memastikan bahwa halaman Anda memenuhi standar kecepatan dan kualitas gambar yang diinginkan.

Dengan menerapkan langkah-langkah ini, situs Blogger Anda siap untuk memberikan pengalaman yang cepat dan menyenangkan bagi pengunjung. Selamat mengoptimalkan gambar-gambar Anda dan tingkatkan performa situs Anda secara keseluruhan!