Tasvir formatlari: JPEG, PNG, WebP va AVIF — qaysi birini qachon tanlash kerak

Qisqacha

Fotosuratni WebP yoki AVIF formatida bering, JPEG’ni esa zaxira variant sifatida qoldiring. Qirralari keskin va foni shaffof grafikaga PNG mos; agar u vektorli bo‘lsa, SVG yanada yaxshi. O‘lchovlarimizda bir xil sifatdagi AVIF medianasi 66 KB, JPEG’niki esa 119 KB bo‘ldi. Biroq AVIF uzoqroq kodlanadi va picture tegi orqali zaxira format talab qiladi.

“JPEG yaxshimi yoki PNG?” degan bahsning ma’nosi yo‘q: ular turli vazifalar uchun yaratilgan vositalardir. Format to‘rtta tekshiriladigan xususiyatga qarab tanlanadi.

Formatlar umuman nimasi bilan farq qiladi?

To‘rtta jihati bilan: siqishda ma’lumot yo‘qoladimi, shaffoflikni va animatsiyani qo‘llaydimi hamda formatni turli dasturlar qanchalik keng taniydi.

Yo‘qotishli siqish faylni yengillashtirish uchun ma’lumotning bir qismini olib tashlaydi va uni keyin tiklab bo‘lmaydi. Ko‘z yarim tuslardagi kichik yo‘qotishni sezmaydigan fotosurat uchun bu to‘g‘ri tanlov. Har bir harf keskin chegara bo‘lgan skrinshot uchun esa noto‘g‘ri tanlovdir.

Yo‘qotishsiz siqish faylni baytma-bayt tiklaydi. Tekis rangli grafika uchun u juda muhim, ammo fotosuratning hajmini bir necha baravar oshiradi.

Format	Siqish	Shaffoflik
JPEG	faqat yo‘qotishli	yo‘q
PNG	faqat yo‘qotishsiz	ha
WebP	har ikkisi	ha
AVIF	har ikkisi	ha

Logotiplar, ikonalar va fonidan kesib olingan obyektlarga shaffoflik kerak. JPEG’da uning yo‘qligi arzimas kamchilik emas: obyektni bir xil rangli fonga qo‘yib, sahifa foni o‘zgarmasligiga umid qilishga to‘g‘ri keladi.

JPEG qachon hamon to‘g‘ri tanlov bo‘ladi?

Fayl hamma joyda ochilishi shart bo‘lganda: eski pochta mijozida, o‘n yillik CRM’da yoki bosmaxonada. JPEG’ni deyarli barcha tizim taniydi, shu sababli u picture ichidagi ishonchli zaxira variant bo‘lib qoladi.

JPEG haqida ikki narsani esda tuting. U sakkiz bitli va alfa-kanalsiz, shuning uchun gradientlarda yo‘llar paydo bo‘lishi mumkin, shaffoflik esa umuman yo‘q. Bundan tashqari, format deyarli doim 4:2:0 rang subdiskretizatsiyasidan foydalanadi: rang yarim aniqlikda saqlanadi. Fotosuratda bu sezilmaydi, oq fondagi qizil matnda esa juda yaqqol ko‘rinadi.

PNG qachon kerak?

Tasvir keskin chegaralar va tekis ranglardan tuzilganda: skrinshotlar, interfeyslar, sxemalar, logotiplar va matnli barcha materiallar uchun. PNG ularni yo‘qotishsiz va shaffoflik bilan saqlaydi.

PNG’da ko‘pincha yetarli baholanmaydigan palitra rejimi bor. Bir necha o‘n rangli tasvir 64 rangli palitrada saqlansa, to‘liq rangli nusxadan bir necha marta yengil bo‘ladi, ammo xuddi shunday ko‘rinadi. Vektor berishning iloji bo‘lmasa, ikonalar va oddiy sxemalar uchun bu eng yaxshi murosadir.

PNG fotosuratni samarali siqa olmaydi. Bir xil kadr PNG’da JPEG’dan bir tartib og‘irroq: o‘lchovlarimizda eni 1200 piksel bo‘lgan etalon PNG 1–2 MB, JPEG esa 58–213 KB joy egalladi.

WebP nima beradi?

WebP — bugungi barcha dolzarb brauzerlar taniydigan murosali format. U yo‘qotishli va yo‘qotishsiz siqishni, har ikki rejimda shaffoflikni hamda animatsiyani qo‘llaydi.

