Вэб дүрсийг оновчтой болгох гарын авлага

Вэб зургийн форматыг ойлгох

Зургийн зөв форматыг сонгох нь вэб оновчлолын үндэс суурь юм. Формат бүр өөр өөр зорилготой бөгөөд өвөрмөц давуу талыг санал болгодог. JPEG нь маш сайн шахалтын харьцааг санал болгож, олон өнгө бүхий гэрэл зураг болон нийлмэл зургуудад тохиромжтой боловч алдагдал багатай. PNG нь тунгалаг, хурц ирмэгтэй, хязгаарлагдмал өнгөт палитр бүхий зураг дээр илүү сайн байдаг нь лого, графикт тохиромжтой байдаг ч файлын хэмжээ илүү том байх хандлагатай байдаг. WebP нь дараагийн үеийн вэб зургуудыг төлөөлдөг бөгөөд JPEG болон PNG-тай харьцуулахад илүү сайн шахалтыг хангаж, өндөр чанарыг хадгалдаг. Энэ нь алдагдалтай, алдагдалгүй шахалт, ил тод байдал, хөдөлгөөнт дүрсийг хоёуланг нь дэмждэг. Гэсэн хэдий ч хөтөчийн дэмжлэг нь өргөн цар хүрээтэй боловч бүх нийтийнх биш юм. AVIF нь бүр ч шинэ бөгөөд JPEG-ээс 50% хүртэл жижиг шахалтын хурдыг санал болгодог боловч хөтчийн хэрэглээ өссөөр байна. Лого, дүрс, энгийн чимэглэл гэх мэт вектор графикийн хувьд SVG нь ялагдашгүй юм. Вектор форматын хувьд SVG зургууд нь чанараа алдалгүйгээр хязгааргүй масштабтай байдаг бөгөөд ихэвчлэн жижиг хэмжээтэй файлтай байдаг. Тэдгээрийг мөн кодоор засварлах боломжтой бөгөөд интерактивийг дэмждэг тул орчин үеийн вэб дизайн хийхэд гайхалтай уян хатан болгодог.

• JPEG: Гэрэл зураг болон нарийн төвөгтэй зургуудад хамгийн тохиромжтой
• PNG: Ил тод, хурц ирмэг бүхий графикт тохиромжтой
• WebP: Дээд зэргийн шахалт бүхий орчин үеийн формат
• AVIF: Онцгой шахалт бүхий хамгийн сүүлийн үеийн формат
• SVG: Өргөтгөх боломжтой вектор график болон дүрсүүдэд тохиромжтой

Зураг шахах техник ба чанарын тохиргоо

Зургийн чанар болон файлын хэмжээг тэнцвэржүүлэхийн тулд шахалтыг ойлгох нь маш чухал юм. JPEG гэх мэт форматуудад ашигладаг алдагдалтай шахалт нь файлын хэмжээг багасгахын тулд зургийн өгөгдлийг бүрмөсөн устгадаг. Хамгийн гол нь харааны чанарыг хүлээн зөвшөөрөхийн зэрэгцээ шахалтыг дээд зэргээр нэмэгдүүлэх таатай цэгийг олох явдал юм. Ихэнх вэб зургийн хувьд 75-85%-ийн JPEG чанарын тохиргоо нь маш сайн тэнцвэрийг хангадаг боловч энэ нь зургийн агуулгаас хамаарч өөр өөр байж болно. PNG болон зарим WebP зургуудад ашигладаг алдагдалгүй шахалт нь файлын хэмжээг чанарын алдагдалгүйгээр багасгадаг. Энэ нь хамгийн тохиромжтой мэт санагдаж байгаа ч алдагдалгүй файлууд нь ихэвчлэн алдагдалтай файлуудаас хамаагүй том байдаг. Энэ нь цахим худалдаанд зориулсан бүтээгдэхүүний зураг эсвэл цаашид засварлах зураг гэх мэт чанар хамгийн чухал байдаг зургуудад алдагдалгүй шахалтыг хамгийн тохиромжтой болгодог. Шахалтын дэвшилтэт техникүүд нь дүрсийг чанарын дамжуулалтаар нэмэгдүүлдэг дэвшилтэт JPEG ачаалах, хүний ​​нүд бага мэдрэмтгий байдаг өнгөний мэдээллийг бууруулдаг chroma subsampling зэрэг орно. Орчин үеийн хэрэгслүүд нь хүний ​​нүд хамгийн их анзаарсан зүйлд тулгуурлан шахалтыг тохируулж, ойлголтын оновчлолыг санал болгодог бөгөөд ихэвчлэн уламжлалт чанарын тохиргооноос илүү сайн үр дүнд хүрдэг.

Нарийвчлал ба хариу үйлдэл үзүүлэх дүрсийг оновчтой болгох

