Оптимизација на сликата за подобрување на брзината на веб-страницата и промовирање на веб-страница - експерт за Семалт

Сликите се една од најважните компоненти на мрежата, секако следете го текстот. Веб-страница без слики обично ќе биде здодевна и помалку мотивирачка за сурферите, отколку веб-страницата што има слики.

Исто така, има доста области каде што употребата на слики е задолжителна, па дури и неопходна за да се оправда страницата.

На пример:

Интернет-страници за трговија
Портфолио страници и приказ на дела
Страници за слики каде што фотографиите се „производ“ - на пример, венчаници, фотографија на настани итн.
Социјални мрежи - Сè повеќе студии укажуваат на фактот дека објавите со фотографии добиваат многу повеќе коментари и споделувања, за значителен процент во споредба со објавите и статусите без фотографии

Промоција на слики на Google: правилно користење слики

Дали сте инвестирале и купиле фотографии од страници за фотографии/складишта за слики или дури и сами сте ги зголемиле и фотографирале? Исто така, треба да ги зголемите за цели на оптимизација!

Промоцијата на слики на Google е една од најдобри начини за зголемување на сообраќајот на веб-страници во одредени области - особено оние што се фокусираат на визуелната страна.

И покрај горенаведеното, неправилното користење на слики може да направи повеќе штета отколку да good помогне на страницата, па дури и значително да ги наруши напорите за промоција. Кога зборуваме за употреба на слики во контекст на органска промоција, важно е да се имаат предвид неколку правила исто така, неправилното користење на слики може значително да ја наруши брзината на страницата и затоа може да има значително влијание врз промоцијата.

Основни правила за оптимизација на слика:

1. Тежина и димензии на сликата

Еден од важните параметри за промовирање на слики преку Интернет - е тежината на сликата.

Од една страна, ние би сакале да користиме висококвалитетни слики, но од друга страна, тие нема да бидат на штета на брзината на страницата, корисничкото искуство и промоцијата. Препораката е секогаш да се „оптимизираат“ (од зборот оптимизација) сликите до максимално можно, без значително намалување на квалитетот. За да го направите ова, следете ги сите следниве правила:

Користење формат погоден за различни ситуации (jpg, png, gif и повеќе) - целосни детали за различните видови формати подолу.
Важно - Поставување на димензиите на секоја слика на страницата - Избегнувајте прикажување на слика помала од реалната (физичка) големина на сликата што е можно повеќе, за да не се трошат непотребни ресурси. Колку е поголема и подвижна веб-страницата, толку е поголемо значењето.
Обезбедување одговорно совпаѓање - Ако работите со WordPress и модерен образец, големи се шансите дека сте го затвориле овој агол. Но, ако не, важно е секогаш да бидете сигурни дека сликите на страницата, особено сликите што се наоѓаат во објавите, одговараат и се добро прикажани на мобилни уреди, таблети итн.
Максимална компресија на тежината на сликата без значително нарушување на квалитетот (проширување на алатките и методите за да се направи тоа - подолу).

Препорачана тежина за фотографии

Скоро секоја слика може да се компресира на еден или друг степен, затоа секогаш е препорачливо да се користат само димензиите што се навистина потребни и што се физички прикажани на страницата и да се намали тежината на сликите што е можно повеќе. Ова важи за која било страница. Но, особено за страниците со многу слики. Не постои едно правило што е точно во сите случаи, но препорачливо е да бидете сигурни дека тежината на сликата не надминува 70-80K освен ако не е галериска/лизгачка слика од особено значење.

2. Изберете соодветно име за сликата

При пребарување слики во Google, земени се предвид неколку параметри за прикажување на сликата релевантна за барањето. Едно од нив е името на датотеката. Препорачливо е да потрошите уште една секунда и да и дадете на сликата име што го опишува она што го гледате на сликата. Важно е да се задржи името на датотеката на англиски јазик и да се користат средни линии, а не празни места. Причината е што Google подобро се справува со средните цртички.

Примери за лошо име за слика:

DSC2387.jpg

Страница промотор.png

Пример за добро име за слика:

Пребарувач-оптимизатор.jpg

