Та зурагт дургүй гэж үү?

Тэдгээр нь текстийг уншиж байх үед таны сонирхлыг татахуйц туршлага болгон хувиргаж чадна. Зургууд нь блог нийтлэлийг сайжруулж, илүү хуваалцах боломжтой болгож, таны сайтын өнгө аяс, брэндийг бүхэлд нь тохируулдаг.

Та юу мэдэх вэ? Бид зурганд хариу үйлдэл үзүүлэхэд бэлэн байна. Тийм ч учраас зураглалыг контентдоо оруулах нь блогоо маркетинг хийхэд ашиглах хүчирхэг хэрэгсэл юм.

Гэхдээ хэрэв та болгоомжтой байхгүй бол зураг нь таны вэб хуудасны нийт хэмжээний талаас илүү (эсвэл түүнээс дээш) хувийг эзэлж болно. Хэдхэн жилийн өмнө вэб хуудасны дундаж хэмжээ 600-700К байсан. Одоо дундаж нь 2МБ бөгөөд жил бүр нэмэгдэж байна.

Энэ бол асар их!

Үүний гол шалтгаан нь вэб хуудсууд дээр олон зураг илүү олон удаа ашиглагдаж байгаатай холбоотой. 'зөв хэмжээтэй, оновчтой биш. Энэ нь тэдгээр нь хадгалагдаагүй эсвэл вэбэд ээлтэй байдлаар хөрвүүлэгдэхгүй, оронд нь таны хуудсуудыг гөлрүүлж байна гэсэн үг.

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

Гэхдээ хуудасны ачаалал ихтэй байгаа нь таны хуудсыг ачаалах хурдад нөлөөлнө гэсэн үг. Хэрэв та өндөр хурдны холболттой бол энэ нь тийм ч том асуудал биш гэж бодож магадгүй ч таны зочлогчдын ихэнх нь тийм биш юм. Мөн Google хуудас удаан ачаалах дургүй бөгөөд энэ нь таны SEO-д сөргөөр нөлөөлж болзошгүй.

Та яагаад зургийг оновчтой болгох хэрэгтэй байна

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

Судалгаанаас үзэхэд 40% хүртэл Хэрэв сайтыг ачаалахад гурван секундээс илүү хугацаа шаардагдах бол зочдод буцах товчийг дарна.

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

Таны ихэнх зочдод гар утасны холболт удаашралтай байгаа тул та хуудасныхаа хэмжээг багасгах хэрэгтэй. Хуудасны хэмжээ томрох хамгийн том гэмт хэрэг нь таны зургууд юм.

Шаардлагагүй том зургууд нь таны байршуулах дансанд зай эзэлнэ. Та нарын зарим нь "хязгааргүй" хадгалах зайтай хостингтой байж болох ч олон дээд зэрэглэлийн хостинг үйлчилгээ үзүүлэгчид доод түвшний төлөвлөгөөнд 10 ГБ багтаамжтай байхаар хязгаарладаг. Ялангуяа та нэг бүртгэл дээр зураг ихтэй олон сайтуудыг байршуулж байгаа бол энэ нь хурдан дүүрнэ.

Тиймээс, таны зургууд таны сайтыг удаашруулж байгааг яаж мэдэх вэ? Google PageSpeed ​​Insights ашиглан сайтынхаа хурдыг шалгаарай.

Хэрэв Google оновчгүй зургуудыг асуудал гэж мэдээлсэн бол үүнийг засахын тулд та дараах зүйлсийг мэдэх хэрэгтэй.

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

Таны блог дээрх зургуудыг оновчтой болгохын тулд танд хэд хэдэн өөр зүйл хэрэгтэйМэддэг: файлын төрөл, зургийн хэмжээ, хэмжээ, таны зурагт хэрхэн үйлчлэх, зургийн шахалт.

Эдгээр хэсэг тус бүрийг нарийвчлан авч үзье.

Файлын төрөл

Вэб дээрх зургуудыг ихэвчлэн PNG эсвэл JPEG файлын форматаар буюу хөдөлгөөнт дүрст GIF хэлбэрээр хадгалдаг. Вэб дээр хөвж буй эдгээр хөгжилтэй хөдөлгөөнт GIF-д хэн дургүй байх вэ!

Одоо техникийн хувьд зүгээр , хэрэв та зургаа аль ч хэлбэрээр хадгалвал таны зочлогчийн хөтөч таны вэб хуудсыг харуулахад ямар ч асуудал гарахгүй. – гэхдээ хамгийн сайн чанар, оновчтой болгохын тулд дараах дүрмийг баримтална уу:

