Rasm formatlarini konvertatsiya qilish _

Brauzerda rasm konvertatsiyasi qanday ishlaydi

Har bir konvertatsiya brauzeringizda ishlaydigan to'rt bosqichli quvur liniyasidir. JPEG va PNG uchun brauzerning o'z Canvas API si to'g'ridan-to'g'ri kodlashni bajaradi. Safari da WebP va har bir brauzerda AVIF uchun sahifa talab bo'yicha engil WebAssembly kodekni yuklaydi — baribir hammasi mahalliy, tasvirlaringiz hech qachon qurilmangizni tark etmaydi.

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. PNG, JPEG va Chrome/Firefox WebP uchun piksellarni qayta kodlash uchun canvas.toBlob(callback, targetMimeType, quality) ni chaqiring. Safari WebP va AVIF kodlash uchun birinchi foydalanishda WebAssembly kodek ishchisi yuklanadi va fon oqimida kodlashni bajaradi. PNG chiqishi har doim yo'qotishsiz; JPEG, WebP va AVIF sifat slayderiga bo'ysunadi, bu to'g'ridan-to'g'ri enkoderning kvantizatsiya sozlamasiga xaritalanadi.
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?

Kirish tomonida brauzer dekodlashi mumkin bo'lgan har qanday format qabul qilinadi: PNG, JPEG, WebP, GIF va BMP dizayner yoki skrinshot vositasi ishlab chiqaradigan deyarli barcha fayllarni qamrab oladi. Chiqish formatlari PNG (har doim yo'qotishsiz), JPEG, WebP va AVIF. AVIF chiqishi har bir brauzerda talab bo'yicha yuklanadigan WebAssembly enkoderi orqali qo'llab-quvvatlanadi — mahalliy Canvas enkoderi kerak emas.

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 chiqishi qanday ishlaydi?

AVIF kodlash birinchi marta AVIF formatini tanlaganingizda talab bo'yicha yuklanadigan WebAssembly kodekdan foydalanadi — plagin yo'q, brauzer bayrog'i yo'q, kelajakdagi Chrome relizini kutish yo'q. WASM binar fayli o'z manbamizdan xizmat qiladi, tasviringizni to'liq fon oqimida kodlaydi va yuklab olishga tayyor standart image/avif blobni qaytaradi. Yagona tarmoq so'rovi kodekning o'zini bir martalik olishdir; hech qanday tasvir ma'lumotlari hech qachon qurilmangizni tark etmaydi. Yuklangandan so'ng, enkoder sessiya davomida keshda qoladi, shuning uchun keyingi konvertatsiyalar tezroq bo'ladi. AVIF fayllari odatda ekvivalent sifatda WebP dan 20-30% kichikroq va JPEG dan 50% kichikroq bo'lib, ularni ishlashga sezgir saytlar uchun eng yaxshi tanlovga aylantiradi.

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