Rasm formatlarini konvertatsiya qilish _

Brauzerda rasm konvertatsiyasi qanday ishlaydi

Har bir konversiya toʻliq JavaScript’da ishlaydigan toʻrt bosqichli quvurdir. Hech qanday kodek kutubxonasi yuklab olinmaydi — brauzerning oʻz Canvas API’si dekodlash va qayta kodlashni amalga oshiradi.

1. Har bir yuklangan faylni Blob sifatida oʻqiydi va brauzer serverga baytlarni nusxalamasdan dekodlashi uchun obyekt URL’sini yaratadi.
2. Dekodlangan rasmni ekranorqi Canvas elementiga chizadi, asl nisbatni saqlab qolgan holda oʻlcham cheklovlarini qoʻllaydi.
3. Piksellarni qayta kodlash uchun canvas.toBlob(callback, targetMimeType, quality) chaqiradi. PNG chiqishi har doim yoʻqotishsiz; JPEG va WebP sifat slayderi boʻyicha ishlaydi.
4. Chiqish oʻlchamlari va fayl hajmi bilan oldin/keyin miniatyurasini koʻrsatadi, soʻng har bir rasm uchun yuklab olish tugmasi yoki butun partiya uchun bitta ZIP taklif etadi.

Nima uchun rasm formatlarini konvertatsiya qilish kerak?

• PNG’dan WebP’ga oʻtish 0.8 sifatida koʻrinadigan sifat yoʻqotishisiz odatiy fayl oʻlchamlarini 25–35% ga kamaytiradi, bu esa toʻgʻridan-toʻgʻri sahifa ogʻirligini kamaytiradi va Core Web Vitals LCP ballarini yaxshilaydi.
• PNG JPEG tashlagan shaffoflikni saqlaydi, shuning uchun PNG→JPEG shaffof piksellarni oq fonda koʻrsatadi — manzil (elektron pochta, eski CMS) PNG qabul qilmaganda foydali.
• Ijtimoiy platformalar va reklama tarmoqlari qattiq format talablariga ega: Facebook va LinkedIn suratlar uchun JPEG ni afzal koʻradi; Twitter’ning OG koʻrinishini qayta ishlash quvuri WebP bilan ishlaydi; ba’zi reklama serverlari JPEG boʻlmagan kreativlarni rad etadi.
• Aralash formatli rasmlar toʻplamini (PNG skrinshoti, JPEG surat, WebP eksporti) CMS yoki DAM’ga yuklashdan oldin bitta formatga standartlashtirish, qabul quvuridagi format boshqarish murakkabligini bartaraf etadi.

Keng tarqalgan ilovalar

Manba format va manzilning kutishlari mos kelmaganda format konvertatsiyasi kerak boʻladi.

• Shopify yoki WooCommerce doʻkoni uchun mahsulot suratlarini tayyorlash — JPEG asl nusxalar doʻkon tomonim uchun 0.85 sifatida WebP’ga konvertatsiya qilinadi, PNG nashrga tayyor eksportlar uchun saqlanadi.
• Dizayner tomonidan taqdim etilgan PNG eksportlarni React yoki Next.js tuzilmasiga kiritishdan oldin JPEG yoki WebP’ga konvertatsiya qilish, shunda framework’ning rasm optimizatoriga kichikroq manbadan boshlash imkoni boʻladi.
• QA testidan olingan skrinshot papkasini ommaviy qayta ishlash — xato trackerga biriktirishdan oldin arxiv hajmini kamaytirish uchun PNG’ni 0.9 sifatida JPEG’ga konvertatsiya qilish.

Amaliy misol: 2 MB PNG → 300 KB WebP

2400×1600 piksel oʻlchamidagi 2 MB PNG kahramon rasmi marketing qoʻnish sahifalarida keng tarqalgan yuk.

PNG’ni bu yerga tashlang, maqsad format sifatida WebP’ni tanlang, sifatni 0.8 ga oʻrnating va ixtiyoriy ravishda piksel oʻlchamlarini ikki barobarga kamaytirish uchun maks. kenglikni 1200 ga oʻrnating. Canvas quvuri rasmni 1200×800 da (nisbat saqlanadi) chizadi, WebP ga qayta kodlaydi va chiqish kartasi natijani koʻrsatadi — odatda 280–320 KB, 85% qisqarish. Kartdagi Yuklab olish tugmasini bosing yoki bir nechta rasm konvertatsiya qilgan boʻlsangiz ZIP ommaviy yuklab olishni amalga oshiring.

Qaysi formatlar qoʻllab-quvvatlanadi?

Manba rasmlar: brauzer dekodlay oladigan har qanday format — PNG, JPEG, WebP, GIF va BMP hammasi qabul qilinadi. Chiqish formatlari: PNG (yoʻqotishsiz), JPEG va WebP. AVIF chiqishi hali qoʻllab-quvvatlanmaydi, chunki Canvas API kodlovchisi faqat Chrome 105+ da mavjud va Safari va Firefox’da yoʻq; WASM asosidagi AVIF yoʻli kelajakdagi nashr uchun rejalashtirilgan.

Bu qurilmamda sodir boʻladimi?

Ha. Sahifa brauzerning mahalliy Canvas API’sidan va Web File API’dan foydalanadi. Hech qanday rasm ma’lumotlari serverga yuborilmaydi; konvertatsiya quvuri toʻliq brauzer yorligʻingizda ishlaydi. Buni DevTools’ni ochib Network panelini tekshirish orqali tasdiqlashingiz mumkin — sahifa yuklangandan soʻng chiquvchi soʻrovlar yoʻq.

PNG va JPEG oʻrtasidagi sifat farqi nima?

PNG yoʻqotishsiz format — har bir piksel kodlash tsiklini toʻliq oʻtkazadi. JPEG DCT siqishdan foydalanadi va koʻz kamdan-kam sezadigan nozik tafsilotlarni yoʻq qiladi; 0.8 sifat koʻpchilik tomoshabinlar uchun asl nusxadan koʻrinadigan farq sezilmaydigan, lekin fayl PNG’dan 4–6 marta kichikroq boʻladigan keng tarqalgan optimum nuqta. WebP ham yoʻqotishsiz, ham yoʻqotishli rejimda ishlashi mumkin; bu yerda sifat slayderi yoʻqotishli kodlovchini boshqaradi va 0.85 sifat tabiiy suratlarda odatda JPEG 0.85 dan 25–30% yaxshiroq.

AVIF qoʻllab-quvvatlash qachon qoʻshiladi?

canvas.toBlob(…, 'image/avif') orqali AVIF kodlash hozirda faqat Chrome 105+’da ishlaydi; Safari va Firefox qoʻllab-quvvatlamaydi. Kelajakdagi nashr funksiya barcha brauzerlarda ishlashi uchun engil WebAssembly kodlovchidan foydalanib ixtiyoriy AVIF yoʻlini qoʻshadi. Shu vaqtgacha AVIF opsiyasi "tez kunda" sifatida koʻrsatiladi va WebP kodlovchisi (zamonaviy brauzerlarda universial qoʻllab-quvvatlanadi) tavsiya etilgan yangi avlod muqobilidir.

Rasmlaringizni tashlang, format tanlang, konvertatsiya qiling. Hammasi yorligʻingizda ishlaydi — yuklash yoʻq, hisob yoʻq, server kutish yoʻq.