• JPEG – хүмүүс, газар эсвэл зүйлсийг харуулсан гэрэл зураг, дизайнд ашиглах
• PNG – графикт хамгийн тохиромжтой , лого, текст ихтэй дизайн, дэлгэцийн агшин, мөн танд тунгалаг дэвсгэртэй зураг хэрэгтэй үед
• GIF – хэрэв танд хөдөлгөөнт дүрс хэрэгтэй бол PNG-г ашиглаарай

Тиймээс яагаад өөр өөр формат байдаг вэ? ?

За, PNG-г лого, графикийг хадгалахад ашигладаг, учир нь энэ нь зургийн анхны чанарыг хадгалдаг - хэн ч бүдгэрсэн текст болон пиксел дүрсийг хүсдэггүй. Гэхдээ хэрэв та зургийг PNG хэлбэрээр хадгалахыг оролдвол гайхалтай харагдах боловч файлын хэмжээ нь гайхалтай биш байх болно.

Зургийг хадгалахад JPEG-г ашигладаг уламжлалтай. Файлын хэмжээг эрс багасгахын тулд зургийн зарим өгөгдлийг хаядаг боловч зураг нь олон төрлийн өнгө, байгалийн өөрчлөлтийг агуулсан байдаг тул чанар нь алдагдах болно.Ихэвчлэн хүний ​​нүдэнд үл анзаарагддаг.

Бид дараа нь шахалтын талаар илүү дэлгэрэнгүй ярих болно, гэхдээ одоохондоо хэрэв та зөвхөн хоёр зүйлийг санаж байгаа бол: гэрэл зургийн хувьд JPEG, текст/графикийн хувьд PNG гэдгийг санаарай.

Зургийн хэмжээсүүд

Та вэб хуудсыг ачаалж үзээд жижигхэн зураг (жишээ нь, толгойн зураг) татаж авахад f-o-r-e-v-e-r хэрэгтэйг анзаарч байсан уу? Маш удаан, мөр бүр орж ирж байгааг харж байна уу? Ийм жижиг зургийг яаж татаж авахад ийм удаан хугацаа зарцуулдаг юм бэ?

Тэгээд том толгойн зурагт ийм зүйл тохиолдоход энэ нь хуудасны ачааллыг бүхэлд нь саатуулж чадах учраас бүр ч муу болно.

Үүний шалтгаан нь блог хөтлөгч өөрийн зургийн хэмжээг зөв өөрчилж, оновчтой болгоогүйгээс болж байгаа бөгөөд бидний жишээн дээр DSLR камераас бүрэн нягтралтай JPEG файлыг шууд байршуулсан байж болзошгүй юм.

Мөн энэ бол асар том файл юм!

Та харж байна уу, вэб хөтөч нь зургийг анхны хэмжээнээсээ (ихэвчлэн) вэб хуудсан дээрх байрандаа сайн тааруулахын тулд томруулдаг. Дэлгэцэн дээрх жижиг зураг нь хөтчөөр бодит цаг хугацаанд багасгасан 10 мегапикселийн асар том зураг байж болно.

Одоо зарим вэб нийтлэх платформууд автоматаар таны бүрэн нягтралтай зургийн олон хувилбарыг өөр өөр хэлбэрээр үүсгэх болно. хэмжээтэй байх боловч хэрэв үгүй ​​бол та Photoshop, Lightroom, Pixlr, тэр ч байтугай MS Paint гэх мэт зураг засварлагч дээр зургийнхаа хэмжээг өөрчлөх хэрэгтэй. Энэ нь ялгааг илэрхийлж болно50К файл болон 5МБ файлын хооронд.

Жишээ нь, WordPress нь таны байршуулсан зургийн гурван (эсвэл таны загвараас хамааран түүнээс дээш) хуулбарыг автоматаар үүсгэх болно - бүгд өөр өөр хэмжээтэй - эдгээрийг та ашиглаж болно. Бүтэн хэмжээтэй зургийг байнга ашиглахын оронд блог нийтлэлд оруулах боломжтой.

Хэрэв та асар их хэмжээний зураг байршуулах зуршилтай бол өөрийн байршуулах бүртгэлдээ зай хэмнэхийг хүсвэл WordPress залгаас Imsanity таны нуруун дээр байна.

