Фотографії або скріншоти – невід’ємна частина для будь-якої статті або публікації. Але багато користувачів стикаються з проблемою довгої завантаження сторінок з медіаконтентом, що викликає негативні емоції. Причина тому – відсутність належної оптимізації контенту. Про це в першу чергу повинен піклуватися керівник проекту і SEO-оптимізатор. Фотографії та скріншоти на сторінці повинні бути оптимального розміру, який би містився на сторінці. Крім цього зображення повинно бути детальним, мати потрібний формат і розмір. Як це зробити? Читайте далі!
Проблема полягає в тому, що сучасна фототехніка дозволяє робити знімки з високою роздільною здатністю. Відповідно, їх розмір часто перевищує 20-50 мегабайт. Незважаючи на наявність у більшості користувачів швидкісного інтернету, об’ємні за вагою сторінки гірше індексуються пошуковими систему з причини своєї завантаженості. А неправильно підібрані пропорції призводять до того, що при відвідуванні сайту з мобільного телефону все картинки зіб’ються.
Існує два ключових розмірних параметра для всіх фото, що завантажуються на сайт:
Якщо ваш сайт працює на движку Ecwid, то розмір картинок оптимізується в автоматичному режимі під кожний дозвіл дисплея користувача. Цю ж функцію пропонують деякі інші CMS. Але в більшості випадків потрібно в ручному режимі вказати кількість px. Оптимальний формат – 1000х1000 px.
Що стосується ваги медіаконтенту, то, чим він менший, тим швидше буде завантажуватися сторінка. Також необхідно потурбуватись про оптимізацію шляхом стиснення. Головне – не перестаратися, інакше погіршиться якість відображення. Оптимальна вага картинки – 200-400 кілобайт, в залежності від розміру.
Якщо стискати в розмірах оригінальне зображення і зменшувати його вага, якість деталізації знижується, пропадають менш чіткі деталі на фото. Якщо ваша мета – показати навіть не промальовані елементи, додайте їх окремим кадром зі збільшенням. Так ви заощадите місце і не допустите проблем з оптимізацією сторінки. Використовуйте Photoshop.
Однозначно потрібні! Для багатьох сторінок на сайті потрібні мініатюрні зображення (як і для сторінок інтернет-магазинів). Оптимальний їх розмір в пікселях – всього 250 px при вазі в 50 кілобайт. Досягнете цього значення вручну в редакторі. А на сайтах на Ecwid мініатюри створюються автоматично!
Існує перелік пропорцій, які можуть бути додані на сайт (оптимальні):
Простежте за тим, щоб всі скріншоти і фотографії на сторінках сайту були однією пропорції. Це візуально скрасить оформлення. Важливо підбирати пропорцію і по ширині самого тексту. Особливо важливою ця інформація буде якщо розробка інтернет магазину не включала наповнення, а вам необхідно красиво і гармонійно вписати зображення товарів на сторінки свого ресурсу.
Розміри картинки і алгоритм зменшення безпосередньо впливають на різкість і деталізацію. Для правильного налаштування потрібно використовувати вбудовану функцію в редакторі Photoshop. За різкість відповідають параметри Bicubic Sharper. Значення Image Size краще залишити на рівні 1000 px. Щоб налаштувати різкість великого знімка, зменшуйте його розмір поступово, кожен раз на 1000 пікселів. Після кожної зміни встановлюйте параметр Bicubic Sharper для настройки різкості. Таким чином ви досягнете потрібного результату без необхідності подальшого коригування.
Цей спосіб передбачає собою створення двох шарів фото з різним рівнем різкості.
Дотримуйтесь таким алгоритмом:
Тут же ви можете використовувати кілька хитрощів. Наприклад, додайте на другий шар режим luminosity, щоб не допустити прояву кольорових ореолів.
Всього виділяють три актуальних формату фото і скріншотів для додавання на сторінки:
Для вибору:
Не рекомендований ні в якому разі формат TIFF.
Щоб зменшити розмір, втративши при цьому МІНІМУМ якості, скористайтеся сервісами: TinyPNG або JPEGmini.
Не у кожного є повноцінна версія Photoshop, особливо якщо дизайн і створення сайтів вашим покликанням перестав бути. Є альтернатива у вигляді онлайн версії Фотошопа, яка доступна на їхньому сайті. Незважаючи на обмежений функціонал, за допомогою веб-програми можна відредагувати розмір, налаштувати різкість. А при необхідності можна придбати базову версію, ціна якої становить близько 10-20 доларів.
Перелік альтернативних безкоштовних редакторів фото:
Всі редактори, крім Paint.NET, можна встановити і на Windows, і на MacOS.
Як бачите, існує безліч можливостей правильно налаштувати і оптимізувати медіаконтент д