Правільная аптымізацыя малюнкаў для сайта: што вы пра яе ведаеце?

1. Баланс памеру і якасці
2. 1. Змяняны памер
3. 2. сцісканага фатаграфіі
4. JPEG, PNG або GIF: як зрабіць правільны выбар?
5. Будзьце асцярожныя! Дэкаратыўныя элементы дызайну
6. Seo аптымізацыя малюнкаў для сайта
7. Першы крок. Запаўняем альт тэгі
8. Правілы запаўнення тэга альт
9. Трэці крок. Подпісы пад выявай
10. Дзе лепш размяшчаць карцінку?

Што робяць ўладальнікі сайтаў, каб прыцягнуць больш кліентаў і чытачоў на свае старонкі? Падбіраюць якасны кантэнт, прасоўваюць НЧ, СЧ і ВЧ запыты, закупляюць спасылкі. Безумоўна, вы пра гэта ведаеце і ўжываеце на практыцы. Але надаеце вы ўвагу аптымізацыі малюнкаў, фота, малюнкаў для сайта? Ці правільна вы звяртаецеся з графікай?

змест
Баланс памеру і якасці
1. Змяняны памер
2. Сціскае фатаграфіі
JPEG, PNG або GIF: як зрабіць правільны выбар?
Будзьце асцярожныя! Дэкаратыўныя элементы дызайну
Seo аптымізацыя малюнкаў для сайта
Першы крок. Запаўняем альт тэгі
Правілы запаўнення тэга альт
Другі крок. Title і ЧПУ
Трэці крок. Подпісы пад выявай
Дзе лепш размяшчаць карцінку?

Правільна падабраны графічны кантэнт служыць не толькі ўпрыгожваннем web-старонак, але і дадатковай крыніцай трафіку. Акрамя таго, прыгожыя, чапляцца ўвагу малюнкі дапамагаюць затрымаць увагу наведвальніка, а значыць, спрыяюць паляпшэнню паводніцкіх фактараў. Такім чынам, разбяромся, што ўяўляе сабой Сеа аптымізацыя малюнкаў для сайта.

Баланс памеру і якасці

Хуткасць загрузкі старонак ўносіць свой уклад у становішча рэсурсу ў пошукавай выдачы. Калі блог загружаецца вельмі марудна, вялікая верагоднасць страціць патэнцыйнага чытача. Значная доля карыстальнікаў адмаўляецца чакаць, людзі проста закрываюць браузерных ўкладку і сыходзяць на іншыя вэбсайты.

Адпаведна, для хуткай перадачы графікі па сетцы, неабходна дамагчыся змяншэння яе вагі. Ёсць два спосабу:

• памяншэнне памеру;
• сціск фатаграфіі з нязначнай стратай альбо зусім без страты якасці.

1. Змяняны памер

Шырыня асноўны калонкі большасці блогаў не перавышае 600-900 пікселяў. Таму, не мае сэнсу ўстаўляць малюнкі большага памеру. Часцей за ўсё ваш рухавічок здольны сам аўтаматычна памяншаць занадта вялікая графічнае поле да прымальнай шырыні. WordPress так і зробіць. Аднак лепш самому ўручную правесці маштабаванне. Гэта звязана з тым, што з сервера для карыстальнікаў будзе выгружацца арыгінал высокага дазволу, а ён важыць нямала.

У шэрагу выпадкаў варта адмовіцца ад выкарыстання буйных статычных малюнкаў. Так, для хуткага агляду вялікай колькасці малюнкаў варта выкарыстоўваць мініяцюры. З іх дапамогай кліенту ўдасца бегла праглядзець групу аналагічных тавараў і знайсці найбольш прыдатныя для сябе варыянты. А гэта вялікі плюс. Чым прасцей на вашым сайце шукаць патрэбныя тавары або інфармацыю, тым лепш.

Прыклад візуальнага прадстаўлення мініяцюр. Для паказу васьмі тавараў спатрэбіўся маленькі блок вышынёй усяго 300 пікселяў і шырынёй 650 пікселяў.