Энэ нь анхны зургийн хэмжээг өөрчилж, илүү удирдах боломжтой зүйл болгон сольдог тул та бүрэн хэмжээний зургийг нийтлэлдээ оруулсан ч тийм ч муу биш байх болно.

Идэвхжүүлсний дараа Imsanity нь таны одоо байгаа зургуудыг хайж, хэмжээг нь өөрчлөх боломжтой.

Таны зургуудаар үйлчлэх

Та зочдод зургаа хэрхэн үзүүлэх вэ гэдэг нь тэдгээрийг бие даан оновчтой болгох тухай биш юм. , гэхдээ энэ нь таны хуудсыг ачаалах хугацаанд эрс нөлөөлнө.

Ихэнх блогчид өөрсдийн байршуулсан бүртгэлээсээ шууд зургаа нийтэлдэг бөгөөд энэ нь ихэвчлэн зүгээр байдаг, гэхдээ хэрэв та үнэхээр гүйцэтгэлийн бүх хэсгийг шахаж авахыг хүсэж байгаа бол Таны сайт, дараа нь Агуулга Хүргэлтийн Сүлжээ (CDN) дээр зургуудаа байршуулах нь ихээхэн өөрчлөлтийг авчирна.

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

Энэ нь жишээ нь Европоос ирсэн зочдод АНУ-аас эсвэл өөр газраас биш Европын орон нутгийн серверээс зураг авах болно гэсэн үг юм. Хариу өгөх хугацаа болон сүлжээний хоцрогдол багассан тул зураг илүү хурдан татаж, хуудас ачаалах хугацааг багасгадаг.

Блог хөтлөгч нь Sucuri-г ашигладаг (энэ нь аюулгүй байдлын Галт хана, CDN-г агуулдаг) боловч бусад чанартай үйлчилгээ үзүүлэгчид байдаг. Amazon-ийн Cloudfront эсвэл KeyCDN гэх мэт. CDN биш алдартай CloudFlare ч гэсэн CDN-г үнэ төлбөргүй санал болгодог бөгөөд ихэнх хуваалцсан хостинг багцуудад тохируулахад хялбар байдаг.

Зургийн шахалт

Өөрийн мэдээллийг оновчтой болгох үед Зургийн хувьд таны файлын хэмжээг алдагдлын дэвшилтэт шахалтаас өөр юу ч багасгадаггүй.

Visme эсвэл Photoshop зэрэг ихэнх зураг засварлах хэрэгсэл нь файлын хэмжээг хамгийн сайн багасгадаг тул алдагдалтай JPEG шахалтыг ашиглан файлуудыг хадгалдаг. Тиймээс зургийн чанар бага зэрэг буурсан хэдий ч алдагдалтай зургийн шахалт нь асар том зургийг вэбд ээлтэй хэмжээтэй болгож багасгадаг.

Photoshop ашигладаг олон хүн түүний Вэбд хадгалах функцийг үзэж магадгүй гэдэгт би итгэлтэй байна. зургийн оновчлолын эцсийн ба бүхний хувьд. PicMonkey эсвэл Visme гэх мэт онлайн зураг засварлах хэрэгслүүд хүртэл таны зургийг оновчтой болгодог.

Гэхдээ Photoshop эсвэл бусад засварлах хэрэглүүрээс таны "оновчтой" зургийг авч, түүнийг хагалж, шахах боломжтой хэрэгслүүд байдгийг та мэдэх үү? өөр 40% (эсвэл түүнээс дээш),мөн одоо ч гэсэн хүний ​​нүдтэй бараг адилхан харагдаж байна уу?

Энд зурагнуудаа вэбд ээлтэй статустай болгоход туслах үнэ төлбөргүй, төлбөртэй хэрэгслүүд байна.

Ширээний хэрэгслүүд

ImageAlpha / ImageOptim

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

Мэргэжлийн зөвлөгөө : Техникийн мэдлэгтэй хүмүүст ImageOptim- байдаг. CLI, эндээс та бүхэл бүтэн зургийн хавтасыг нэг дор оновчтой болгох боломжтой.

ImageAlpha нь алдагдалтай PNG компрессор бөгөөд PNG файлуудыг жижигрүүлэх гайхамшгийг бүтээж чаддаг бол ImageOptim нь алдагдалгүй (алдагдлын сонголттой) дэвшилтэт шахалтыг гүйцэтгэдэг. PNG, JPEG болон GIF файлуудаас шаардлагагүй мета өгөгдлийг арилгадаг.

