# Сайт баяуламауы үшін суреттерді қалай дайындау керек Источник / Source: https://picwin.co/kk/blog/sait-ushin-jyldam-suretter Язык / Language: kk Рубрика / Topic: Технологиялар Автор / Author: Picwin редакциясы Опубликовано / Published: 2026-03-24T00:00:00.000Z Обновлено / Updated: 2026-09-03T11:17:26.468Z Слов / Words: 1130 · Чтение / Reading: 6 min Обложка / Cover: https://picwin.co/api/picwin/blog-images/b95b29e31ea6c666928832f74b6182cec0b300c0c5970d3871e0101461f9d2dc.webp Переводы / Translations: en: https://picwin.co/en/blog/fast-images-for-websites, pt: https://picwin.co/pt/blog/imagens-rapidas-para-sites, ru: https://picwin.co/blog/bystrye-kartinki-dlya-sayta, uz: https://picwin.co/uz/blog/sayt-uchun-tez-rasmlar Суреттер — көп беттегі ең ауыр бөлік, сайттың Core Web Vitals шегіне сыюы да соларға байланысты. Файлдың салмағы мен қажетті өлшемін есептеуді және ең көп пайда беретін бес белгілеу жолын талдаймыз. --- **Қысқаша** Сурет көрсетілетін өлшемде, заманауи форматта және белгілеуде өлшемдері жарияланған күйде келуі керек. Бағдар: бірінші экрандағы негізгі сурет — 200 КБ-қа дейін, қалғандары — 100 КБ-қа дейін. Жақсы жүктелу шегі — беттің ең ірі элементі көрінгенге дейінгі 2,5 секунд. Ауыр сурет дерексіз «жылдамдыққа» емес, нақты бір секундқа зиян келтіреді: келуші дәл сол сәтте беттің негізгі суретін көреді. Әдетте ол ең ірі элемент болады, демек беттің шекке сыюын да сол шешеді. ## Неліктен бет жылдамдығын суреттер шешеді? Өйткені олар беттегі ең ауыр әрі ең көрнекті элементтер болады. [Core Web Vitals](https://web.dev/articles/vitals) жиынтығында үш көрсеткіш аталған; суреттер оның екеуіне тікелей әсер етеді: - **LCP** — ең ірі элемент салынғанға дейінгі уақыт. **2,5 секундқа** дейінгі нәтиже жақсы саналады; - **CLS** — макеттің жиынтық ығысуы. **0,1** және одан аз мән жақсы саналады. Екі шек те жүктеулердің **75-процентилі** бойынша өлшенеді: кірулердің төрттен үші талапқа сай болуы керек — тек ноутбугыңызда емес, баяу телефонда да. ## Суреттің салмағы қанша болуы мүмкін? Сезімге емес, арна жылдамдығына сүйеніңіз. 5 Мбит/с — 5 000 000 ÷ 8 = секундына 625 000 байт, шамамен 610 КБ/с. Демек, 1 МБ сурет оқырманға шамамен 1,7 секундта жетеді. Бұл байланыс орнатуға кеткен уақыт пен беттегі өзге файлдармен бәсекені есептемегенде. Осыдан арифметикамен оңай тексерілетін бюджет шығады. Беттегі рөлі Салмақ бағдары Бірінші экрандағы негізгі сурет 200 КБ-қа дейін Мәтіндегі иллюстрация 100 КБ-қа дейін Каталог торындағы превью 40 КБ-қа дейін Белгіше, аватар 10 КБ-қа дейін Мегабайттардың қайдан шығатынын білген пайдалы. Әр пиксельге үш байттан келетін сығылмаған 1920 × 1080 кадр — 1920 × 1080 × 3 = 6,2 МБ. Бұдан кішінің бәрі сығудың нәтижесі, ал 6 МБ пен 150 КБ арасындағы айырма файлдың қалай сақталғанына тәуелді. Форматты таңдау [JPEG, PNG, WebP және AVIF туралы мақалада](/kk/blog/suret-formattary-jpeg-png-webp-avif) қарастырылған. ## Файлды қандай өлшемде беру керек? Сурет көрсетілетін өлшемді экран тығыздығына көбейткен мәнде — одан үлкен емес. Ені 400 CSS-пиксель ұядағы 4000 пиксельдік файл жақсы көрінбейді: браузер оны бәрібір кішірейтіп, трафик пен жадты босқа жұмсайды. Іс жүзіндегі шек — екі еселік тығыздық. 2× пен 3× айырмасы байқалмайды, ал аудан және онымен бірге салмақ 2,25 есе өседі. Ұя ені мен тығыздықты есептеу [сурет өлшемі және DPI туралы мақалада](/kk/blog/suret-olshemi-jane-dpi) толық түсіндірілген. Бір ұяға әдетте бірнеше файл қажет: телефон мен үлкен монитор бір суретті әртүрлі енде көрсетеді. Белгілеудегі `srcset` пен `sizes` осы үшін бар — браузер ұя ені мен экран тығыздығын біліп, лайық файлды өзі таңдайды. ![Екі панельде ауыр, белгіленбеген сурет пен дайындалған жеңіл нұсқа салыстырылған](/api/picwin/blog-images/9aeadeeaf6d4e0815d19911a40f408a0bae2212cf85b79d058cfff30be693c9d.webp) Дайындау бір әрекет емес, төрт шешім: өлшем, формат, белгілеу және кэш. ## Сайтқа суретті қалай дайындау керек? - ### Қажетті пропорцияға қиыңыз Беттегі кадрға кірмейтін пиксельдер файлда да болмауы керек. - ### Ұя енін 2-ге көбейткен өлшемге кішірейтіңіз Аралық өлшемдер тізбегімен емес, түпнұсқадан бір рет кішірейтіңіз. - ### Заманауи форматта сақтаңыз JPEG резервімен WebP не AVIF қолданыңыз. Мөлдірлік тек қажет жерде болсын. - ### Екінші және үшінші өлшем жасаңыз Мысалы, ені 400, 800 және 1600 пиксель файлдарды `srcset` ішінде атаңыз. - ### Белгілеуде өлшемдерді жариялаңыз `width` пен `height` атрибуттары немесе стильдегі `aspect-ratio` браузерге жүктелуге дейін орын сақтатады. - ### Басымдықтарды қойыңыз Негізгі суретке `fetchpriority="high"`, бірінші экраннан төмендегінің бәріне `loading="lazy"` беріңіз. - ### Баяу байланыста тексеріңіз Әзірлеуші құралдарында жылдамдықты шектеп, келушінің алғашқы екі секундта не көретінін байқаңыз. ## srcset ішінде қанша өлшем сақтау керек? Әдетте үш-төрт саты жеткілікті. Көршілес өлшемдер арасы шамамен бір жарым есе болғаны жөн: 400, 600, 900, 1400 пиксель. Жиі сатылар трафикті аз үнемдейді — салмақ аудан сияқты өседі, 800 бен 900 пиксель айырмасы байттың шамамен 25%-ын құрайды — бірақ файлдарды дайындау мен сақтау жұмысын көбейтеді. Сатыларды дөңгелек сандардан емес, макеттен таңдаңыз. Телефон, планшет және кең монитордағы ұя енін қарап, тығыз экрандар үшін әрқайсын екі еселеп, осы үш мәнді алыңыз. `sizes` атрибуты міндетті: онсыз браузер сурет терезе енін толық алады деп санап, телефонға қажетінен үлкен файл жүктейді. ## Ненің баяулатып тұрғанын қалай білуге болады? Болжаммен емес, өлшеумен. Әзірлеуші құралдарынан желі қойындысын ашып, сұрауларды көлемі бойынша сұрыптаңыз да, алғашқы бес жолды қараңыз — көбіне олар суреттер болады. Содан соң жылдамдықты шектеп, бетті қайта жүктеңіз: негізгі экранның шығуын қай файл бөгейтіні көрінеді. Келген файл өлшемі мен оның көрсетілетін өлшемінің айырмасын да қараңыз. Браузер элемент кеңесінде екі санды да көрсетеді. Файл ұядан екі еседен артық кең болса, артық салмақ табылды. ## Макеттің секіруіне қалай жол бермеуге болады? Өлшемдерді жариялау керек. Браузер сурет пропорциясын білмей тұрғанда оған нөл биіктік қалдырады, ал жүктелген соң бетті керіп, мәтінді оқыла бастаған сәтте төмен жылжытады. Бұл — макет ығысуы, ол CLS ішінде есептеледі. Бір жол жеткілікті: `img` тегіндегі файлдың нақты пропорциясына сай `width` пен `height` атрибуттары. Заманауи браузерлер олардан арақатынасты шығарып, стильде ен пайызбен берілсе де орынды сақтайды. Кейін жүктеу бәріне арналмаған Негізгі суретке `loading="lazy"` беру бетті баяулатады: браузер дәл қазір қажет файлды кейінге қалдырады. Тек төмен жылжытып жететін бөлік кейін жүктелуі керек. ## Кэш пен CDN не істейді? Кэш екінші және кейінгі жүктеулерді шешеді: файлды сақтауға рұқсат болса, браузер оны қайта сұрамайды. Мекенжай мазмұнмен бірге өзгерсе, мысалы файл атауында мазмұн таңбасы болса, суреттер үшін бұл қауіпсіз. Сонда ескі нұсқаны көрсету қаупінсіз ұзақ сақтау мерзімін қоюға болады. CDN арақашықтықты шешеді: файл оқырманға жақын серверден беріледі. Бірнеше елдегі аудитория үшін бұл тағы жиырма килобайт үнемдеуден пайдалырақ болады. ## Шамадан тыс сығылғанда не болады? Жоғалтумен сығу блоктармен жұмыс істейді. Сапа тым төмендесе, үш таныс ақау шығады: тегіс жерлерде 8 × 8 пиксель шаршылар, өткір жиектер бойында ореолдар және біркелкі градиент орнына жолақтар. Алдымен аспан мен студия фоны бұзылады. Ақаулар қайтымсыз әрі жиналады. Сығылған файлды әр қайта сақтау ескі артефактілер үстіне жаңасын қосады, сондықтан түзету әрдайым түпнұсқадан жасалады. Шекті қалай табуға болады Бір кадрды үш сапада сақтап, 100% масштабта ашыңыз да, біркелкі градиентті бөлікті салыстырыңыз. Аспанда жолақ байқалған жер — қолайлы сапаның шегі. ## Бұл фотосток суреттері үшін нені білдіреді? Стоктағы жұмыс үлкен өлшемде келеді — түпнұсқа үшін дұрыс, бет үшін бұрыс. Жариялауға дайындағанда қалыпты жолды қайталаңыз: қию, кішірейту, заманауи формат, белгілеудегі өлшемдер. Picwin сөресінде жұмыс превьюі — қабырғасы 1024 пиксель шаршы, ал каталог торында ол кішірейтіліп көрсетіледі. [ТехникаИнтерфейстер, құрылғылар мен деректер бейнеленген кадрлар жеңіл беттерде жиі кездеседі. Жұмыстарды көру](/kk/category/technology)[БизнесНегізгі кадр алғашқы секундты шешетін лендингтерге арналған іскерлік сюжеттер. Жұмыстарды көру](/kk/category/business) **Ең бастысы** - Жақсы жүктелу шегі — 75-процентиль бойынша ең ірі элементке дейін 2,5 секунд. - Салмақ арнадан есептеледі: 5 Мбит/с жылдамдықта 1 МБ шамамен 1,7 секунд жүреді. - Файл ені ұя енін 2-ге көбейткенге тең, бір пиксель де артық емес. - Белгілеудегі өлшемдер макет секіруін тегін жояды. - Кейін жүктеу негізгі суреттен басқасының бәріне арналған. Міндетке сай жеңіл кадр керек пе? Picwin мини-қосымшасында сурет тапсырмаға сай — белгілі пропорциямен және бетке артық мегабайт қоспай жасалады. [Мини-қосымшаны ашу](/kk/partners) ### Сайтқа арналған жақсы суреттің салмағы қанша? Бірінші экрандағы негізгі сурет — 200 КБ-қа, мәтіндегі иллюстрация — 100 КБ-қа, тордағы превью — 40 КБ-қа дейін. Бұл қатаң ереже емес, арна жылдамдығынан шығарылған бағдар. ### Беттегі барлық сурет жалпы қанша болуы керек? Негізгі сурет 2,5 секундта көрінетіндей болуы керек. Қалғанының бәрін кейін жүктеуге болады және солай істеу қажет. ### Сурет онсыз да шағын болса, WebP көмектесе ме? Иә, бірақ ұтыс секунд емес, килобайт болады. Өлшемнен бастаңыз: ұядан екі есе кең файл сәтсіз форматтан әлдеқайда көп шығын әкеледі. ### PNG белгішелерін сығу керек пе? Белгішелерді көбіне вектормен берген дұрыс. Растр қажет болса, палитраны азайтыңыз: 64 түсті PNG толық түстіден бірнеше есе жеңіл. ### Қайсысы маңызды: файл өлшемі ме, саны ма? Бүгінде — өлшемі. Заманауи байланыс ондаған қатар сұрауды көтереді, бірақ артық мегабайттарды ештеңе жылдамдата алмайды. ### Неліктен бет менде жылдам, ал келушілерде баяу? Сізде бәрі кэште және арнаңыз жақсы. 75-процентильге қарап, әзірлеуші құралдарында жылдамдық шектеуін қосыңыз. ### Жақсарғанын қалай тексеруге болады? Бірдей жылдамдық шектеуінде түзетуден бұрын және кейін ең ірі элементке дейінгі уақытты өлшеңіз. Өлшеусіз әсер әрдайым дерлік алдайды. Тақырыптың жалғасы: [өлшем мен ажыратымдылық](/kk/blog/suret-olshemi-jane-dpi), [формат таңдау](/kk/blog/suret-formattary-jpeg-png-webp-avif) және [баспаға дайындау](/kk/blog/suretti-baspaga-dayyndau) — онда сол пиксельдер басқа ережемен жұмыс істейді. Дайын жұмыстар [каталогта](/kk/catalog).