Қысқаша
Сурет көрсетілетін өлшемде, заманауи форматта және белгілеуде өлшемдері жарияланған күйде келуі керек. Бағдар: бірінші экрандағы негізгі сурет — 200 КБ-қа дейін, қалғандары — 100 КБ-қа дейін. Жақсы жүктелу шегі — беттің ең ірі элементі көрінгенге дейінгі 2,5 секунд.
Ауыр сурет дерексіз «жылдамдыққа» емес, нақты бір секундқа зиян келтіреді: келуші дәл сол сәтте беттің негізгі суретін көреді. Әдетте ол ең ірі элемент болады, демек беттің шекке сыюын да сол шешеді.
Неліктен бет жылдамдығын суреттер шешеді?
Өйткені олар беттегі ең ауыр әрі ең көрнекті элементтер болады. Core Web 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 туралы мақалада қарастырылған.
Файлды қандай өлшемде беру керек?
Сурет көрсетілетін өлшемді экран тығыздығына көбейткен мәнде — одан үлкен емес. Ені 400 CSS-пиксель ұядағы 4000 пиксельдік файл жақсы көрінбейді: браузер оны бәрібір кішірейтіп, трафик пен жадты босқа жұмсайды.
Іс жүзіндегі шек — екі еселік тығыздық. 2× пен 3× айырмасы байқалмайды, ал аудан және онымен бірге салмақ 2,25 есе өседі. Ұя ені мен тығыздықты есептеу сурет өлшемі және DPI туралы мақалада толық түсіндірілген.
Бір ұяға әдетте бірнеше файл қажет: телефон мен үлкен монитор бір суретті
әртүрлі енде көрсетеді. Белгілеудегі srcset пен sizes осы үшін бар — браузер
ұя ені мен экран тығыздығын біліп, лайық файлды өзі таңдайды.
Дайындау бір әрекет емес, төрт шешім: өлшем, формат, белгілеу және кэш.
Сайтқа суретті қалай дайындау керек?
Қажетті пропорцияға қиыңыз
Беттегі кадрға кірмейтін пиксельдер файлда да болмауы керек.
Ұя енін 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 атрибуттары. Заманауи браузерлер олардан арақатынасты шығарып, стильде
ен пайызбен берілсе де орынды сақтайды.
Кэш пен CDN не істейді?
Кэш екінші және кейінгі жүктеулерді шешеді: файлды сақтауға рұқсат болса, браузер оны қайта сұрамайды. Мекенжай мазмұнмен бірге өзгерсе, мысалы файл атауында мазмұн таңбасы болса, суреттер үшін бұл қауіпсіз. Сонда ескі нұсқаны көрсету қаупінсіз ұзақ сақтау мерзімін қоюға болады.
CDN арақашықтықты шешеді: файл оқырманға жақын серверден беріледі. Бірнеше елдегі аудитория үшін бұл тағы жиырма килобайт үнемдеуден пайдалырақ болады.
Шамадан тыс сығылғанда не болады?
Жоғалтумен сығу блоктармен жұмыс істейді. Сапа тым төмендесе, үш таныс ақау шығады: тегіс жерлерде 8 × 8 пиксель шаршылар, өткір жиектер бойында ореолдар және біркелкі градиент орнына жолақтар. Алдымен аспан мен студия фоны бұзылады.
Ақаулар қайтымсыз әрі жиналады. Сығылған файлды әр қайта сақтау ескі артефактілер үстіне жаңасын қосады, сондықтан түзету әрдайым түпнұсқадан жасалады.
Бұл фотосток суреттері үшін нені білдіреді?
Стоктағы жұмыс үлкен өлшемде келеді — түпнұсқа үшін дұрыс, бет үшін бұрыс. Жариялауға дайындағанда қалыпты жолды қайталаңыз: қию, кішірейту, заманауи формат, белгілеудегі өлшемдер. Picwin сөресінде жұмыс превьюі — қабырғасы 1024 пиксель шаршы, ал каталог торында ол кішірейтіліп көрсетіледі.
ТехникаИнтерфейстер, құрылғылар мен деректер бейнеленген кадрлар жеңіл беттерде жиі кездеседі.
Негізгі кадр алғашқы секундты шешетін лендингтерге арналған іскерлік сюжеттер.
Ең бастысы
- Жақсы жүктелу шегі — 75-процентиль бойынша ең ірі элементке дейін 2,5 секунд.
- Салмақ арнадан есептеледі: 5 Мбит/с жылдамдықта 1 МБ шамамен 1,7 секунд жүреді.
- Файл ені ұя енін 2-ге көбейткенге тең, бір пиксель де артық емес.
- Белгілеудегі өлшемдер макет секіруін тегін жояды.
- Кейін жүктеу негізгі суреттен басқасының бәріне арналған.
Сайтқа арналған жақсы суреттің салмағы қанша?
Бірінші экрандағы негізгі сурет — 200 КБ-қа, мәтіндегі иллюстрация — 100 КБ-қа, тордағы превью — 40 КБ-қа дейін. Бұл қатаң ереже емес, арна жылдамдығынан шығарылған бағдар.
Беттегі барлық сурет жалпы қанша болуы керек?
Негізгі сурет 2,5 секундта көрінетіндей болуы керек. Қалғанының бәрін кейін жүктеуге болады және солай істеу қажет.
Сурет онсыз да шағын болса, WebP көмектесе ме?
Иә, бірақ ұтыс секунд емес, килобайт болады. Өлшемнен бастаңыз: ұядан екі есе кең файл сәтсіз форматтан әлдеқайда көп шығын әкеледі.
PNG белгішелерін сығу керек пе?
Белгішелерді көбіне вектормен берген дұрыс. Растр қажет болса, палитраны азайтыңыз: 64 түсті PNG толық түстіден бірнеше есе жеңіл.
Қайсысы маңызды: файл өлшемі ме, саны ма?
Бүгінде — өлшемі. Заманауи байланыс ондаған қатар сұрауды көтереді, бірақ артық мегабайттарды ештеңе жылдамдата алмайды.
Неліктен бет менде жылдам, ал келушілерде баяу?
Сізде бәрі кэште және арнаңыз жақсы. 75-процентильге қарап, әзірлеуші құралдарында жылдамдық шектеуін қосыңыз.
Жақсарғанын қалай тексеруге болады?
Бірдей жылдамдық шектеуінде түзетуден бұрын және кейін ең ірі элементке дейінгі уақытты өлшеңіз. Өлшеусіз әсер әрдайым дерлік алдайды.
Тақырыптың жалғасы: өлшем мен ажыратымдылық, формат таңдау және баспаға дайындау — онда сол пиксельдер басқа ережемен жұмыс істейді. Дайын жұмыстар каталогта.
