Паспрабую зрабіць кароткую інструкцыю па правільным выкарыстанні малюнкаў на сайце.

Гаворка пойдзе не пра элементы дызайну, а пра малюнкі ў выглядзе кантэнту (фота, галерэі, скрыншоты, інструкцыі, сканы дакументаў і г.д.).

Галоўная праблема - Кантэнт-менеджэр або сам заказчык атрымлівае фота для размяшчэння на сайце і адразу загружае іх на сайт.

Гэта праблема №1, таму што ніхто не глядзіць, што там за фоткі, якога яны памеру, вагі і як называюцца, а гэта ўсё важныя моманты, таму што:

• Памер фота не павінен перавышаць шырыню таго блока, у якім малюнак будзе знаходзіцца, гэта значыць, калі гэта фота размешчанае ўнутры артыкулы і яго памер ўнутры кантэнту будзе 300px, то зусім не трэба загружаць фота шырынёй 5000px, калі ж гэта фота для слайдера або галерэі, якая можа выкарыстаць попап, тады максімальная шырыня фота будзе адпавядаць шырыні экрана, я звычайна задаю 1920px.
• Вага фотак не павінен вымярацца ў мегабайт, аптымальна, каб памер фотак быў да 200 КБ, але можа быць і больш у залежнасці ад памеру і фармату малюнка. Але калі фота важыць больш 1Мб, тады гэта праблема.
• Назва фота павінна быць прапісана толькі лацінкай без прабелаў і спецзнакаў. Нельга выкарыстоўваць кірыліцу, прабелы і спецзнакі, з-за таго, што на розных хостынгах з такім фарматам могуць узнікнуць праблемы, і амаль на ўсіх хостынгах пасля архівавання-разархіваціі (пры пераносе або аднаўленні з бэкапу) кірыліца будзе ператворана ў нейкія незразумелыя знакі , і шляхі да файлаў, якія захоўваюцца ў базе дадзеных або прапісаных у кодзе не будуць адпавядаць абноўленым імёнах файлаў ... Толькі лацінка.

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

20 фотак важаць 93МБ? Напэўна, варта паменшыць іх вагу. Шырыня некаторых фота 5000px? Навошта, калі галерэя сайта абмяжоўвае памер фота да 1200px. Усе фоткі маюць розныя назвы і, часцей за ўсё, гэта набор знакаў і лічбаў, згенераваны камерай і нічым не карысны ні для карыстальніка, ні для пошукавых сістэм? Тады лепш выкарыстоўваць просты шаблон у назве фотак з прывязкай да нейкага падзеі ці назве артыкула.

Калі, трэба змяніць адно або два малюнка, тады гэта будзе прасцей і хутчэй зрабіць з дапамогай Photoshop, праз CTRL + ALT + i памяняць памер і захаваць вынік для WEB праз CTRL + ALT + SHIFT + S.

Але ў нас 20 фоток (а бывае і больш), тады патрэбен інструмент для пакетнага змены малюнкаў.

З дапамогай праграмы FastStone Photo Resizer мы можам пакетнай змяніць памеры і назвы для фотак. Спампаваць яе можна тут faststone.org/FSResizerDownload.htm .

Кароткая інструкцыя:

1. Дадаем файлы для апрацоўкі (1), выбіраем тэчку для апрацаваных файлаў (2), задаем новае імя для файлаў (3) і задаем налады для ресайза (4)
   
2. У наладах для дадзенага сайта я задаю ресайз да 1200px, таму што там галерэя абмяжоўвае памер фота да 1200, а, як правіла, для галерэй я задаю памер 1920
   
3. На выхадзе атрымліваем такія вынікі:
   
   як бачым, агульная вага была 93МБ, а стаў 6Мб, што для 20 файлаў даволі такі нядрэнна.

Дадзены вынік нядрэнны, але не ідэальны. Для таго, каб Google Page Speed не лаяўся на вагу фотак, мы іх яшчэ трохі аптымізуем.

Для фінальнай аптымізацыі малюнкаў выдатна падыдзе 1 з 2 онлайн рэсурсаў tinypng.com або kraken.io . Я зараз карыстаюся, у асноўным, першым.

І гэта дазваляе нам сціснуць фоткі яшчэ на 46% захаваўшы пры гэтым яшчэ 3МБ

Па выніку, наша старонка будзе загружаць карыстачу не 93Мб вялікіх малюнкаў, а загрузіць ўсяго толькі 3Мб фотак патрэбнага памеру. Плюс эканоміцца ​​месца на вашым хостынгу, таму што 10 такіх галерэй і танны хостынг ўжо будзе забіты амаль на 1 Гігабайт, тады як 10 галерэй па 3МБ зойме ўсяго 30МБ.

У дадзеным артыкуле ўсяго 4 карцінкі, але аптымізаваўшы іх праз tinypng.com я паменшыў вага з 1370КБ да 350КБ, або на 75%, можа і дробязь, але карыстачу трэба будзе загрузіць на 1Мб менш, значыць старонка загрузіцца хутчэй.

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

Крыху пазней я яшчэ напішу што-небудзь пра альты і тайтлов, але невядома калі.