Миний PNG зургийн хувьд би эхлээд ImageAlpha-аар ажиллуулж байна:

Энд энэ нь миний дэлгэцийн агшингийн зургийг 103К-аас 28К болгон багасгасан.

Дараа нь би үүнийг ImageOptim-ээр ажиллуулж, нэмэлт 10% хэмнэсэн.

JPEGmini

Би JPEG файлуудын хувьд тэдгээрийг ширээний JPEGmini програмаар оновчтой болгодог. Mac болон Windows аль алинд нь зориулагдсан.

Lite хувилбар нь өдөрт 20 хүртэлх зургийг үнэгүй оновчтой болгох боломжийг олгодог бөгөөд хязгаарлалтыг арилгахад $19.99 үнэтэй болно.

Professional зөвлөгөө. : Plugin ашиглан JPEGmini Photoshop эсвэл Lightroom-д нэгтгэх хүсэлтэй ахисан түвшний хэрэглэгчид Pro хувилбарыг худалдаж авах боломжтой.$99.99.

Онлайн / Cloud / SaaS хэрэгслүүд

TinyPNG

Хэрэв та өндөр чанартай онлайн зураг шахах хэрэгсэл хайж байгаа бол TinyPNG (энэ нь JPEG форматыг оновчтой болгодог) файлууд нь нэрнээс үл хамааран) нь вэб програм бөгөөд танд 20 хүртэл 5МБ буюу түүнээс бага хэмжээтэй зургийг хөтчдөө чирж, бүгдийг нь нэг дор оновчтой болгох боломжтой.

Тэд мөн хөгжүүлэгчийн API-тай бөгөөд WordPress-ийг хийдэг. Таны зургийг байршуулах үед автоматаар оновчтой болгох нэмэлт өргөтгөл байдаг.

TinyPNG нь танд сард 500 үнэгүй зургийн оновчлол өгөх ба үүний дараагаар хэмжээнээс хамааран нэг зураг бүр $0.002–0.009-ын үнэтэй болно.

Одоо 500 байна. Сар бүр зураг их сонсогдож магадгүй ч WordPress нь зураг бүрийн 3-5 хувилбарыг өөр өөр хэмжээтэй бүтээдэг гэдгийг бодоход 500 зураг нь үр бүтээлтэй блог хөтлөгчийн хувьд тийм ч биш юм шиг санагддаг. Аз болоход нэг зургийн зардал нь төсөвт ээлтэй.

EWWW Image Optimizer

Хэрэв та мөнгө үрэхэд бэлэн биш бөгөөд оновчтой болгоход санаа зовохыг хүсэхгүй байгаа бол Таны зургуудыг гараар хийвэл WordPress-д зориулсан үнэгүй EWWW Image Optimizer залгаас нь таны байршуулсан зургуудыг автоматаар оновчтой болгох боломжтой.

Та алдагдалтай шахалт хийдэг дээд зэрэглэлийн захиалгыг сонгож болох боловч үнэгүй хувилбар нь зөвхөн алдагдалгүй шахалт хийдэг тул хэмнэлттэй байна' t бараг мэдэгдэхүйц байна. Энэ нь таны цагийг хэмнэх бөгөөд юу ч биш байснаас дээр.

Тэмдэглэл: Бүрэн тоймыг үзнэ үү.Манай зураг шахах хэрэгслүүдийн тухай нийтлэл.

Үүнийг дуусгах нь

Зарим хүмүүс вэб хуудасны дундаж хэмжээ 2017 он гэхэд 3MB-т ойртоно гэж таамаглаж байгаа тул одоо зургуудаа оновчтой болгож эхлэх цаг болжээ.

Таны бүх зочдод өндөр хурдны холболт байхгүй бөгөөд хуудас дүүрэх, хуудас ачаалах хугацаа удаашрах зэрэг нь таны Google дэх зэрэглэлд нөлөөлж болзошгүйг санаарай. Ачааллыг хөнгөвчлөхөд туслахын тулд өнөөдөр зургаа оновчтой болгож заншаарай.

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

Дараа нь JPEGmini гэх мэт ширээний програмууд эсвэл TinyPNG эсвэл Kraken зэрэг үүлэн хэрэгслээр орчин үеийн дүрс шахалтын давуу талыг ашиглан тэдгээрийг WordPress-д боломжтой бол залгаастай нэгтгэнэ үү.

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