Brauzerda rasm siqish qanday ishlaydi
Har bir siqish jarayoni toʻliq JavaScript'da ishlaydi. Hech qanday kodek kutubxonasi yuklab olinmaydi va hech qanday server ishtirok etmaydi. Brauzerning oʻz Canvas API'si rasmni dekodlaydi, uni pastroq sifatda qayta kodlaydi va sahifa oldindan koʻrishi, yuklab olishi yoki ZIP qilishi mumkin boʻlgan Blob beradi. Har bir qadam tab sandbox'da qolganidan, asl fayllar hech qachon tarmoqqa tegmaydi.
- Har bir yuklangan faylni Blob sifatida oʻqiydi va brauzer serverga baytlarni nusxalamasdan yoki diskka yozmasdan uni mahalliy ravishda dekodlashi uchun obyekt URL'sini yaratadi.
- Dekodlangan rasmni qayta kodlashga tayyor holda, asl piksel oʻlchamlarida ekranorqi Canvas elementiga chizadi.
- Piksellarni qayta kodlash uchun
canvas.toBlob(callback, mimeType, quality)chaqiradi. Sifat rejimida slayder qiymati toʻgʻridan-toʻgʻri kodlovchining kvantizatsiya sozlamasiga taʼsir qiladi; maqsadli oʻlcham rejimida sahifa chiqish blob bayt byudjetingizdan kichik boʻlguncha sifat qiymatini ikki bo'lakka ajratadi. - Asl oʻlcham, siqilgan oʻlcham va tejamkorlik foizi bilan oldin/keyin qiyosini koʻrsatadi, soʻng har bir rasm uchun yuklab olish yoki butun toʻplam uchun bitta ZIP taklif etadi. ZIP birinchi ishlatilishda yuklanadigan 8 KB kutubxona fflate yordamida xotirada yaratiladi.
Nima uchun rasmlarni siqish kerak?
- Kichikroq rasmlar tezroq yuklanadi. 4 MB hero rasmni 600 KB gacha qisqartirish Largest Contentful Paint'ni toʻgʻridan-toʻgʻri yaxshilaydi — bu Google reytingi uchun foydalanadigan Core Web Vitals mezonlaridan biri. Bir nechta fotosurati boʻlgan sahifada tejamkorlik tezroq birinchi boʻyashga aylanadi.
- Yuklash va ilova chegaralari hamma joyda mavjud. Koʻplab CMS platformalari, bilet vositalari va elektron pochta tizimlari 1 yoki 2 MB dan ortiq fayllarni rad etadi. Tezkor siqish fotosuratni toʻliq muharrir ochmasdan chegaradan pastga tushiradi.
- Katta miqyosda oʻtkazish imkoniyati va saqlash uchun pul toʻlanadi. Toʻliq hajmdagi PNG oʻrniga 0,8 sifatida WebP yuborish rasm yukini uchdan bir yoki undan koʻproq qisqartirishi mumkin; bu CDN chiqish hisob-kitoblarini va tashrif buyuruvchilaringizning mobil maʼlumotlardan foydalanishini kamaytiradi.
- Sezgir rasmlarda maxfiylik muhim. Brauzeringizda hamma narsa ishlaganidan, shaxsiy hujjat skanerlari, tibbiy rasmlar va ichki skrinshotlar qurilmangizda qoladi — TinyPNG kabi uchinchi tomon serverlariga yuklash haqida tashvishlanishga hojat yoʻq.
Keng tarqalgan ilovalar
Siqish rasm ketayotgan joydan kattaroq boʻlganda kerak boʻladi. Biz qayta-qayta koʻradigan uchta holat.
- Onlayn doʻkon uchun mahsulot suratlarini tayyorlash. JPEG asl nusxalar doʻkon tomonim tezkor qolishi va mobil qurilmalarda Core Web Vitals'dan oʻtishi uchun 0,8 sifatiga (yoki 200 KB maqsadiga) siqiladi.
- Xato tracker yoki wikiga biriktirmasdan oldin skrinshotlarni kichraytirish. 0,85 sifatida JPEG'ga oʻgirilgan PNG skrinshotlar toʻplami koʻpincha oʻnlab megabaytdan bir juftgacha tushadi.
- Fotosuratni yuklash chegarasidan pastga tushirish — 1 MB dan ortiq fayllarni rad etadigan ish topshirish portali, mahkam ilova chegarasi boʻlgan elektron pochta tizimi yoki bayt byudjetiga sigʻishi kerak boʻlgan forum avatari.
Amaliy misol: JPEG 4 MB dan 400 KB ga
Telefon kamerasidan toʻgʻridan-toʻgʻri olingan 4 MB JPEG yuklash chegaralarini buziladigan va sahifalarni sekinlashtiradigan odatiy fayldir. Bu siqish nechog'li tejaydi degan savolning adolatli mezonchasi.
JPEG'ni yuklash zonasiga tashlang, formatni JPEG da qoldiring va sifat slayderini 0,7 ga torting yoki maqsadli oʻlcham rejimiga oʻtib 400 KB kiriting. Sifat rejimida Canvas quvuri bir marta qayta kodlaydi va natijani koʻrsatadi — fotosuratga qarab odatda 500–700 KB atrofida. Maqsadli oʻlcham rejimida sahifa bir nechta sifat qiymatlarini sinaydi, 400 KB dan past mos keladigan eng yuqorisini tanlaydi va tejamkorlik foizini hisoblab chiqadi. Bitta faylni olish uchun kartadagi Yuklab olish tugmasini bosing yoki bir vaqtda bir nechta rasm siqgan boʻlsangiz .zip yuklab olish tugmasini bosing. Bu oʻlchamdagi rasm uchun butun jarayon bir soniyadan ancha kam vaqtda ishlaydi va sahifa oʻzi yuklanib boʻlgandan soʻng nol oʻtkazish imkoniyatini iste'mol qiladi.
Sifat rejimi va maqsadli oʻlcham rejimi oʻrtasidagi farq nima?
Sifat rejimi JPEG yoki WebP kodlovchisining kvantizatsiya sozlamasiga mos keladigan 0,1 dan 1,0 gacha bitta slayder beradi — pastroq raqamlar kichikroq fayllar va koʻproq koʻrinadigan artefaktlar anglatadi. Maqsadli oʻlcham rejimi muammoni teskari aylantiradi: kilobaytlarda oʻlcham belgilaysiz va sahifa byudjetingizdan past mos keladigan eng yuqori sifatni topguncha bir necha marta kodlab, sifat qiymatini ikki bo'lakka ajratadi. Maqsadli oʻlcham qattiq chegara muhim boʻlganda qulay (1 MB yuklash chegarasi, masalan); sifat rejimi shunchaki oldindan aytib boʻladigan vizual natija istasangiz tezroq va yaxshiroqdir. PNG yoʻqotishsiz, shuning uchun hech qaysi rejim unga tatbiq etilmaydi.
Bu qurilmamda sodir boʻladimi?
Ha, toʻliq. Sahifa har bir rasmni xotirada dekodlash va qayta kodlash uchun brauzerning mahalliy Canvas API'si va Web File API'dan foydalanadi. Serverga hech qanday rasm maʼlumotlari yuborilmaydi, vaqtincha yuklash yoʻq va bulutda gidiş-qaytish yoʻq. Buni oʻzingiz tekshirishingiz mumkin: DevTools'ni oching, Network paneliga oʻting va siqishni ishga tushiring. Koʻradigan yagona chiquvchi so'rovlar dastlabki sahifa yuklanishi va reklama chaqiruvlaridir. Tabni tark etadigan rasm ko'rinishidagi hech narsa yo'q.
Nima uchun PNG siqish ba'zan deyarli kichraymaydi?
PNG yoʻqotishsiz format, shuning uchun Canvas API faylni kichraytirish uchun tafsilotlarni tashlab yubora olmaydi — faqat bir xil piksellarni qayta qadoqlashi mumkin. Fotosuratlar uchun PNG allaqachon katta va yoʻqotishsiz qayta kodlash kam tejaydi. Haqiqiy yutuq chiqish formatini JPEG yoki WebP ga almashtirshdan keladi; ular fotolarga mos keladigan yoʻqotishli siqishdan foydalanadi va odatda 4–10 marta kichikroq tushadi. PNG'ni faqat yoʻqotishsiz sifat yoki shaffoflik kerak boʻlganda saqlang; aks holda fotosuratlar uchun JPEG'ni yoki eng yaxshi oʻlcham-sifat balansi uchun WebP'ni tanlang.
Qaysi formatni tanlashim kerak?
Fotosuratlar uchun 0,8 sifatida WebP eng yaxshi oʻlcham-sifat balansini beradi va 2021 yildan beri chiqarilgan har bir brauzer tomonidan qoʻllab-quvvatlanadi; JPEG maqsad eskiroq yoki qattiqroq boʻlganida xavfsiz universal zaxiradir. PNG'ni faqat yoʻqotishsiz sifat yoki alfa kanal kerak boʻlganda tanlang — chiziq sanʼati, UI skrinshotlari, shaffoflikli logotiplar. Sahifa tezligini optimallashtirmoqchi boʻlsangiz va auditoriyangiz zamonaviy brauzerlardan foydalansa, WebP deyarli har doim toʻgʻri tanlovdir; eski CMS yoki WebP'ni rad etadigan bosmaxona konveyrini toʻldirmoqchi boʻlsangiz JPEG da qoling.
Rasmlaringizni tashlang, sifat darajasi yoki maqsadli oʻlcham tanlang, siqing. Hammasi tabingizda ishlaydi. Yuklash yoʻq, hisob yoʻq, server navbatida kutish yoʻq.