Adakah menggunakan gambar SVG yang baik untuk prestasi laman web anda ' s?

SVG Images: Ideal for Web Design

Grafik vektor berskala (SVG) adalah pilihan yang sangat baik untuk format grafik web untuk banyak sebab, salah satu sebab penting ialah saiz fail yang agak kecil. Walau bagaimanapun, ini tidak mutlak. Mari kita lihat lebih mendalam.

(artikel ini adalah sebahagian daripada siri artikel dengan kerjasama SiteGround. Terima kasih atas sokongan anda terhadap rakan kongsi yang membuat SitePoint mungkin.)

Kelebihan imej vektor

Imej radikal (seperti .jpeg, .png, dan lain -lain) terdiri daripada piksel persegi yang diatur dalam grid. Oleh itu, imej yang lebih besar, lebih banyak piksel digunakan, mengakibatkan peningkatan saiz fail.

Bukan sahaja itu, skala grafik berasaskan piksel tidak baik. Apa maksudnya? Berikut adalah bunga dengan lebar asal 300 x 225 piksel.jpeg Imej:

ini adalah bagaimana imej yang sama memaparkan pada resolusi yang lebih tinggi:

Perhatikan penurunan ketara dalam tepi kabur, permukaan kabur, dan kualiti imej keseluruhan.

Memandangkan skrin retina adalah perkara biasa pada peranti pengguna hari ini, risiko ini berlaku dengan imej raster di laman web anda adalah tinggi. Alternatifnya adalah untuk menyediakan grafik resolusi tinggi, tetapi ini tentu saja boleh menjejaskan prestasi laman web.

dan

elemen

bernasib baik, HTML moden menyelesaikan masalah ini dengan imej yang responsif (iaitu unsur -unsur srcset dan <picture></picture>). Pada masa penulisan, semua pelayar utama versi terkini menyokong kedua -dua elemen ini kecuali IE11 dan Opera Mini.

Matlamat imej responsif adalah untuk menyediakan imej berkualiti terbaik untuk peranti yang digunakan. Ini melibatkan penyediaan imej di pelbagai resolusi, tetapi membolehkan penyemak imbas hanya memuatkan imej yang sesuai untuk mengakses fungsi peranti. srcset <picture></picture> Jika anda ingin mengetahui lebih lanjut mengenai bagaimana teknologi ini berfungsi, bagaimana untuk membina imej responsif dengan SRCSET, oleh Saurabh Kirtani, menyelidiki topik ini secara mendalam.

Berikut adalah apa yang kelihatan seperti dalam amalan:

Berikut adalah contoh elemen

: srcset

<img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/173975437655791.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="Is Using SVG Images Good for Your Website&#x27;s Performance? " />

Seperti yang anda lihat, walaupun hanya satu salinan imej yang akan disediakan mengikut peranti akses, kedua -dua teknologi memerlukan anda untuk menyediakan dan memuat naik beberapa salinan imej ke pelayan anda. Ini tidak akan menjejaskan prestasi laman web anda, tetapi akan memberi kesan negatif terhadap jalur lebar masa dan pelayan anda.

SVG adalah resolusi-bebas

Skala adalah DNA grafik vektor, manakala SVG adalah format imej vektor berasaskan XML. SVG terdiri daripada arahan lukisan geometri (seperti bentuk, laluan, garisan, dan lain -lain) yang bebas daripada saiz piksel. Dari perspektif saiz fail, tidak kira saiz imej yang diberikan, kerana arahan ini tetap sama.

Satu lagi makna resolusi-bebas adalah bahawa anda tidak perlu menyediakan salinan yang berbeza dari imej yang sama untuk peranti yang berbeza;

iaitu, beberapa faktor boleh menjejaskan saiz fail SVG, seperti kerumitan imej. Lebih kompleks arahan lukisan, semakin besar saiz fail.

Cadangan untuk fail SVG yang cekap

Secara umum, SVGs untuk laman web sangat mudah, seperti logo, peta, ikon, dll. Imej SVG mudah seperti itu mungkin mempunyai saiz fail yang lebih kecil berbanding dengan rakan -rakan raster mereka.

Walau bagaimanapun, terdapat beberapa langkah yang boleh anda ambil untuk mengoptimumkan saiz fail dan memastikan pelawat anda mempunyai pengalaman hebat di laman web anda.

Berikut adalah beberapa petua:

memasukkan prestasi ke dalam reka bentuk dari awal

Anda boleh menulis grafik SVG mudah sendiri atau menggunakan perpustakaan JavaScript seperti Snap.svg untuk menarik grafik vektor. Biasanya, untuk mendapatkan pekerjaan yang dilakukan, anda hanya perlu memulakan editor grafik vektor, seperti Adobe Illustrator.

Jika anda menggunakan editor grafik, memandangkan memudahkan kod SVG semasa fasa reka bentuk dapat mengurangkan risiko memusnahkan kerja apabila anda mengoptimumkan kemudian.

Langkah pertama yang boleh anda ambil ke arah ini adalah dengan betul menetapkan saiz kanvas dalam editor grafik pilihan anda. Sarah Drasner mengesyorkan menetapkannya kepada 100 x 100 piksel, bergantung kepada projek anda. Ini memastikan bahawa kanvas tidak terlalu kecil, mengakibatkan sejumlah besar tempat perpuluhan yang anda tidak dapat mengurangkan lewat tanpa mengacaukan grafik. Sebaliknya, saiz ini tidak terlalu besar. Malah, kanvas yang lebih besar bermakna terdapat sejumlah besar titik laluan yang sama.

Seterusnya, mengurangkan bilangan titik laluan adalah penting untuk mengurangkan saiz fail SVG. Ini bermakna menggunakan bentuk dan bukannya jalan sebanyak mungkin, tetapi juga menggabungkan pelbagai laluan ke jalan yang lebih sedikit melainkan jika anda merancang untuk menghidupkannya secara berasingan. Adobe Illustrator menyediakan panel "dipermudahkan" untuk mengurangkan lagi titik laluan. Ini adalah tutorial video pendek untuk menggambarkan penggunaannya.

eksport svg dengan cara pintar

menggunakan sepenuhnya fungsi eksport editor grafik. Kegagalan berbuat demikian boleh menyebabkan beberapa kod SVG diisi dengan tag proprietari dan kembung yang anda tidak perlukan.

Contohnya, jika anda mempunyai versi terkini Adobe Illustrator (CC 2017 pada masa penulisan), gunakan Eksport sebagai pilihan untuk mengeksport lukisan SVG dan pilih jenis fail .svg:

Panel Illustrator menyediakan beberapa tetapan untuk membantu anda mengurangkan saiz fail dan output bersih, hampir tag mesra rangkaian. Anda juga boleh pratonton kod dengan mengklik butang Kod Pameran dalam panel.

Untuk panduan terperinci setiap pilihan dalam Illustrator, pelbagai cara Geoff Graham untuk mendapatkan SVG dari Adobe Illustrator adalah artikel yang hebat.

memampatkan lebih banyak bait menggunakan alat pengoptimuman SVG

Selepas mengeksport grafik SVG, anda masih boleh mempersempitnya dengan alat pengoptimuman SVG yang sangat baik yang tersedia.

svgomg (dan versi GUI yang sepadan dengan webnya) dan editor SVG Peter Collingridge adalah alat yang paling popular.

Lihat "Mengoptimumkan Imej SVG" oleh Guillaume Cedric Marty untuk maklumat lanjut mengenai cara menggunakan SVGOMG.

membolehkan penghantaran fail SVG gzipping

Langkah terakhir dalam senarai pengoptimuman SVG adalah untuk membolehkan pemampatan GZIP pada pelayan. SVG hanyalah tag XML supaya ia dapat dimampatkan dengan mudah tanpa sebarang masalah.

Manfaat dalam pengurangan fail adalah penting. Lampiran J spesifikasi SVG 1.1 menunjukkan jadual perbandingan antara contoh fail SVG yang tidak dikompresi dan dimampatkan. Hasilnya sangat memihak kepada pemampatan, dengan saiz fail dikurangkan sebanyak 77-84%.

Kesimpulan

Grafik SVG adalah pilihan yang sangat baik untuk laman web. Apabila digunakan dengan ikon mudah, logo, dan lain -lain, ia biasanya melakukan lebih baik daripada rakan -rakan gratingnya, terutamanya jika anda mengambil sebilangan kecil langkah berjaga -jaga yang disenaraikan dalam artikel ini.

Teknik -teknik yang saya nyatakan di atas adalah tidak lengkap. Anda boleh meningkatkan kecekapan anda lagi. Untuk teknik pengoptimuman terperinci, sumber-sumber berikut mesti dibaca:

W3C SVG 1.1 Spesifikasi
svg di laman web
"Prestasi Tinggi SVG" oleh Sarah Drasner
"Teknik untuk mengoptimumkan penghantaran SVG di laman web" oleh Sara Soueidan
"Pengoptimuman SVG" oleh Andreas Larsen

Apakah aliran kerja pengoptimuman SVG anda? Klik kotak komen untuk dikongsi!

FAQs (FAQs) mengenai SVG dan Prestasi Laman Web

Apakah faedah menggunakan SVG untuk prestasi laman web?

Grafik vektor berskala (SVG) menyediakan banyak manfaat untuk prestasi laman web. Pertama, SVG bukan mengenai resolusi, yang bermaksud mereka mengekalkan kualiti mereka tanpa mengira saiz skrin atau resolusi. Ini amat bermanfaat untuk reka bentuk web yang responsif. Kedua, SVG biasanya mempunyai saiz fail yang lebih kecil berbanding dengan format imej lain seperti JPEG atau PNG, yang dapat meningkatkan kelajuan pemuatan halaman dengan ketara. Akhirnya, SVG boleh animasi dan dimanipulasi dengan CSS dan JavaScript, memberikan fleksibiliti dan interaktiviti yang lebih besar tanpa permintaan HTTP tambahan.

Bagaimana SVG mempengaruhi SEO?

SVG boleh mempengaruhi SEO secara positif dalam beberapa cara. Oleh kerana fail SVG kecil, ia dapat meningkatkan kelajuan pemuatan halaman, yang merupakan faktor ranking untuk Google. Di samping itu, tidak seperti format imej lain, SVG boleh diindeks dan merangkak oleh enjin carian. Ini bermakna anda boleh menambah teks alternatif dan metadata lain ke SVG, meningkatkan lagi usaha SEO anda.

Bolehkah SVG digunakan untuk grafik kompleks?

Ya, SVG sangat bagus untuk grafik kompleks seperti logo, ikon dan ilustrasi. Tidak seperti imej raster, SVGs tidak memutarbelitkan selepas diperbesar atau dikurangkan, menjadikannya sesuai untuk reka bentuk kompleks yang memerlukan paparan dalam pelbagai saiz. Di samping itu, SVG boleh digayakan dan animasi dengan CSS dan JavaScript, dengan itu mencapai reka bentuk yang lebih kompleks dan interaktif.

Adakah terdapat kelemahan menggunakan SVG?

Walaupun SVG menawarkan banyak faedah, terdapat juga beberapa kelemahan yang berpotensi untuk dipertimbangkan. Sesetengah pelayar yang lebih tua mungkin tidak menyokong SVG, yang mungkin menjejaskan bagaimana laman web anda memaparkan kepada pengguna tertentu. Di samping itu, sementara SVGs sangat bagus untuk grafik yang sederhana atau sederhana, mereka mungkin bukan pilihan terbaik untuk imej jenis yang sangat terperinci atau foto.

Bagaimana untuk mengoptimumkan SVG untuk prestasi yang lebih baik?

Terdapat pelbagai cara untuk mengoptimumkan SVG untuk prestasi yang lebih baik. Salah satu cara ialah mengecilkan kod SVG, yang akan menghapuskan aksara dan ruang yang tidak perlu, dengan itu mengurangkan saiz fail. Anda juga boleh menggunakan mampatan gzip untuk mengurangkan saiz fail. Juga, pertimbangkan untuk menggunakan CSS dan JavaScript untuk membuat animasi SVG atau memanipulasi SVG dan bukannya membenamkan pelbagai fail SVG.

Bolehkah SVG meningkatkan prestasi laman web mudah alih?

Ya, SVG dapat meningkatkan prestasi laman web mudah alih dengan ketara. Oleh kerana SVGs adalah resolusi bebas, mereka dapat mengekalkan kualiti mereka pada saiz skrin, menjadikannya sesuai untuk reka bentuk web responsif. Di samping itu, saiz fail yang lebih kecil dapat meningkatkan kelajuan pemuatan halaman, yang sangat penting bagi pengguna mudah alih yang mungkin mempunyai sambungan internet yang lebih perlahan.

Bagaimanakah SVG dibandingkan dengan format imej lain dari segi prestasi?

SVG umumnya lebih baik daripada format imej lain dari segi prestasi. Saiz fail mereka adalah kecil, yang boleh meningkatkan kelajuan pemuatan halaman. Tidak seperti imej raster yang mungkin menjadi pixelated apabila dizum masuk, mereka mengekalkan kualiti mereka pada sebarang saiz. Walau bagaimanapun, untuk imej yang sangat terperinci atau foto, format seperti JPEG atau PNG mungkin lebih sesuai.

Bolehkah saya menggunakan SVG untuk membuat animasi?

Ya, anda boleh menghidupkan SVG menggunakan CSS atau JavaScript. Ini membolehkan reka bentuk yang lebih interaktif dan menarik tanpa memerlukan permintaan HTTP tambahan. Walau bagaimanapun, ingat bahawa animasi kompleks boleh meningkatkan saiz fail dan boleh menjejaskan prestasi.

Adakah SVG mudah diakses?

Ya, SVG boleh diakses dengan menambah teks alternatif dan metadata lain. Ini membolehkan pembaca skrin menggambarkan imej kepada pengguna dengan gangguan visual, dengan itu meningkatkan kebolehcapaian ke laman web anda.

Bagaimana untuk belajar membuat dan menggunakan SVG?

Terdapat banyak sumber yang tersedia dalam talian untuk belajar SVG. Laman web seperti dokumentasi web MDN, trik CSS, dan pelbagai bootcamps pengekodan menyediakan tutorial dan panduan untuk membuat dan menggunakan SVG. Di samping itu, terdapat banyak alat seperti Adobe Illustrator dan Inkscape yang dapat membantu anda membuat grafik SVG.

Atas ialah kandungan terperinci Adakah menggunakan gambar SVG yang baik untuk prestasi laman web anda ' s?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!