Bosma yoki tahrirlash bilan ishlaydiganlar uchun muhim tafsilot: yo‘qotishli WebP sakkiz bit va 4:2:0 subdiskretizatsiya bilan, yo‘qotishsiz turi esa 8 bitli ARGB bilan ishlaydi. Format tomon uzunligi bo‘yicha qat’iy 16 383 piksel chegaraga ega. Panorama va katta formatli polotnolar uchun bu haqiqiy cheklovdir.

AVIF nima beradi va uning muammosi nimada?

AVIF AV1 videokodekiga asoslangan va fotosuratni ancha zich siqadi. U shaffoflik, animatsiya, keng rang qamrovi va 12 bitgacha chuqurlikni qo‘llaydi. O‘lcham chegarasiga amalda yetib bo‘lmaydi: PNG’dagi kabi har bir tomon 2 147 483 647 pikselgacha.

Ikkita muammo bor. Birinchisi — kodlash vaqti: AVIF JPEG’dan bir necha marta uzoqroq kodlanadi, katta kutubxonada bu seziladi. Ikkinchisi — brauzerdan tashqarida hamma dastur ham uni o‘qimaydi. Eski muharrirlar, messenjerlar va ichki tizimlar faylni ochmasligi mumkin. Shuning uchun MDN tasvir turlari hujjati AVIF’ni picture orqali zaxira variant bilan berishni tavsiya qiladi.

Format	Tomon chegarasi, px	Animatsiya
JPEG	65 535	yo‘q
PNG	2 147 483 647	yo‘q
WebP	16 383	ha
AVIF	2 147 483 647	ha

Chegaralar o‘sha MDN hujjatidan olingan. Ular kamdan-kam kerak bo‘ladi, ammo chegaraga duch kelganda bu odatda kutilmaganda sodir bo‘ladi.

Formatlar fayl hajmi bo‘yicha qanchalik farq qiladi?

Syujet imkon bergan darajada: tekis osmon barglardan uch baravar yaxshi siqilishi mumkin. Shu bois yonida aniq kadr bo‘lmasa, “AVIF 50% yengilroq” degan gap ma’nosiz. O‘z kadrlaringizda tekshiring; biz qo‘llagan usul quyidagicha.

Katalogdan sakkizta fotografik kadr oldik, har birini 1200 piksel kenglikka keltirib, etalon sifatida PNG’da saqladik. Keyin har bir format uchun etalondan SSIM metrikasi bo‘yicha farq 0.02 dan oshmaydigan eng past sifatni tanladik. Ya’ni “quality” maydonidagi bir xil raqamlarni emas, o‘lchangan teng sifatni solishtirdik.

Format	Mediana	Oraliq
Yo‘qotishsiz PNG	1.4 MB	1.0–2.0 MB
JPEG	119 KB	58–213 KB
WebP	97 KB	33–194 KB
AVIF	66 KB	16–130 KB

Bu yerda oraliq medianadan muhimroq. Sakkizta kadr bo‘yicha AVIF JPEG’dan o‘rtacha 45% yengil, WebP esa 22% yengil chiqdi, ammo chekka natijalar ikki baravar farq qildi. Shovqinli tungi shahar kadrida AVIF JPEG hajmidan 39%, tekis och fondagi ishbilarmonlik kadrida esa 73% tejadi. O‘z kadringizdagi o‘lchovni uchta ImageMagick buyrug‘i bilan takrorlash mumkin:

magick photo.jpg -resize 1200x -strip ref.png
magick ref.png -quality 60 out.avif
magick compare -metric SSIM ref.png out.avif null:

Farq tanlangan chegaraga yaqinlashguncha sifatni o‘zgartiring va hosil bo‘lgan fayllar hajmini taqqoslang. Hajm yuklanish soniyalari bilan qanday bog‘lanishi sayt uchun tez rasmlar haqidagi maqolada tushuntirilgan.

WebP yoki AVIF?

Kutubxonani zamonaviy formatlarga qanday o‘tkazish kerak?

1. Tasvirlarni turiga qarab ajrating

   Fotosuratlarni bir ro‘yxatga, keskin qirrali va shaffof grafikani boshqa ro‘yxatga kiriting. Ularning qoidalari turlicha.

2. Asl fayllarga tegmang

   Barcha hosila nusxalar doim originaldan yaratiladi. Siqilgan faylni boshqa formatga o‘tkazib “yaxshilab” bo‘lmaydi.

3. Variantlarni tayyorlang

   Fotosuratlar uchun AVIF va WebP, zaxiraga JPEG. Grafika vektorli bo‘lsa SVG, aks holda qisqartirilgan palitrali PNG.

4. Tanlovni belgilash kodida ko‘rsating

   Bir necha source elementli picture tegidan foydalaning. Brauzer o‘zi taniydigan birinchi formatni oladi, qolganlariga tegmaydi.