За оние што се прашувате - да, Google знае како да се справи со имињата на англиски слики и за други јазици. Бидејќи знае како да ги преведува низите за пребарување и да ги истакнува преведените зборови во резултатите од пребарувањето.

3. ALT за слика

Alt-ознаката, што е кратенка од алтернатива, е параметар кој има за цел да ја опише сликата. Ознаката alt е дефинирана во рамките на системот за управување/HTML кодот за секоја слика поединечно, а неговата оригинална функција е да им служи на слепите лица и на лицата со попреченост кои користат специјален софтвер кој ги скенира овие ознаки и го чита напишаното.

Технички во кодот, изгледа вака:

<imgsrc="tree.jpg" alt="дрво">

Надвор од важноста на ознаката во однос на пристапноста до веб-страницата, таа исто така има важност и за пребарувачите. Ознаката alt им помага на пребарувачите да разберат кој е предметот на сликата (заедно со други работи како што е името на датотеката, контекстот на страницата на која се наоѓа, итн.) И, исто така, природно влијае на пребарувањето на слики на Google.

Исто така, ознаката alt е дел од оптимизацијата на страницата за сè. Исто така, кога има надворешна врска што излегува од сликата, ознаката alt служи како еден вид сидро на текст („сидро текст“) за сликата.

Како да проверам дали некоја слика има ознака ALT?

Постојат неколку пати:

Целиот пат - кликнете на сликата со глувчето -> кликнете со десното копче на глувчето -> проверете некој елемент (текстот варира во различни прелистувачи).
Ние би сакале да ја бараме ознаката во рамките на командата <img> како што беше илустрирано претходно.
Користете додаток наречен Web Developer (одличен за многу други задачи). Екстензијата ни овозможува, со кликнување на копче, да ги прикажеме сите алт-ознаки што ги имаат сликите на одредена страница.

Вреска жаба - Користете жаба погодна кога сакаме да извршиме темелно скенирање на слики на страницата.

Процесот е да внесете URL за скенирање и потоа да кликнете на табулаторот Слики.

Таму ќе ја видиме листата на слики на страницата, која може да се сортира по неколку параметри:

Слики со тежина поголема од 100 кг
Слики без ознаки ALT
Слики со ознаки ALT кои содржат повеќе од 100 карактери (и веројатно треба малку да ги скратите)

Секако има повеќе начини и повеќе додатоци од разни видови, но ми се чини дека овде ја опфатив темата во смисла на потреба од точка, по страница и детален преглед на страницата.

Промоција на слика на Google - совети за оптимизирање на ALT-ознаките

Не треба да принудувате клучни зборови, туку обидете се да опишете што гледате на сликата.

Ако е можно да се комбинираат опис на сликата + релевантни клучни зборови за да се истакнат природно - што добро.
Нема потреба да го преувеличувате описот, ознаката alt со 2-5 зборови е повеќе од доволно.
Се препорачува ознаката alt и ознаката на насловот за сликата да не се идентични.
За страници за трговија - ако производот има број на модел, се препорачува да го користите во ознаката alt (да се појавува во пребарувањата на слики на Google).

Нема потреба да користите алт за позадини/декоративни слики - дури и препорачливо е да не го сторите тоа за да не се сомнева Google дека се обидувате да преоптимизирате.

4. Ознака за наслов за слика

Насловите на сликите или „Насловите“ се еден вид совет за алатки што може да се види со поместување на глувчето над сликата. Многу луѓе ги мешаат со ознаките ALT.

Насловите на сликите се уште еден показател за релевантноста и предметот на сликата што може да му помогне на Google да разбере за што зборува сликата и да ги подобри рангирањата за пребарување слики. За разлика од ознаката ALT, ознаката за наслов обично ќе биде повеќе описна и малку подолга, а неговата цел е да му го опише на сурферот она што се гледа на сликата и/или што ќе дојде откако ќе кликне на сликата. Веб-страниците често ја користат оваа ознака.

Вака изгледа во кодот:

5. Типови на слики и наставки на датотеки

Постојат неколку вообичаени формати за употреба на слики на Интернет. Накратко ќе го проширам секој од нив:

JPEG/JPG - Најстариот и веројатно најчестиот формат за слики на интернет. Предноста на форматот JPG е можноста за прикажување на слики со релативно висок квалитет и мала тежина. Сликите со JPG не поддржуваат непроityирност.
GIF - Форматот GIF исто така е со нас веќе подолго време, почнувајќи од деновите кога сè уште имаше флопи дискови. Gif-ите поддржуваат само 256 бои, така што тие се со помалку квалитетен формат на слика и првенствено се наменети за употреба како икони или украси од разни видови. Исто така, форматот GIP поддржува анимација, па дури и Facebook неодамна започна да го поддржува овој формат во доводот.

Крајна линија - гифовите не се наменети за прикажување слики, особено кога станува збор за квалитетот на сликата, туку за поедноставни икони, анимации и елементи.

PNG - Ова е (релативно) новиот формат во пакетот. Главните предности на PNG-датотеките - повисок квалитет во споредба со JPG и GIF и поддршка за транспарентност. PNG-датотеките се поделени во 2 формати - PNG24 што е поквалитетен (и тежината на сликата соодветно) и PNG8 што е најекономично од сите нив.

Постојат многу други формати на слики на располагање, но тие се помалку релевантни за употреба на веб-страниците.

Совет - За оние кои користат Фотошоп, секогаш препорачувам да споредувате тежини на слики користејќи Зачувај за веб и уреди помеѓу различните формати (има преглед на тежината на сликата пред да ја зачувате датотеката).

Правила за избор на формати на слики

Во повеќето случаи, форматот JPG ќе ја заврши работата. Сликите со JPG овозможуваат висок квалитет и мала тежина на датотеката.
Не користете GIF-и во големи датотеки што содржат многу детали - тежината на датотеката ќе биде голема. Форматот не е дизајниран за ова и е посоодветен за употреба со мали и едноставни елементи.
Ако транспарентноста игра важна улога - користете го PNG форматот. Секогаш се препорачува да се споредат PNG24 и PNG8 за да се намали тежината на сликите на минимум што е можно.

6. Правилна употреба на сликички

Малите слики (прегледи) се важна, па дури и критична компонента на некои страници - особено страници базирани на галерии и трговски страници. Сликички („Минијатури“ од Google Translateâ € can) може да бидат одлични од една страна, но значително да ги саботираат страницата и корисничкото искуство од друга страна.

Најкритичното нешто во користењето на овие слики е да се одржат разумен квалитет и тежина што е можно пониско. Во големите трговски страници кои се потпираат на сликички за да прикажат страници во категории и прегледи на производи, овој факт е особено важен. Дали знаевте дека секоја секунда задоцнување со вчитување на страницата го чини Амазон 1,6 милијарди долари годишно? Голем дел од времето на вчитување на ваквите страници се сликите.

Точно, повеќето од нас можат само да сонуваат да имаат место со ваква големина. Но, знаете - големите промени започнуваат од дното нагоре и малите. Колку побрзо се обратиме, толку подобро.

Совети за правилно користење на сликички

Препорачливо е да креирате сликичка за сликичката и поголема слика за самата страница на производот. Не користете ја големата слика како сликичка! Ова ќе вчита неколку пати поголемо оптеретување на страницата, особено кога има многу сликички на една страница. Во различни CMS системи, вие автоматски се ослободувате од ова прашање.

Кога станува збор за правилата за оптимизација на сликата, препорачливо е да инвестирате повеќе во големи слики отколку во сликички. На пример - не вклучувајте ги сликичките во Мапа на слики (продолжение подолу), во некои случаи дури и не поставувајте ALT-ознаки за нив. Амбиција е Google да ги индексира големите слики на сметка на сликичките, а не обратно.

Препорачливо е да го поставите Насловот на сликата во Минијатури, кои го опишуваат производот со неколку зборови и воопшто што сурферот ќе види откако ќе кликне на сликата.

Ако секоја страница за категории производи има многу производи (да речеме над 30), препорачливо е да користите скрипта Lazy Load што ги вчитува сликите само кога сурферот се движи до областа каде што се.

7. Употреба на текст за завиткување