Гэты спосаб асабліва добры для ўладальнікаў інтэрнэт-крам з вялікім асартыментам. Мініяцюры хутка загружаюцца, займаюць мінімум месца на старонцы, а пры неабходнасці дазваляюць пакупніку разглядзець прадмет ва ўсіх падрабязнасцях.

2. сцісканага фатаграфіі

Малюнкі з аднолькавай шырынёй і вышынёй могуць істотна адрознівацца па аб'ёме. Адны важаць пару дзесяткаў кілабайт, іншыя - у сотні разоў больш. На дапамогу прыходзіць змена дазволу.

Для памяншэння памеру графічнага файла выкарыстоўвайце праграму Photoshop. Калі яго ў вас няма, не хвалюйцеся. Нядрэнным аналагам стане бясплатны Gimp. Таксама да вашых паслуг розныя онлайн сэрвісы . У кожнага з іх ёсць свае карысныя фішкі. У некаторых праграмах даступная пакетная (масавая) аптымізацыя малюнкаў. Струменевых апрацоўка прыкметна паскарае падрыхтоўку фота да загрузцы на web-сайт.

Колькі ў ідэале павінен важыць апрацаваны файл? Імкнецеся сціскаць графіку да 50-70 кілабайт. Вядома, гэта не заўсёды лёгка. Асабліва ў тых выпадках, калі хочацца размясціць буйныя маляўнічыя фота. На выніковы вынік ўплывае не толькі выбар праграмы для аптымізацыі малюнкаў, але і фармат, у якім будзе захаваны файл-малюнак. Спынімся на гэтым моманце падрабязней.

JPEG, PNG або GIF: як зрабіць правільны выбар?

Для параўнання адкрыем адно і тое ж малюнак у Photoshop і захаваем яго з паралельным сціскам ва ўсіх трох фарматах.

JPEG

Шырока распаўсюджаны фармат, які ўжываецца для графічных аб'ектаў. Файлы лёгка сціскаюцца да мінімальных памераў практычна без страты якасці.

PNG

Перавагай png-фармату з'яўляецца забеспячэнне выдатнага якасці малюнка пасля шматразовых захаванняў. Аднак звярніце ўвагу на памер. Ён істотна вышэй, чым у карцінкі ў jpg-фармаце.

GIF

Дазваляе атрымліваць файлы маленькай вагі. Але з-за прыкметных скажэнняў падыходзіць толькі для аб'ектаў малога фармату. Не ўжывайце дадзены фармат для буйных фота. Затое для мініяцюр, кнопак, элементаў меню ён выдатна сябе зарэкамендаваў.

Па суадносінах якасць / памер, на мой погляд, лідзіруе JPEG.

Будзьце асцярожныя! Дэкаратыўныя элементы дызайну

У пагоні за знешняй прывабнасцю блога некаторыя вэбмайстра забываюць пра ўмеранасці. Вядома, можна ўпрыгожыць раздзелы і рубрыкі разнастайнымі маляўнічымі шапкамі, дэкараваць падвал, ўставіць кідкія кнопкі. Але ўся гэтая мішура здольная істотна знізіць хуткасць загрузкі сайта, з прычыны чаго паўстане адток наведвальнікаў. Бо вы і самі не гатовыя чакаць хвіліну-другую фарміравання цікавіць старонкі.

Пры працы з дэкаратыўнымі элементамі:

• Правярайце іх памер. Неапраўдана цяжкія блокі без шкадавання прыбірайце;
• Ужывайце каскадныя табліцы стыляў ва ўсіх выпадках, калі можаце гэта зрабіць;
• Тэстуе свой рэсурс на хуткасць загрузкі.

Seo аптымізацыя малюнкаў для сайта

Навошта трэба аптымізаваць графічны кантэнт? Затым, каб прыцягнуць крыху больш наведвальнікаў. Глабальных зменаў чакаць не варта (калі, вядома, вы не прадаеце тавар, які людзі шукаюць, у тым ліку, і па фота). Але некаторы прырост трафіку адзначыць можна.

Першы крок. Запаўняем альт тэгі