5. Hajm va sifatni tanlab tekshiring

   Turli syujetdagi o‘nga yaqin kadr yetarli: tekis fon, mayda tekstura va kontrastli grafika.

6. Ortga qaytish yo‘lini saqlang

   Xatdagi havola, hamkor uchun eksport yoki bosmaxona fayli hamon JPEG yoki TIFF bo‘lishi kerak, AVIF emas.

GIF va SVG-chi?

GIF davri o‘tdi: 256 rang va tomon uchun 65 536 piksel chegara. U hali ishlatiladigan yagona vazifa — qisqa animatsiyani WebP, AVIF yoki oddiy video yaxshiroq bajaradi.

SVG alohida turadi: u piksellarni emas, shakllarni tavsiflaydi. Logotiplar, ikonalar, sxemalar va grafiklar unda yo‘qotishsiz masshtablanadi va bir necha kilobayt joy oladi. Qoida oddiy: tasvir suratga olinmay, chizilgan bo‘lsa, avval SVG’ni tanlang.

Fotostok bilan ishlashda bu nimani anglatadi?

Stokdagi ish sahifangiz uchun emas, saqlash uchun qulay formatda keladi. Uni aniq joyga mos variantlar tayyorlanadigan original deb biling. Picwin muqovalari va prevyulari WebP’da beriladi, vitrina esa brauzer taxmin qilmasligi uchun har bir tasvir turini e’lon qiladi.

Illyustratsiya

Illyustratsiya va grafika — katalogning ko‘pincha vektor yoki shaffof PNG talab qiladigan qismi.

Ishlarni ko‘rishTeksturalar

Tekstura va fonlar: tekis syujetlar eng yaxshi siqiladi, ularda formatlar farqi ayniqsa yaqqol ko‘rinadi.

Ishlarni ko‘rish

Asosiysi

• Format to‘rtta xususiyat bo‘yicha tanlanadi: yo‘qotish, shaffoflik, animatsiya va qo‘llab-quvvatlash.
• Fotosurat uchun WebP yoki AVIF va zaxira JPEG; grafika uchun SVG, bo‘lmasa PNG.
• Teng sifatda AVIF JPEG’dan 45%, WebP esa 22% yengil chiqdi.
• WebP tomonining chegarasi 16 383 piksel, AVIF’da amaliy chegara deyarli yo‘q.
• Tejaladigan foiz syujetga bog‘liq, shuning uchun o‘z kadrlaringizni o‘lchang.

WebP yaxshimi yoki AVIF?

AVIF zichroq siqadi, WebP tezroq kodlanadi va ko‘proq dasturda ochiladi. Oqilona usul — ikkalasini picture orqali berish va JPEG’ni zaxirada saqlash.

JPEG’dan hozir voz kechish mumkinmi?

Saytda deyarli mumkin, sayt tashqarisida esa yo‘q. Xatlar, eksportlar, bosmaxonalar va ichki tizimlar hali ham JPEG va TIFF bilan ishlaydi.

JPEG’ni WebP’ga o‘tkazganda sifat buziladimi?

Yo‘qotishli saqlansa, ha. Asl fayl artefaktlari qoladi va yangilari qo‘shiladi. Siqilgan nusxadan emas, originaldan o‘tkazing.

Nega PNG fotosurat o‘n megabayt keladi?

Chunki PNG yo‘qotishsiz siqadi. Fotosuratda bu deyarli barcha tuslarni saqlash demakdir; etalon PNG’larimiz 1200 piksel kenglikdayoq 1–2 MB bo‘ldi.

Logotip uchun qaysi formatni tanlash kerak?

Vektor mavjud bo‘lsa SVG. Bo‘lmasa shaffof PNG; kichik o‘lchamlar uchun 64 rangli palitra yetadi.

Barcha brauzerlar AVIF’ni qo‘llaydimi?

Asosiy brauzerlarning dolzarb versiyalari qo‘llaydi, lekin brauzerdan tashqarida holat bir xil emas. Shu sababli MDN picture orqali zaxira variantni tavsiya qiladi.

4:2:0 rang subdiskretizatsiyasi nima va qachon xalaqit beradi?

Bu rangni yarim aniqlikda saqlashdir. Fotosuratda sezilmaydi, rangli matn va ingichka rangli chiziqlarda kir qirralar hosil qiladi; bunday joyda PNG yoki yo‘qotishsiz siqish kerak.

Mavzuni tasvir o‘lchami va aniqligi, tez sayt uchun tasvir tayyorlash va bosmaga tayyorlash maqolalari bilan davom ettiring. Tayyor ishlarni katalogdan topasiz.