Обично, сликите доаѓаат за да му служат на текстот, а не обратно. Но, што се однесува до оптимизацијата на сликата и промоцијата на сликата на Google, и ако страницата е мрежа заснована на слики, многу е вредно да не се занемари прашањето за текстовите, дури и ако се работи за основни работи.

За оние кои сакаат да одржат чист и минималистички изглед што е можно (на пример, на веб-страница на портфолио на фотограф), се препорачува барем да го дефинира следново на секоја страница што има слика:

H1 Според предметот на сликата
Краток опис (дури 10-20 зборови е подобар од ништо) на сликата, по можност со релевантен клучен збор или два
Насловот и описот се релевантни секако (во случај да се работи за физичка страница, а не за слика што се појавува од галерија).
Alt и наслови на фотографии - Силно се препорачува во овој случај.

8. Мапа на страницата за фотографии

Мапа на страницата за слики (image-sitemap.xml) му помага на Google подобро да ги чита и индексира нашите слики на страницата. Слично на стандардната мапа на сајтот XML, мапа на страницата со слики може да се достави со помош на Конзолата за пребарување, во областа на мапите на сајтот.

Додадете мапа на страницата во Конзолата за пребарување

Мапа на страници со слики е особено корисна кога користите сите видови галерии со скрипти и разни ефекти - што Гугл тешко ги скенира конвенционално.

Постојат некои параметри за користење мапа на слики.

Како да креирате мапа на страницата?

WordPress - Како и обично, ако работите на WordPress, животот ви е лесен. Додатокот Udinra All Image Sitemap map го затвора аголот за вас. Сè што треба да направите е да го инсталирате додатокот, да обележите малку V во поставките, да ја креирате мапа на страницата и да ја стартувате на Google преку Конзолата за пребарување.

На која било друга платформа - зависи. Ако нема решение надвор од кутија како приклучок итн., Ова може да се направи со помош на вреска жаба.

Theабата може да ви помогне лесно да создадете мапа на страницата со слики. Единствениот проблем - нема да се ажурира автоматски (за разлика од додаток) и мора да се освежува од време на време.

Како го правиш тоа?

Мора да се изврши целосно скенирање на бараната страница, а потоа во горното мени на софтверот одете до Мапи на страниците -> Креирај слики Мапа на страницата. Она што ќе го добиете е кошер XML-датотека што треба да ја користите и да ја активирате преку Конзолата за пребарување.

9. Поттикнете споделување фотографии

Ако се пофалите со многу употреба на оригинални слики (без разлика дали се работи за физичка слика или графички елемент) и сликите се главната работа или барем суштински дел од страницата, многу е вредно да ги охрабрите корисниците да ги споделуваат сликите на социјалните мрежи и им го олеснуваат тоа.

Како и обично, имам практични совети за платформата WordPress, во други системи препорачувам да користите програмер или проверете дали има посветен додаток за тоа.

WordPress има 2 убави приклучоци за оваа намена:

Лебди за социјална слика за WordPress - платен приклучок (ем; лак за нокти - 17 долари).
Pinterest Pin it Button - приклучок што додава мала Pinterest икона на фотографиите на страницата.

10. Алатки за намалување и оптимизација на слики

TinyPNG - одлична услуга што ви овозможува да компресирате слики на Интернет со особено удобен интерфејс за влечење. Тие исто така имаат API што ви овозможува да работите во поголеми количини и автоматски, а исто така одличен приклучок за WordPress што ви овозможува да ги компресирате сите слики на страницата - бара употреба на нивниот API (бесплатно за 500 слики месечно).

Фотосајзер - убав десктоп софтвер кој ви овозможува да уредувате слики во големи количини - не само компресија, туку и намалување на димензиите, додавање водени жигови и разни ефекти на сликите и многу други убави одлики.

Заклучок

Само што ја разбравте важноста за оптимизирање на сликите на веб-страница. Меѓутоа, ако сакате да ја знаете моменталната состојба на вашата страница, можете да го направите тоа бесплатно, благодарение на Семалт Советувања за оптимизација.

Семалт ќе ви помогне да ги идентификувате проблемите со оптимизација поврзани со вашата страница. Покрај тоа, со експерти за Семалт можете лесно подобрување на перформансите на вашиот бизнис преку Интернет по пониска цена.

send email