Зургийн оновчлол

Зургийн формат JPG, PNG, WebP, AVIF-ийн алийг нь ашиглах вэ?

Өнөөдөр зурагт WebP эсвэл AVIF-ийг түрүүлж, лого · дүрс тэмдэгт SVG-г ашиглах нь үндсэн жишиг болсон. web.dev нь WebP, AVIF ихэвчлэн хуучин форматаас (JPG · PNG) илүү сайн шахагддаг тул боломжтой бол ашиглахыг зөвлөдөг.

Гэхдээ AVIF ашиглахдаа үүнийг уншиж чадахгүй орчинд зориулж JPG зэрэг орлох файлыг хамт байршуулах нь найдвартай. Хөдөлгөөнт GIF маш их хэмжээтэй тул богино видео файл болгон солих нь хамаагүй хөнгөн.

Олон тохиолдолд форматыг та өөрөө сонгох шаардлагагүй. Вэбсайтыг хэрхэн бүтээснээс хамаарч JPG оруулахад үйлчлүүлэгчийн хөтөчид тааруулан WebP эсвэл AVIF болгож илгээдэг функц багтсан байдаг.

Тунгалаг дэвсгэр шаардлагатай лого, дэвсгэрийг нь арилгасан барааны зургийг ч PNG биш WebP-ээр хадгалбал ихэнхдээ илүү хөнгөн болдог.

Вэбсайтын зургийг хэдэн пиксел, хэдэн KB-аар оруулах вэ?

Бүх зурагт тохирох тогтсон тоо байхгүй, "дэлгэц дээр бодитоор харагдах хэмжээ"-г үндэслэн тогтооно. Утасны дэлгэцийн өргөнийг дүүргэх зураг бол тэр өргөний 2 дахин орчим пиксел байхад тод дэлгэц дээр ч ихэнхдээ хангалттай.

Утасны камерын эх зураг хөндлөнгөөрөө 4,000 пикселээс давах нь түгээмэл тул вэбсайтад шууд оруулбал ихэнх пиксел нь дэмий үрэгддэг. Том баннерын зураг, жижиг жагсаалтын thumbnail-д тус тусад нь хэмжээ бэлдэх нь зүйтэй.

Нэг зураг ч формат, шахалтын түвшнээс хамаарч хэмжээ нь ихээр өөрчлөгддөг тул тоо цээжлэхээс илүү дэлгэц дээр чанарыг нь харж шийдэх нь оновчтой. Ялангуяа эхний дэлгэцийн зургийг хөнгөн болгосноор анхны сэтгэгдэл хурдан бүрддэг.

Салбараар нь харвал кафе · хоолны газарт цэсний галерей, үсчинд үйлчилгээний өмнөх ба дараах зураг, онлайн худалдаанд барааны дэлгэрэнгүй зураг хамгийн амархан хүндэрдэг. Эдгээрээс эхэлж шалгавал үр дүн их байна.

Респонсив зураг, хойшлуулсан ачаалалт гэж юу вэ?

Респонсив зураг гэдэг нь нэг зургийг хэд хэдэн хэмжээгээр бэлдэж, үйлчлүүлэгчийн дэлгэцэд тохирох ганцхан хэмжээг илгээх арга юм. HTML-ийн srcset · sizes гэх тохиргоог ашиглавал хөтөч дэлгэцийн хэмжээг хараад тохирох файлыг сонгоно.

Хойшлуулсан ачаалалт (lazy loading) гэдэг нь дэлгэцийн доод хэсгийн зургийг үйлчлүүлэгч гүйлгэж ойртох үед ачаалах арга юм. Гэхдээ web.dev нь эхний дэлгэцэд харагдах зураг, ялангуяа хамгийн том зурагт хойшлуулсан ачаалалт тавихгүй байхыг зөвлөдөг. Учир нь эхний дэлгэц харин ч удаан гарч ирдэг.

Зураг бүрийн өргөн · өндрийг (width · height) бичиж өгөх нь бас чухал. Хэмжээг нь мэдэхгүй бол зураг гарч ирэх агшинд текст доош түлхэгдэж, үйлчлүүлэгч дарах гэж байсан товчоо андуурч дарах нь ч бий.

Хойшлуулсан ачаалалт, респонсив зургийг ихэвчлэн бүтээх шатанд тохируулдаг тул та зураг оруулах бүртээ тусдаа хийх зүйлгүй. Гэхдээ зөв тохируулсан эсэхийг нээлтээс өмнө нэг удаа шалгуулахыг хүсээрэй.

Зургаа өөрөө оруулахдаа хэмжээг нь яаж багасгах вэ?

Админ хуудас дээрээ зургийг автоматаар багасгадаг вэбсайт бол эх зургийг оруулахад болно. Үгүй бол доорх дарааллаар нэг удаа багасгаад оруулдаг дадал суулгахад хангалттай.

