Постараюся зробити коротку інструкцію з правильного використання зображень на сайті.

Мова піде не про елементи дизайну, а про картинках у вигляді контенту (фото, галереї, скріншоти, інструкції, скани документів і т.д.).

Головна проблема - Контент-менеджер або сам замовник отримує фото для розміщення на сайті і відразу завантажує їх на сайт.

Це проблема №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 МБ менше, значить сторінка завантажиться швидше.

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

Трохи пізніше я ще напишу що-небудь про альти і тайтли, але невідомо коли.