# Сурет форматтары: JPEG, PNG, WebP және AVIF — қайсысын қашан таңдаған дұрыс

Источник / Source: https://picwin.co/kk/blog/suret-formattary-jpeg-png-webp-avif
Язык / Language: kk
Рубрика / Topic: Технологиялар
Автор / Author: Picwin редакциясы
Опубликовано / Published: 2026-03-17T00:00:00.000Z
Обновлено / Updated: 2026-09-03T11:17:26.468Z
Слов / Words: 1262 · Чтение / Reading: 7 min
Обложка / Cover: https://picwin.co/api/picwin/blog-images/c2b165ec9a7662312c75b5928509d7282ea485e8849c3e22ba89bba3cf9a8208.webp
Переводы / Translations: en: https://picwin.co/en/blog/image-formats-jpeg-png-webp-avif, pt: https://picwin.co/pt/blog/formatos-de-imagem-jpeg-png-webp-avif, ru: https://picwin.co/blog/formaty-izobrazheniy-jpeg-png-webp-avif, uz: https://picwin.co/uz/blog/tasvir-formatlari-jpeg-png-webp-avif

Төрт формат барлық дерлік міндетті шешеді, бірақ оларды әдетке емес, төрт қасиетке қарап таңдайды: жоғалту, мөлдірлік, анимация және қолдау. Мүмкіндіктерін, бірдей сапада өлшенген көлемін және заманауи форматтарға көшу тәртібін талдаймыз.

---

**Қысқаша**

Фотосуретті WebP немесе AVIF түрінде беріп, JPEG-ті қосалқы нұсқа ретінде қалдырыңыз. Жиегі анық әрі мөлдір графикаға PNG, ал векторлық графикаға SVG қолайлы. Біздің өлшеуде бірдей сападағы AVIF медианасы 66 КБ, JPEG медианасы 119 КБ болды. Бірақ AVIF ұзағырақ кодталады және `picture` тегі арқылы қосалқы форматты қажет етеді.

«JPEG жақсы ма, PNG жақсы ма?» деген даудың мәні жоқ: бұлар әртүрлі міндетке арналған құралдар. Формат тексеруге болатын төрт қасиетке қарай таңдалады.

## Форматтар бір-бірінен несімен ерекшеленеді?

Төрт нәрсемен: сығу кезінде дерек жоғалта ма, мөлдірлік пен анимацияны қолдай ма және оны әртүрлі бағдарламалар қаншалықты кең таниды.

**Жоғалтумен сығу** көлемді азайту үшін ақпараттың бір бөлігін алып тастайды, оны кейін қайтару мүмкін емес. Бұл реңктегі ұсақ жоғалтуды көз байқамайтын фотосуретке жарайды. Ал әр әрпі анық жиек болатын скриншотқа жарамайды.

**Жоғалтусыз сығу** файлды байтқа дейін қалпына келтіреді. Біркелкі боялған графика үшін таптырмайды, бірақ фотосуретті бірнеше есе ауырлатады.

Формат
Сығу
Мөлдірлік

JPEG
тек жоғалтумен
жоқ

PNG
тек жоғалтусыз
бар

WebP
екі режим де
бар

AVIF
екі режим де
бар

Мөлдірлік логотипке, белгішеге және қиып алынған нысанға керек. JPEG-те оның болмауы ұсақ кемшілік емес: нысанды біртүсті фонға салып, парақ фоны өзгермейді деп үміттенуге тура келеді.

## JPEG қашан әлі де дұрыс таңдау болады?

Файл барлық жерде: ескі пошта клиентінде, он жылдық CRM-де немесе баспаханада ашылуы керек кезде. JPEG-ті бәрі таниды, сондықтан ол `picture` ішіндегі сенімді қосалқы нұсқа болып қалады.

JPEG туралы екі жайтты есте ұстаңыз. Ол сегіз биттік әрі альфа-арнасы жоқ, сондықтан градиент жолақтанып, мөлдірлік болмайды. Формат көбіне 4:2:0 түстік субдискреттеуін қолданады: түс жарты ажыратымдылықпен сақталады. Фотода бұл білінбейді, ақ фонда қызыл мәтінде анық көрінеді.

## PNG қашан қажет?

Сурет анық жиектер мен біркелкі бояудан тұрғанда: скриншот, интерфейс, сызба, логотип және мәтіні бар кез келген материал үшін. PNG оларды жоғалтусыз әрі мөлдірлікпен сақтайды.

PNG-нің бағаланбай жүрген палитра режимі бар. Бірнеше ондаған түсті сурет 64 түсті палитрамен сақталса, толық түсті нұсқадан бірнеше есе жеңіл болып, дәл солай көрінеді. Вектор беру мүмкін болмаса, белгіше мен қарапайым сызбаға бұл жақсы ымыра.

PNG фотосуретті тиімді сыға алмайды. Бір кадр PNG-де JPEG-тен бір саты ауыр: өлшеуімізде ені 1200 пиксель эталон PNG 1–2 МБ, ал JPEG 58–213 КБ болды.

## WebP не береді?

WebP — қазіргі браузерлердің бәрі танитын ымыралы формат. Ол жоғалтумен де, жоғалтусыз да сығады, екі режимде мөлдірлік пен анимацияны қолдайды.

Баспа және өңдеу үшін маңызды жайт: жоғалтатын WebP сегіз бит пен 4:2:0 субдискреттеуін, жоғалтусыз WebP 8 биттік ARGB қолданады. Қатаң шегі — бір жағына **16 383 пиксель**. Панорама мен үлкен форматты кенеп үшін бұл нақты шектеу.

## AVIF не береді және оның қиындығы неде?

AVIF AV1 бейнекодегіне негізделген және фотосуретті едәуір тығыз сығады. Мөлдірлік, анимация, кең түс ауқымы және 12 битке дейінгі тереңдік бар. Өлшем шегіне іс жүзінде жету мүмкін емес: PNG секілді бір жағына 2 147 483 647 пиксель.

Екі қиындығы бар. Біріншісі — кодтау уақыты: AVIF JPEG-тен бірнеше есе ұзақ кодталады, үлкен кітапханада бұл сезіледі. Екіншісі — браузерден тыс қолдау біркелкі емес. Ескі редактор, мессенджер немесе ішкі жүйе файлды ашпауы мүмкін. Сондықтан [MDN сурет түрлері жөніндегі құжаттамасы](https://developer.mozilla.org/en-US/docs/Web/Media/Guides/Formats/Image_types) AVIF-ті `picture` арқылы қосалқы нұсқамен беруді ұсынады.

Формат
Жақ шегі, px
Анимация

JPEG
65 535
жоқ

PNG
2 147 483 647
жоқ

WebP
16 383
бар

AVIF
2 147 483 647
бар

Шектер сол MDN құжатынан алынған. Олар сирек қажет, бірақ тірелген кезде көбіне күтпеген жерден шығады.

## Форматтардың көлем айырмасы қандай?

Сюжет мүмкіндік бергендей: тегіс аспан жапырақтан үш есе жақсы сығылуы мүмкін. Сондықтан нақты кадрсыз «AVIF 50% жеңіл» деудің мәні жоқ. Өз материалыңызбен тексеріңіз; біздің әдіс мынадай.

Каталогтан сегіз фотокадр алып, әрқайсын 1200 пиксель енге келтіріп, эталон PNG ретінде сақтадық. Әр форматта эталоннан SSIM метрикасы бойынша айырмасы 0,02-ден аспайтын ең төмен сапаны таңдадық. Яғни “quality” өрісіндегі бірдей санды емес, өлшенген тең сапаны салыстырдық.

Формат
Медиана
Ауқым

Жоғалтусыз PNG
1,4 МБ
1,0–2,0 МБ

JPEG
119 КБ
58–213 КБ

WebP
97 КБ
33–194 КБ

AVIF
66 КБ
16–130 КБ

Мұнда ауқым медианадан маңызды. Сегіз кадрда AVIF JPEG-тен орта есеппен 45%, WebP 22% жеңіл болды. Шеткі нәтиже екі есе алшақ: шуы бар түнгі қалада AVIF JPEG көлемінен 39%, ал тегіс ашық фонды іскер кадрда 73% үнемдеді. Өлшеуді ImageMagick-тің үш пәрменімен қайталауға болады:

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

Айырма таңдалған шекке жақындағанша сапаны өзгертіп, шыққан файлдардың көлемін салыстырыңыз. Көлемнің жүктеу уақытына әсері [сайтқа арналған жылдам суреттер](/kk/blog/sait-ushin-jyldam-suretter) мақаласында түсіндірілген.

![Екі бағанда JPEG пен PNG қасиеттері заманауи WebP және AVIF форматтарымен салыстырылған](/api/picwin/blog-images/ab345abd4e27d716086f0269eb53233ebe9b091e8c28aa24aa7ac9aaf3c246b5.webp)

Заманауи форматтар көлемнен ұтады, бірақ белгілеуде қосалқы нұсқа керек.

## WebP әлде AVIF?

### WebP

Тез кодталады, көптеген үстелдік бағдарламада және барлық жерде дерлік ашылады. Мөлдірлік пен анимация бар. Жақ шегі 16 383 пиксель. Жиі қайта жиналатын үлкен кітапханаға орынды әдепкі таңдау.

### AVIF

Тығызырақ сығады: сол кадрларда медианасы 66 КБ, JPEG-те 119 КБ. Кең ауқым мен 12 битті қолдайды. Бірнеше есе ұзақ кодталып, браузерден тыс үнемі ашыла бермейді, сондықтан қосалқы формат қажет.

## Кітапхананы заманауи форматтарға қалай көшіруге болады?

-

### Суреттерді түріне қарай бөліңіз

Фотоларды бір тізімге, анық жиекті және мөлдір графиканы екіншісіне жинаңыз. Олардың ережесі бөлек.

-

### Түпнұсқаларды өзгертпеңіз

Барлық туынды әрдайым түпнұсқадан жасалады. Сығылған файлды басқа форматқа аударып «жақсарту» мүмкін емес.

-

### Нұсқаларды дайындаңыз

Фотоға AVIF пен WebP, қосалқы JPEG. Графика векторлық болса SVG, болмаса палитрасы қысқартылған PNG.

-

### Таңдауды белгілеуде көрсетіңіз

Бірнеше `source` бар `picture` тегін қолданыңыз: браузер өзі танитын алғашқы форматты алып, қалғанына тимейді.

-

### Көлем мен сапаны іріктеп тексеріңіз

Әртүрлі сюжеттегі он шақты кадр жеткілікті: тегіс фон, ұсақ текстура, контраст графика.

-

### Кері жолды сақтаңыз

Хаттағы сілтеме, серіктеске экспорт немесе баспахана файлы AVIF емес, әлі де JPEG не TIFF болуы керек.

## GIF пен SVG ше?

GIF дәуірі өтті: 256 түс және бір жағына 65 536 пиксель шек. Оны әлі қолданатын жалғыз нәрсе — қысқа анимацияны WebP, AVIF немесе кәдімгі бейне жақсырақ атқарады.

SVG бөлек тұрады: ол пиксельді емес, пішіндерді сипаттайды. Логотип, белгіше, сызба мен график жоғалтусыз масштабталып, бірнеше килобайт қана алады. Ереже қарапайым: сурет түсірілмей, салынған болса, SVG-ден бастаңыз.

Формат қате өлшемнен құтқармайды

400 пиксельдік орынға салынған ені 3000 пиксель кадр кез келген форматта ауыр болып қалады. Алдымен өлшем, содан кейін формат — керісінше емес.

## Фотостокпен жұмыста бұл нені білдіреді?

Стоктағы жұмыс парағыңызға емес, сақтауға ыңғайлы форматта келеді. Ол — нақты орынға нұсқа жасайтын түпнұсқа. Picwin мұқабалары мен превьюлері WebP түрінде беріледі, ал витрина браузер болжамас үшін әр суреттің түрін жариялайды.

[ИллюстрацияИллюстрация мен графика — каталогтың вектор немесе мөлдір PNG жиі керек болатын бөлігі.
Жұмыстарды көру](/kk/category/illustration)[ТекстураларТекстура мен фон: тегіс сюжет жақсы сығылады, формат айырмасы оларда анық көрінеді.
Жұмыстарды көру](/kk/category/textures)

**Ең бастысы**

- Формат төрт қасиетпен таңдалады: жоғалту, мөлдірлік, анимация және қолдау.

- Фотоға WebP не AVIF және қосалқы JPEG; графикаға SVG, болмаса PNG.

- Тең сапада AVIF JPEG-тен 45%, WebP 22% жеңіл болды.

- WebP жағының шегі 16 383 пиксель, AVIF-те іс жүзінде шек жоқ.

- Үнем пайызы сюжетке тәуелді, өз кадрыңызды өлшеңіз.

Міндетке сай дайын кадр керек пе?

Picwin мини-қосымшасында сурет тапсырмаға сай жасалып, витринаға дайын келеді; парақтағы орнына лайық форматты таңдау ғана қалады.

[Мини-қосымшаны ашу](/kk/partners)

### WebP жақсы ма, AVIF жақсы ма?

AVIF тығызырақ сығады, WebP жылдам кодталып, көбірек бағдарламада ашылады. Екеуін `picture` арқылы беріп, JPEG-ті қосалқы ұстаған дұрыс.

### JPEG-тен қазір бас тартуға бола ма?

Сайтта — дерлік болады, сайттан тыс — жоқ. Хаттар, экспорт, баспахана және ішкі жүйелер әлі JPEG пен TIFF-ке сүйенеді.

### JPEG-ті WebP-ке ауыстырғанда сапа бұзыла ма?

Жоғалтумен сақталса, иә. Бастапқы артефакт қалады да, жаңасы қосылады. Сығылған көшірмеден емес, түпнұсқадан түрлендіріңіз.

### PNG фотосуреті неге он мегабайт болады?

Өйткені PNG жоғалтусыз сығады. Фото үшін бұл барлық дерлік реңкті сақтау; біздің эталон PNG 1200 пиксель еннің өзінде 1–2 МБ болды.

### Логотипке қай форматты таңдаған жөн?

Векторы болса SVG. Болмаса мөлдір PNG; шағын өлшемге 64 түсті палитра жеткілікті.

### Барлық браузер AVIF-ті қолдай ма?

Негізгі браузерлердің қазіргі нұсқалары қолдайды, бірақ сырттағы қолдау біркелкі емес. Сондықтан MDN `picture` арқылы қосалқы нұсқа ұсынады.

### 4:2:0 түстік субдискреттеуі деген не және қашан кедергі?

Бұл түсті жарты ажыратымдылықпен сақтау. Фотода байқалмайды, түрлі түсті мәтін мен жіңішке сызықта лас жиек береді; мұнда PNG немесе жоғалтусыз сығу керек.

Әрі қарай [сурет өлшемі мен ажыратымдылығы](/kk/blog/suret-olshemi-jane-dpi), [жылдам сайтқа сурет дайындау](/kk/blog/sait-ushin-jyldam-suretter) және [баспаға дайындау](/kk/blog/suretti-baspaga-dayyndau) туралы оқыңыз. Дайын жұмыстар [каталогта](/kk/catalog).