Орчин үеийн вэб дизайн нь ухаалаг гар утаснаас эхлээд 4K дэлгэц хүртэл бүх зүйл дээр тод харагдах зургийг шаарддаг. Гол нь пикселийн нягтрал болон төхөөрөмжийн чадавхийг ойлгох явдал юм. 1200px өргөнтэй зураг нь ширээний компьютер дээр үзэхэд тохиромжтой байж болох ч 375px хэмжээтэй гар утасны дэлгэцийн хувьд энэ нь хэт ачаалалтай, зурвасын өргөнийг алдаж, ачаалах хугацааг удаашруулдаг. Олон тооны зургийн хэмжээ үүсгэх нь төхөөрөмж бүр тохирох хэмжээтэй зургийг хүлээн авах боломжийг олгодог. Хариулттай зургууд нь HTML-ийн srcset шинж чанар болон зургийн элементийг ашиглан дэлгэцийн хэмжээ, нягтралд тулгуурлан өөр өөр зургуудад үйлчилдэг. Энэ техник нь гар утасны хэрэглэгчдийн зургийн ачааллыг 50% ба түүнээс дээш хэмжээгээр бууруулах боломжтой. Жишээлбэл, та мобайл төхөөрөмжид 400 пиксел, таблетад 800 пиксел, ширээний дэлгэц дээр 1200 пикселийн хэмжээтэй зураг үзүүлж болно. Торлог бүрхэвч зэрэг өндөр нягтралтай дэлгэц нь тод харагдахын тулд 2 дахин нягтралтай зураг шаарддаг. Зургийн хэмжээ нь таны вэбсайт дээрх бодит дэлгэцийн хэмжээг харгалзан үзэх ёстой. 300px өргөнтэй зураг нь хэрэглэгчийн дэлгэцээс үл хамааран 1200px өргөн байх шаардлагагүй. Зургийг бодит дэлгэцийн хэмжээгээр нь үргэлж оновчтой болгож, том хэмжээтэй зураг үзүүлэхийн оронд жижиг масштабыг зохицуулахын тулд CSS ашиглах талаар бодож үзээрэй.

Гүйцэтгэлийн нөлөөлөл ба ачааллын стратеги

Зураг нь вэбсайтын гүйцэтгэлд ихээхэн нөлөөлдөг бөгөөд энэ нь ихэвчлэн нийт хуудасны жингийн 50-70% -ийг эзэлдэг. Том хэмжээтэй, оновчгүй зургууд нь удаан ачаалагддаг вэбсайтуудын гол буруутануудын нэг бөгөөд хэрэглэгчийн туршлага болон хайлтын системийн зэрэглэлд шууд нөлөөлдөг. Ачааллын нэмэлт секунд тутам үсрэх хурдыг 32% хүртэл нэмэгдүүлж, зургийн оновчлолыг бизнесийн чухал асуудал болгодог. Залхуу ачаалах нь зураг ачааллыг харах цонхонд орох хүртэл хойшлуулдаг хүчирхэг техник юм. Энэ нь ялангуяа зураг ихтэй хуудсуудын эхний хуудсыг ачаалах хугацааг эрс сайжруулдаг. Орчин үеийн хөтчүүд нь loading=”lazy” шинж чанар бүхий эхийн залхуу ачааллыг дэмждэг бол JavaScript сангууд нь илүү дэвшилтэт хяналт, илүү өргөн хөтчийг дэмждэг. Зургийг урьдчилан ачаалах стратеги нь хэрэглэгчийн туршлагыг сайжруулж чадна. Эвхсэн дээрх чухал зургуудыг хамгийн хурдан ачаалахын тулд оновчтой болгох хэрэгтэй, харин нугалаас доогуур байгаа зургуудыг залхуу ачаалж болно. Бүрэн нягтралтай зургийг ачаалах үед шууд харааны санал хүсэлтийг өгөхийн тулд чанар муутай дүрс байршуулагч (LQIP) эсвэл бүдэгрүүлэх эффектийг ашиглах талаар бодож үзээрэй. Прогрессив JPEG кодчилол нь зургийг бага чанартайгаар хурдан гаргаж, өгөгдөл ачаалагдах тусам хурцлах боломжийг олгодог.

SEO болон хүртээмжтэй холбоотой анхаарах зүйлс

Хайлтын системүүд хуудасны хурдыг эрэмбэлэх хүчин зүйл гэж үздэг бөгөөд энэ нь SEO амжилтанд хүрэхэд зургийн оновчлолыг чухал болгодог. Зөв оновчтой болгосон зургууд нь хуудсыг хурдан ачаалахад тусалдаг бөгөөд хайлтын зэрэглэл болон хэрэглэгчийн туршлагыг сайжруулахад хувь нэмэр оруулдаг. Нэмж дурдахад зургийн файлын нэр болон өөр текст нь хайлтын системд үнэ цэнэтэй контекстийг өгч, таны контентыг зургийн хайлтын үр дүнд харуулахад тусалдаг. Хүртээмжтэй байхын тулд дэлгэц уншигчид болон харааны бэрхшээлтэй хэрэглэгчдэд зориулсан зургийн агуулгыг тайлбарласан, сайтар бодож үзэх хэрэгтэй. Альтернатив текст нь дүрсэлсэн боловч товч бөгөөд тухайн зурагт юу байгааг болон контекстийн зорилгыг тайлбарласан байх ёстой. Мэдээллийн үнэ цэнийг нэмдэггүй гоёл чимэглэлийн зургуудын хувьд дэлгэц уншигчид үүнийг шаардлагагүйгээр зарлахаас сэргийлж хоосон alt шинж чанаруудыг (alt = “”) ашиглана уу. Бүтцийн өгөгдөл болон схемийн тэмдэглэгээ нь хайлтын системүүд таны зургийг хэрхэн ойлгож, харуулахыг сайжруулж чадна. Зургийн сайтын зураглал нь хайлтын системд таны зургийг илүү үр дүнтэй илрүүлж, индексжүүлэхэд тусалдаг. Файлын нэршлийн дүрэм нь холбогдох үед дүрсэлсэн, түлхүүр үгээр баялаг байх ёстой бөгөөд “red-running-shoes-front-view.jpg” гэх мэт дүрслэх нэрийн оронд “image1.jpg” гэх мэт ерөнхий нэрсээс зайлсхий.