Postingan

Menampilkan postingan dengan label Image

4 Format Gambar Terbaik Untuk Performa Website / Blog

Gambar
Salam blogger, pada kesempatan ini saya akan menjelaskan sedikit pengetahuan saya tentang situs web yaitu rekomendasi ekstensi atau format gambar yang terbaik untuk meningkatkan performa situs web. Seperti biasanya artikel ini akan saya buka dengan informasi mengenai format gambar yang saya maksud. Apa yang dimaksud dengan format gambar? Format gambar adalah ekstensi gambar yang menunjukkan jenis, karakteristik, kualitas dan tingkat kompresi gambar tersebut contohnya: .jpg (jpeg), .jp2 (jpeg 2000), .jxr (jpeg xr), .png, .gif, .webp dan lain-lain Untuk website sedikitnya ada enam ekstensi atau format gambar yang paling umum digunakan dan didukung oleh banyak browser terutama browser modern, tetapi hanya 4 diantara mereka (format gambar) yang layak disebut sebagai format gambar terbaik untuk performa website /blog. Langsung saja ke topik pembahasan yang saya janjikan yaitu rekomendasi ekstensi atau format gambar yang terbaik untuk performa website atau blog, simak dengan seksama. 1...

PSI: Gambar Tidak Memiliki Width Dan Height, Ini Cara Mengatasinya

Gambar
PSI (PageSpeed Insights) merupakan tool audit web yang cukup akurat untuk saat ini, metrik yang digunakan PSI benar-benar membantu dalam mengoptimalkan halaman web. Salah satunya adalah CLS (Cumulative Layout Shift) atau dalam bahasa indonesia disebut dengan Pergeseran Tata Letak Kumulatif. Ada banyak hal yang mempengaruhi CLS web/blog, tetapi yang paling sering terjadi adalah ketika elemen gambar tidak memiliki width dan height yang jelas (tidak tepat). [ads id="ads1"] Sebagai contoh ketika saya mengaudit blog dengan PSI ( PageSpeed Insights ) terdapat masalah pada elemen logo dengan diagnostik "elemen gambar tidak memiliki width dan height yang jelas" yang menyebabkan kekacauan pada CLS halaman. Solusinya sebenarnya sudah jelas dipaparkan oleh PSI yaitu dengan menyetel lebar dan tinggi yang jelas pada elemen gambar maka akan mengurangi pergeseran tata letak dan memperbaiki CLS seperti yang tertera pada gambar di bawah ini. Jika hal serupa terjadi pada l...

Cara Optimasi Gambar Untuk SEO Dan Performa

Gambar
Di website atau blog optimasi gambar atau lebih populer disebut dengan image optimization adalah trik pengoptimalan gambar di mesin pencari dan performanya (waktu yang di butuhkan untuk memuat gambar). Spesifiknya optimasi gambar pada website adalah mengoptimalkan performa gambar di mesin pencari dan mengoptimalkan pengalaman pengguna dengan cara mengecilkan size, file dan memilih rasio kompresi gambar yang terbaik. Semua blogger mungkin sudah tau bahwa konten visual seperti gambar sangat membantu dalam mengembangkan situs web. Berdasarkan analisa pakar, konten yang memiliki gambar menerima 94% lebih banyak view daripada halaman atau konten yang hanya berbasis teks saja. Hal itu dikarenakan konten visual (gambar) mampu menjelaskan apa yang tidak bisa dijelaskan oleh teks, selain itu pencarian mode gambar di mesin telusur juga sangat populer dan hampir dipastikan website/blog dengan nice konten yang mengunggulkan gambar lah yang paling diuntungkan. Terlepas dari semua itu gambar yang ...

Cara Membuat Progressive Images

Gambar
Dalam mengembangkan situs web konten visual seperti gambar (image) merupakan objek yang mengambil peranan besar, tetapi jika tidak hati-hati gambar juga bisa menjadi penyebab runtuhnya pengalaman pengguna di situs web anda karena gambar JPEG yang dimuat dengan lambat dapat menurunkan reputasi website dan konten. Oleh karena itu, untuk menjaga pengalaman pengguna, saya memilih gambar (JPEG Progressive) sebagai koneten visual di website atau blog saya karena gambar jpg progresif atau lebih umum disebut dengan progressive image lebih ramah pengguna dibandingkan JPEG biasa. Kelebihan Progressive Images Progresif image dimuat langsung di situs web dan di awal pemuatan halaman progresif images akan dimuat dengan resolusi rendah terlebih dahulu dan kemudian resolusinya ditingkatkan saat situs web telah dimuat sepenuhnya. [ Lihat selengkapnya ] Dengan demikian pengguna tidak perlu menunggu lebih lama untuk melihat konten dan berinteraksi di website atau blog. Hal itulah yang menjadi kelebi...

Mengecilkan Bobot Gambar (Compress Image File Size) Hingga 35Kb

Gambar
Mengecilkan Bobot Gambar (Compress Image File Size) Hingga 35Kb - Artikel ini saya dedikasikan untuk kamu yang profesi sebagai blogger atau pengelola website guna mendapatkan performa website yang lebih baik (optimal) yaitu dengan menggunakan progressive images dan bobot file gambar (image file size) yang dikecilkan. Tujuan Bobot gambar atau lebih umum disebut dengan istilah image file size merupakan faktor utama yang mempengaruhi performa website/blog, Oleh karena itu untuk mendapatkan performa situs web yang maksimal ukuran atau bobot file gambar perlu dikecilkan dengan tujuan agar server tidak terbebani oleh gambar yang ada di situs web yang berukuran (filesize) sangat besar. Semakin kecil bobot (file size) gambar maka semakin baik pula performa website dan sebaliknya bobot gambar yang sangat besar akan mengurangi pagespeed blog atau website anda. Pertanyan : Bagaimana cara yang baik untuk mengkompres/mengecilkan ukuran file (bobot) gambar? Jawaban : Untuk mendapatkan hasil ...

Mengubah JPG Menjadi JPEG 2000, JXR, Dan WebP

Gambar
Kenapa harus mengubah jpg standar ke jpeg 2000, jpeg xr maupun webp? Alasan yang paling sederhana untuk mengubah atau mengconvert format file JPEG Standar menjadi JPEG 2000, JPEG XR, maupun WebP adalah demi mendapatkan performa terbaik pemuatan gambar di situs web /blog. Format gambar seperti JPEG 2000, JPEG XR, dan WebP memberikan tingkat kompresi yang lebih baik daripada JPEG Standar dan PNG. Hal tersebut tentunya menjadi alasan yang kuat untuk mengkonvert atau mengubah file JPEG Standar (JPG) menjadi JPEG 2000, JPEG XR, Dan WebP. Secara gamblang saya jelaskan bahwa pemuatan file jpeg 2000, jpeg xr maupun webp lebih cepat dan konsumsi data juga lebih kecil jika dibandingkan dengan format file jpeg standar (JPG, JPEG , dan JPE). Tentunya website atau blog juga dapat dimuat dengan lebih cepat jika menggunakan gambar dengan format file jpeg 2000, jpeg xr maupun webp. Cara Mengubah File JPG Menjadi JPEG 2000 Buka file (gambar) menggunakan photoshop Set-up gambar anda sesuai keinginan S...