Penukar SVG ke WebP
Hasilkan fail vektor sebagai WebP pada lebar piksel yang tepat seperti yang diperlukan reka letak Anda. Berguna apabila CMS menolak muat naik SVG, pratonton media sosial memerlukan bitmap, atau ilustrasi mempunyai terlalu banyak laluan sehingga pelayar lambat melukisnya.
Penukar Imej
atau seret Fail JPG, JPEG, JPE … ke sini ·
Maks 95 MB setiap fail· Sehingga 20 fail· Dipadam selepas 30 minit
Fail diproses pada pelayan kami dan dipadam selepas 30 minit.
85 mengekalkan foto kelihatan sama dengan asal. Turunkan hanya apabila anda memerlukan fail yang lebih kecil.
JPG, BMP dan EPS tiada kelutsinaran. Piksel lutsinar diisi dengan warna ini.
Warna hex yang digunakan di belakang piksel lutsinar, cth. #FFFFFF.
Format ini hanya memuatkan satu imej. Pilih output GIF atau WebP jika anda mahu mengekalkan animasi.
Ikon berbilang saiz mengandungi beberapa resolusi dalam satu fail; pelayar dan sistem pengendalian memilih yang diperlukan.
Kekalkan dimensi asal, atau masukkan satu sisi dan nisbah bidang dikekalkan.
Piksel untuk sisi yang anda pilih di atas.
Peratusan daripada dimensi asal.
sRGB sesuai untuk skrin dan web. Kekalkan yang asal untuk aliran kerja cetakan; skala kelabu membuang warna.
Metadata sahaja, 0 mengekalkan nilai asal. Pencetak dan sesetengah portal membaca nombor ini; ia tidak mengubah dimensi piksel.
Cara menggunakan alat ini
- 1
Muat naik SVG
Tambah sehingga 20 fail .svg yang dieksport daripada Figma, Illustrator, Inkscape atau pustaka carta, setiap satu 95 MB.
- 2
Tetapkan lebar output
Ubah saiz imej output bermula pada lebar 1200 px; tukarkannya kepada dua kali ganda lebar yang akan dipaparkan imej pada halaman. Kualiti ialah 90, atau tandakan Tanpa kehilangan di bawah Tetapan lanjutan untuk logo dan ikon rata.
- 3
Tukar ke WebP
Tekan Tukar ke WebP dan muat turun fail atau satu ZIP. Kawasan lutsinar kekal lutsinar.
Bagaimana untuk menukar SVG ke WebP pada saiz tertentu?
Muat naik SVG, tetapkan Ubah saiz imej output kepada lebar piksel yang anda perlukan (1200 px secara lalai), dan tekan Tukar ke WebP. Vektor dilukis semula pada lebar itu, jadi tiada apa yang dibesarkan atau menjadi kabur.
Bila SVG patut ditukar kepada WebP
SVG menjadi Syor W3C pada 2001 dan ialah format yang tepat untuk kebanyakan logo dan ikon: teks beberapa kilobait yang kekal tajam pada sebarang zum. Masalah bermula apabila fail keluar daripada kod anda sendiri. WordPress dan banyak pembina kedai yang dihoskan menolak muat naik SVG, pratonton pautan di Facebook, LinkedIn dan X diambil sebagai bitmap, dan alat reka bentuk mengeksport ilustrasi dengan kesan raster terbenam yang menjadikan fail vektor beberapa megabait markah.
WebP, yang dikeluarkan Google pada 2010 dan akhirnya disokong Safari pada versi 14 pada 2020, ialah bitmap yang dibina untuk tugas itu: lebih kecil daripada PNG pada rupa yang sama, dengan saluran alfa sebenar. Merender SVG terus ke WebP pada saiz akhir melangkau lencongan biasa melalui eksport PNG yang besar. Jika anda mahukan sebaliknya, halaman kami tentang WebP ke SVG menerangkan mengapa arah itu memerlukan penjejakan, bukan penukaran.
Saiz SVG ke WebP untuk ruang web biasa
1200 × 630 px
Pratonton pautan Open Graph
Imej yang dipaparkan apabila halaman dikongsi
1920 × 1080 px
Ilustrasi hero lebar penuh
Meliputi kebanyakan skrin desktop pada 1×
1600 × 900 px
Imej lajur blog pada 2×
Untuk lajur kandungan 800 px
400 × 100 px
Logo pengepala pada 2×
Untuk ruang logo 200 × 50 px
SVG
Scalable Vector Graphics
SVG ialah format vektor berasaskan XML yang dipiawaikan oleh W3C pada 2001. Daripada piksel, ia menerangkan bentuk, laluan dan teks, jadi kekal tajam pada sebarang saiz dan biasanya sangat kecil untuk logo dan ikon. Ia menyokong lutsinar, gaya CSS, skrip dan animasi, dan setiap pelayar memaparkannya secara asli. SVG tidak sesuai untuk foto, dan ilustrasi kompleks boleh menjadi perlahan dipaparkan. Illustrator, Inkscape, Figma dan pelayar boleh membuka dan menyuntingnya.
- Pemampatan
- –
- Ketelusan
- Ya
- Animasi
- Ya
- Diperkenalkan
- 2001 · W3C
WEBP
Imej WebP
WebP ialah format imej yang dilancarkan oleh Google pada 2010 untuk memuatkan laman web dengan lebih pantas. Ia menyokong mampatan berkehilangan dan tanpa kehilangan, ketelusan alfa dan animasi dalam satu format. Fail WebP berkehilangan biasanya 25–35% lebih kecil daripada JPEG yang berkualiti visual serupa, dan WebP tanpa kehilangan biasanya lebih kecil daripada PNG. Setiap pelayar semasa menyokongnya, tetapi sesetengah perisian desktop lama, perkhidmatan cetakan dan borang muat naik masih menolaknya. Windows, macOS dan kebanyakan penyunting imej moden boleh membuka fail WebP.
- Pemampatan
- Lossy atau lossless
- Ketelusan
- Ya
- Animasi
- Ya
- Diperkenalkan
- 2010 · Google
Orang menukar SVG ke WebP untuk mendapatkan bitmap ringan bersaiz tetap bagi tempat yang tidak menerima fail vektor atau melukisnya dengan perlahan, seperti CMS, pratonton sosial atau halaman pendaratan yang sibuk; WebP ke SVG ialah kerja penjejakan, bukan pertukaran format.
Cara SVG dirasterkan dan perkara yang perlu disemak
Penukar membaca lebar, tinggi dan viewBox SVG itu sendiri, kemudian melukis setiap laluan pada lebar yang anda tetapkan; tinggi mengikut nisbah aspek. Kerana lukisan dibuat pada saiz akhir, garisan nipis dan teks kecil dilicinkan sekali sahaja, pada skala yang betul. Membesarkan PNG kecil kemudian tidak pernah kelihatan sebersih itu.
Fon ialah kejutan biasa. Jika SVG menamakan jenis huruf yang tidak dibenamkan atau ditukar kepada garis bentuk, fon gantian digunakan dan panjang baris berubah. Jadikan teks sebagai garis bentuk dalam alat reka bentuk anda sebelum mengeksport. Imej luaran yang dipaut melalui URL dalam SVG tidak diambil, jadi benamkannya atau ratakan karya seni terlebih dahulu.
Penukar SVG ke WebP: perkara yang patut dan tidak patut dilakukan
| Lakukan | Jangan |
|---|---|
| Render pada 2× lebar CSS yang dipaparkan | Menukar ikon sebaris ringkas yang lebih kecil sebagai SVG |
| Gunakan Tanpa kehilangan untuk logo rata dengan sedikit warna | Render pada 4000 px untuk ruang 600 px |
| Simpan induk SVG untuk saiz pada masa depan | Hantar WebP dalam surat berita e-mel |
| Sajikan WebP dengan atribut lebar dan tinggi untuk mengelakkan anjakan reka letak | Mengharapkan teks hidup: WebP ialah piksel, bukan teks yang boleh dipilih |
Soalan lazim SVG ke WebP
Berapakah lebar piksel yang patut digunakan semasa menukar SVG ke WebP?
Ambil lebar imej yang dipaparkan dalam piksel CSS dan gandakannya, supaya kekal tajam pada skrin telefon dan komputer riba berketumpatan tinggi. Ilustrasi yang dipaparkan dalam lajur 800 px perlu dirender pada 1600 px. Menggunakan 3× jarang berbaloi di web, kerana fail membesar sedangkan peningkatan yang kelihatan kecil.
Adakah WebP lebih baik daripada SVG untuk laman web?
Tidak untuk logo, ikon dan rajah yang ringkas: SVG yang kemas sangat kecil dan tajam pada setiap saiz, jadi kekalkannya. WebP lebih baik untuk ilustrasi kompleks dengan kecerunan, penapis atau ribuan laluan, dan untuk tempat yang hanya menerima bitmap, seperti pratonton sosial atau CMS tanpa sokongan SVG.
Adakah WebP mengekalkan latar belakang telus SVG saya?
Ya. WebP mempunyai saluran alfa penuh dalam mod lossy dan lossless, jadi kawasan tanpa isian dalam SVG kekal lutsinar. Tepi bentuk dilicinkan terhadap kelutsinaran, yang nampak betul pada mana-mana warna latar.
WebP lossy atau lossless untuk karya seni vektor?
Tanpa kehilangan sesuai untuk logo, ikon dan carta rata dengan beberapa warna pepejal; ia dimampatkan dengan sangat baik dan mengekalkan tepi yang bersih sepenuhnya. Lossy pada kualiti 85 hingga 90 sesuai untuk ilustrasi dengan kecerunan, bayang atau tekstur, yang fail tanpa kehilangannya menjadi berat. Cuba kedua-duanya pada satu fail dan kekalkan hasil yang lebih kecil yang nampak bersih.
Mengapakah saya tidak boleh memuat naik SVG ke WordPress?
WordPress tidak membenarkan SVG sebagai jenis muat naik kerana SVG boleh membawa skrip. Ia menerima WebP sejak versi 5.8, dikeluarkan pada 2021, jadi penukaran memberi anda fail yang diterima pustaka media tanpa pemalam keselamatan. Laman yang memerlukan vektor sebenar masih boleh menambah sokongan SVG melalui pemalam penyahkuman.
Bolehkah saya menggunakan WebP dalam surat berita e-mel?
Elakkan. Beberapa klien e-mel, termasuk Outlook desktop untuk Windows, tidak memaparkan WebP, dan Gmail juga tidak memaparkan SVG. Untuk e-mel, render karya seni dengan SVG ke PNG.
