Anda pernah mendengar bahwa Web telah menjadi gambar yang lebih visual dan hebat di situs web bisnis Anda adalah penting.
Tetapi gambar-gambar itu mungkin menjadi momok bagi pengunjung situs web Anda. Akun gambar untuk 1MB dari 1,7MB halaman web rata-rata berisi.
Ini mungkin bukan masalah bagi pengunjung Anda di komputer desktop yang menggunakan koneksi Internet berkecepatan tinggi. Namun, jika Anda melihat atau ingin melihat peningkatan lalu lintas dari pengunjung seluler, gambar-gambar itu bisa menjadi masalah. Halaman Web yang berat gambar bisa membutuhkan waktu lama untuk diunduh. Pengunjung frustrasi dan meninggalkan situs Anda.
$config[code] not foundAnda mungkin telah menerapkan desain Web yang responsif, dengan pemikiran yang menyelesaikan semua masalah seluler Anda. Dan memang benar bahwa desain Web yang responsif menyelesaikan beberapa masalah. Secara otomatis mengatur dan menampilkan elemen situs Anda untuk dilihat pada layar seluler yang lebih kecil dan lebih sempit.
Tetapi desain Web yang responsif bukan jawaban untuk segalanya. Itu belum tentu menyelesaikan masalah unduhan gambar. Bahkan dengan desain responsif, gambar-gambar kelas berat itu masih sering diunduh. Seperti yang ditunjukkan oleh spesialis kinerja Web, Yoav Weiss dengan singkat di situs web Opera:
“Desain Web Responsif RWD menggabungkan kemampuan browser baru dan teknik CSS untuk membuat situs web yang beradaptasi dengan perangkat yang menampilkannya, dan terlihat ideal di mana-mana. Itu memungkinkan pengembang untuk berhenti khawatir tentang deteksi perangkat yang tidak dapat diandalkan dan memikirkan situs web mereka dalam hal dimensi viewport.
Tetapi, meskipun situs RWD terlihat berbeda di setiap perangkat, di bawahnya, sebagian besar dari mereka terus mengunduh sumber daya yang sama untuk semua perangkat. ”
Yang baru
Jika Anda tidak tahu apa-apa tentang kode HTML, definisi non-teknis adalah: itu bahasa khusus. Saat digunakan di belakang layar dalam kode situs web Anda, bahasa ini memberikan instruksi bagaimana browser harus menampilkan teks dan gambar. Elemen gambar baru adalah jenis bahasa markup HTML. Itu ditulis seperti ini (per Kelompok Komunitas Gambar Responsif): Elemen gambar adalah tentang responsif gambar, tidak responsif Desain. Bagi pelaku bisnis non-teknis, perbedaan itu mungkin tampak kecil. Tetapi ketika menyangkut kinerja situs Anda di perangkat seluler, itu bisa jadi signifikan. Menurut laporan ArsTechnica, elemen markup baru mengatasi masalah yang disebabkan oleh gambar yang seharusnya dilihat pada monitor ukuran penuh - gambar yang tidak diterjemahkan dengan baik ke perangkat seluler. Itu
“Ketika browser menemukan elemen Picture, pertama-tama mengevaluasi setiap aturan yang mungkin ditentukan pengembang Web. *** Kemudian, setelah mengevaluasi berbagai aturan, browser memilih gambar terbaik berdasarkan kriteria sendiri. Ini adalah fitur bagus lainnya karena kriteria browser dapat memasukkan pengaturan Anda. Misalnya, peramban masa depan mungkin menawarkan opsi untuk menghentikan gambar beresolusi tinggi dari pemuatan melalui 3G, terlepas dari apa yang dikatakan elemen Gambar pada halaman. Setelah browser tahu gambar mana yang merupakan pilihan terbaik, itu benar-benar memuat dan menampilkan gambar itu dalam elemen img lama yang baik. … yang terjadi adalah Picture membungkus tag img. Jika browser terlalu tua untuk mengetahui apa yang harus dibuat Tidak semua pengembang menerima elemen Gambar baru pada awalnya. Kisah Ars Technica menguraikan proses yang dilakukan para pemimpin dalam komunitas pengembangan Web untuk sampai ke titik di mana $config[code] not found Tetapi masalah sekarang tampaknya diselesaikan, dengan elemen HTML gambar baru diadopsi. Itu
Sebagai pebisnis, hal penting yang perlu diketahui adalah itu Menerapkan elemen Gambar HTML untuk gambar adalah sesuatu untuk didiskusikan dengan pengembang Web Anda. Orang yang berpikiran teknis dan mandiri bisa pergi ke sini untuk mempelajari cara menggunakan elemen Picture. Ini adalah penulisan yang sangat baik oleh Scott Gilbertson. Jangan ragu untuk mengimplementasikan
Gambar: Shutterstock; RICG Apa itu Elemen Gambar HTML?
Poin Penting Tentang
