Kod HTML Gambar Baru Dapat Membuat Laman Web Anda Beban Lebih Cepat

Isi kandungan:

Anonim

Anda telah mendengar bahawa Web telah menjadi lebih visual dan imej yang hebat dalam laman web perniagaan anda adalah penting.

Tetapi imej-imej tersebut mungkin menjadi pelawat pengunjung laman web anda. Imej akaun untuk 1MB daripada 1.7MB laman web purata mengandungi.

Ini mungkin tidak banyak masalah untuk pelawat anda di komputer desktop menggunakan sambungan internet berkelajuan tinggi. Walau bagaimanapun, jika anda melihat atau ingin melihat peningkatan trafik dari pelawat mudah alih, imej tersebut mungkin menjadi masalah. Imej-halaman web berat boleh mengambil masa yang lama untuk memuat turun. Pengunjung menjadi kecewa dan meninggalkan laman web anda.

$config[code] not found

Anda mungkin telah melaksanakan reka bentuk Web responsif, memikirkan bahawa menyelesaikan semua masalah mudah alih anda. Dan benar bahawa reka bentuk Web responsif menyelesaikan beberapa masalah. Ia secara automatik mengatur dan memaparkan elemen tapak anda untuk dilihat pada skrin mudah alih yang lebih kecil dan sempit.

Tetapi reka bentuk web responsif bukanlah jawapan kepada segala-galanya. Ia tidak semestinya menyelesaikan masalah muat turun imej. Walaupun dengan reka bentuk responsif, banyak kali imej-imej kelas berat masih dimuat turun pula. Sebagai pakar prestasi Web Yoav Weiss ringkasnya menunjuk pada laman web Opera:

"Reka Bentuk Web Responsif RWD menggabungkan keupayaan penyemak imbas baru dan teknik CSS untuk membuat laman web yang menyesuaikan diri dengan peranti yang memaparkannya, dan kelihatan ideal di mana-mana sahaja. Itu membolehkan pemaju untuk berhenti bimbang tentang pengesanan peranti yang tidak boleh dipercayai dan memikirkan laman web mereka dari segi dimensi viewport.

Tetapi, walaupun tapak RWD kelihatan berbeza pada setiap peranti, di bawahnya, kebanyakannya terus memuat turun sumber yang sama untuk semua peranti. "

Baru Elemen kod HTML boleh mengubahnya.

Apa itu Unsur HTML Imej?

Sekiranya anda tidak mengetahui apa-apa mengenai kod HTML, definisi bukan teknikal ialah: bahasa istimewa. Apabila digunakan di sebalik tabir di kod tapak web anda, bahasa ini memberikan petunjuk bagaimana penyemak imbas harus memaparkan teks dan imej.

Unsur Picture baru adalah jenis bahasa markup HTML. Ia ditulis seperti ini (mengikut Kumpulan Komuniti Imej Responsif):

Unsur Picture adalah mengenai responsif imej, tidak responsif reka bentuk.

Bagi orang-orang perniagaan bukan teknikal, perbezaan itu kelihatan kecil. Tetapi apabila ia datang kepada prestasi laman web anda pada peranti mudah alih, ia mungkin penting.

Menurut laporan ArsTechnica, elemen penanda baru menangani masalah yang disebabkan oleh imej yang dimaksudkan untuk dilihat pada monitor bersaiz penuh - imej yang tidak diterjemahkan dengan baik ke peranti mudah alih. The kod markup memberitahu penyemak imbas web seperti Firefox untuk memuatkan dan memaparkan imej yang betul (baca: lebih kecil):

"Apabila pelayar menghadapi elemen Picture, ia pertama kali menilai sebarang peraturan yang mungkin ditentukan oleh pemaju Web. *** Kemudian, selepas menilai pelbagai peraturan, pelayar memilih imej terbaik berdasarkan kriterianya sendiri. Ini adalah satu lagi ciri bagus kerana kriteria penyemak imbas boleh menyertakan tetapan anda. Sebagai contoh, penyemak imbas masa depan mungkin menawarkan pilihan untuk menghentikan imej tinggi daripada memuatkan 3G, tanpa mengira apa yang mana elemen Unsur gambar pada halaman boleh dikatakan. Sebaik sahaja penyemak imbas tahu imej mana yang menjadi pilihan terbaik, ia sebenarnya memuat dan memaparkan imej itu dalam elemen img lama yang baik.

… apa yang berlaku ialah gambar membungkus tag img. Jika pelayar terlalu tua untuk mengetahui apa yang perlu dibuat elemen, maka ia memuat tag img belakang. Semua faedah aksesibiliti kekal kerana alt atribut masih berada pada elemen img. "

Tidak semua pemaju menerima elemen Picture baru pada mulanya. Kisah Ars Technica menggariskan proses yang dipimpin para pemimpin dalam komuniti pembangunan Web untuk sampai ke titik di mana elemen berdiri hari ini. Di sepanjang jalan, terdapat juga kempen crowdfunding yang berjaya di Indiegogo yang menampilkan Weiss bermain gitar.

$config[code] not found

Tetapi isu itu kini muncul diselesaikan, dengan elemen HTML gambar yang baru diterima pakai.

Perkara Utama Mengenai Elemen

The elemen markup akan datang ke pelayar berhampiran anda. Pada akhir tahun 2014 sokongan untuk itu dijangka diaktifkan secara lalai dalam pelayar Chrome dan Firefox. Opera juga dalam perjalanan. Dan versi terbaru penyemak imbas Safari oleh Apple juga kelihatan dalam karya-karya itu. Microsoft "mempertimbangkannya" untuk Internet Explorer, menurut ArsTechnica.

Sebagai orang perniagaan, perkara penting yang perlu diketahui ialah markup dapat mempercepat laman web Anda, terutama pada peranti mudah alih. Itu akan menjadi baik untuk pelawat laman web anda.

Melaksanakan unsur HTML Imej untuk imej adalah sesuatu yang perlu dibincangkan dengan pemaju Web anda. Orang yang berfikiran secara teknis dan orang yang melakukannya boleh pergi ke sini untuk belajar cara menggunakan elemen Picture. Ia adalah penulisan yang hebat oleh Scott Gilbertson.

Rasa bebas dilaksanakan markup dalam kod tapak web anda sekarang. Walaupun program penyemak imbas tidak memahami markup baru, terdapat perintah sandaran untuk menggunakan tag imej HTML standard, menulis Gilbertson.

Imej: Shutterstock; RICG

9 Komen ▼