Кафены шинэ цэс, урлангийн бүтээл зэрэг байнга оруулдаг зурагт нэг удаа стандарт тогтоочихвол амар. "Галерейн зураг хөндлөнгөөрөө хэдэн пиксел, WebP" гэх мэт гүйцэтгэгчтэй тохирсон стандартаа тэмдэглэж аваад, тэр бүр ижил аргаар багасгахад болно.

Утсаар авсан зурагт авсан байршил зэрэг мэдээлэл хамт хадгалагдах нь бий. Багасгах хэрэгсэлд ийм мэдээллийг устгах тохиргоо байвал асааж байх нь хэмжээ, хувийн мэдээллийн аль талаас нь ч ашигтай.

1. 01Оруулах байрлал (баннер, галерей, барааны жагсаалт) дэлгэц дээр хэр том харагдахыг шалгана.
2. 02Зураг засах апп эсвэл үнэгүй зураг шахах хэрэгслээр хөндлөн хэмжээг тэр байрлалд тааруулж багасгана.
3. 03Хадгалах форматаар WebP-г сонгож, чанарыг нүдэнд ялгаа мэдэгдэхгүй хэмжээнд хүртэл бууруулж үзнэ.
4. 04Файлын нэрийг "IMG_1234" биш "yeonnam-cafe-handdrip.webp" шиг агуулга нь харагдахаар солино.
5. 05Оруулсны дараа утасны дата (Wi-Fi унтраасан байдал)-аар хуудсыг нээж хурдыг шалгана.

Зургийн тайлбар (alt), файлын нэрийг яаж бичих вэ?

Зургийн тайлбарыг зургийг харж чадахгүй хүнд "энэ зураг юу илэрхийлж байгааг" нэг өгүүлбэрээр хэлж өгч байгаа юм шиг бичихэд болно. Google Search Central нь зургийн тайлбарыг зургийн мэдээллээс хамгийн чухал атрибут гэж үзэж, түлхүүр үгийг хүчээр чихэхгүй байхыг зөвлөдөг.

Чимэглэлийн хээ, дэвсгэр зэрэг агуулгагүй зурагт тайлбарыг хоосон үлдээх нь зөв. W3C-ийн зургийн зааварт ч чимэглэлийн зурагт тайлбарын утгыг хоосон үлдээхийг заадаг. Харин цэсний самбар шиг бичигтэй зурагт тэр бичгийг тайлбартаа яг хэвээр нь буулгаж бичих хэрэгтэй.

Файлын нэр ч бас жижиг сэжүүр болдог. Google нь "IMG00023.JPG" гэх мэт нэрээс илүү богино бөгөөд агуулгыг тайлбарласан файлын нэрийг зөвлөдөг. Латин жижиг үсэг, зураас (-)-аар нэрлэвэл хаяг эвдрэхгүй тул удирдахад ч амар.

• Сайн жишээ: "Гүзээлзгэнэтэй цөцгийн бялууны нэг зүсэм, дээрээ шинэ гүзээлзгэнэ гурав"
• Муу жишээ: "Бялууны шилдэг газар бялуу санал болгох бялуу захиалах" (зөвхөн түлхүүр үг жагсаасан)
• Муу жишээ: "зураг1", "image" (ямар ч мэдээлэлгүй)

Зургийн оновчлолд ямар алдаа түгээмэл гаргадаг вэ?

Хамгийн түгээмэл алдаа бол нээх үедээ хөнгөн байсан ч, ажиллуулах явцад эх зургууд нэг нэгээрээ хуримтлагдаж дахин удааширдаг явдал. Ялангуяа галерей · сэтгэгдэл · бараа байнга нэмэгддэг бизнест олонтаа тохиолддог.

Цэс · үнийн жагсаалт · урамшууллын мэдээллийг ганц зургаар л оруулах нь бас асуудал. Хүнд байдгаас гадна хайлтын систем, дэлгэц уншигч программ агуулгыг нь уншиж чаддаггүй.

Хурдыг Google PageSpeed Insights зэрэг үнэгүй хэрэгсэлд хаягаа оруулахад л шалгаж болно. Үр дүнд зурагтай холбоотой сайжруулах зөвлөмж гарвал эхлээд зургаа засахад болно.

Галерейд хэдэн арван зураг байвал эхэндээ цөөхнийг харуулж, "Цааш үзэх" дарахад үлдсэнийг ачаалах арга бий. Эхний дэлгэц хамаагүй хөнгөн болно.

Зургийн оновчлолын талаар гүйцэтгэгчээс юу асуух вэ?

Зураг нээлтийн дараа ч байнга нэмэгддэг тул анх оруулах үе, ажиллуулах үе гэж хувааж доорх 4 зүйлийг асуугаарай.

• Админ хуудаснаас оруулсан зургийг автоматаар багасгаж, форматыг нь хөрвүүлдэг үү?
• Дэлгэцийн хэмжээнд тохирох зургийг сонгож илгээдэг респонсив зураг ашигладаг уу?
• Эхний дэлгэцийн зургийн ачаалах хурдыг нээлтээс өмнө хэмжиж өгөх үү?
• Нээсний дараа ч хүнд зураг нэмэгдээгүй эсэхийг шалгаж өгөх үү?