Alt lags - гэта тэкставае ўяўленне карцінкі, якія будуць дэманстравацца карыстачу да таго часу, пакуль не падгрузіць само фота. Дадзены атрыбут таксама здольны прыносіць карысць пры Сеа-аптымізацыі вебресурса. Так, у якасці альт-тэгаў можна выкарыстоўваць прапагандуюцца ключавыя запыты. Важна, каб яны былі рэлевантныя падабраным файлу.

Правілы запаўнення тэга альт

• выкарыстоўвайце пошукавыя запыты;
• пішыце тэг лацінкай;
• ня перастарайцеся з даўжынёй. Да прыкладу, альт тэг «купіць кватэру ў падмаскоўе зніжкі растэрміноўка акцыі ўзнос матчыным капіталам продаж у іпатэку» не надта ўдалы. Паспрабуйце ўкласціся ў 55-60 знакаў;
• не варта спамілі. Аднаго ключа цалкам дастаткова;
• тэг павінен адпавядаць малюнку. Калі на фота намаляваная Скарлет Ёхансан, не пішыце ў Альт размытую фразу «модныя прычоскі 2017». Больш удалым апынецца прыцэльны варыянт «прычоска Скарлет Ёхансан на прэміі MTV»;
• для дэкаратыўных элементаў запаўняць тэгі ня трэба. Пошукавыя сістэмы расцэньваюць такі ход як переоптимизацию і зніжаюць пазіцыі рэсурсу ў выдачы.

Другі крок. Title і ЧПУ

Загаловак павінен адрознівацца ад тэга Alt, але таксама пісацца лацінкай. Title падае дадатковую інфармацыю пошукавікам аб размешчаным малюнку.

Па магчымасці прапісваецца человекопонятный урл. Да прыкладу, калі намаляваная маторная лодка, то і пішыце ў назве motornaya-lodka.jpeg альбо motorboat.jpeg. Такія url нясуць у сабе больш карыснай інфармацыі і для чалавека, і для пошукавіка. Бо, напрыклад, 14789.png цалкам не інфарматыўны і не спрыяе паскарэнню пошуку.

Трэці крок. Подпісы пад выявай

Прымяняюцца для прадастаўлення дадатковых звестак карыстальніку. Найбольшы эфект аказваюць на старонках з вялікім аб'ёмам графікі і малым адсоткам тэкставай інфармацыі, напрыклад, у каталогах інтэрнэт крамы.

Подпіс таксама можа ўтрымліваць які прасоўваецца ключ.

Дзе лепш размяшчаць карцінку?

Здавалася б такое простае пытанне, але і ён мае значэнне. Артыкул з пісьменна падабранымі якаснымі малюнкамі пошукавыя робаты Google і Яндэкс ацэняць вышэй аналагічнага па якасці тэкставага кантэнту без фота. Графічныя ўстаўкі могуць растлумачваць увесь матэрыял або асобныя яго часткі. Адпаведна, аптымальным варыянтам з'яўляецца размяшчэнне фатаграфій у непасрэднай блізкасці ад тэксту, да якога яны адносяцца.

Пашукавікі становяцца разумней з кожным днём. Яны ўжо могуць вылучаць асобныя аб'екты на малюнку. Але для лепшага аналізу малюнка патрабуецца тэкставы кантэкст. Таму рэлевантнае спалучэнне графікі і тэкставага блока сустракае станоўчы водгук у пошукавых ботаў. Дадатковым плюсам стане блізкае размяшчэнне да малюнка загалоўкаў h2-h5.

падвядзем вынікі

Адной аптымізацыі малюнкаў не дастаткова для кардынальнага змены становішча вебресурса ў пошукавай выдачы. Аднак ужыванне вышэйапісаных прыёмаў дазволіць вам, зусім нязначна, але павялічыць паток наведвальнікаў і палепшыць паводніцкія фактары. А гэта, у сваю чаргу, зробіць сайт больш якасным і паспяховым.

Жадаю вам больш удалых публікацый і якасных малюнкаў.

Іншыя цікавыя артыкулы: