04070, Україна, м.Київ, ул.Братська, 6, оф.23 +38(067)761-26-00

Оптимізуємо фотографії для сайтів: детальна інструкція

Оптимізуємо фотографії для сайтів: детальна інструкція

Фотографії або скріншоти – невід’ємна частина для будь-якої статті або публікації. Але багато користувачів стикаються з проблемою довгої завантаження сторінок з медіаконтентом, що викликає негативні емоції. Причина тому – відсутність належної оптимізації контенту. Про це в першу чергу повинен піклуватися керівник проекту і SEO-оптимізатор. Фотографії та скріншоти на сторінці повинні бути оптимального розміру, який би містився на сторінці. Крім цього зображення повинно бути детальним, мати потрібний формат і розмір. Як це зробити? Читайте далі!

Як вибрати правильний розмір фото для сайту

Проблема полягає в тому, що сучасна фототехніка дозволяє робити знімки з високою роздільною здатністю. Відповідно, їх розмір часто перевищує 20-50 мегабайт. Незважаючи на наявність у більшості користувачів швидкісного інтернету, об’ємні за вагою сторінки гірше індексуються пошуковими систему з причини своєї завантаженості. А неправильно підібрані пропорції призводять до того, що при відвідуванні сайту з мобільного телефону все картинки зіб’ються.

Існує два ключових розмірних параметра для всіх фото, що завантажуються на сайт:

  • Вага, який контент займає в пам’яті пристрою (комп’ютер або мобільний техніка), вимірюється в кілобайтах і мегабайтах.
  • Розмір – Px – вимірюється в пікселях, позначає площа, яку займає картинка на сторінці.

Якщо ваш сайт працює на движку Ecwid, то розмір картинок оптимізується в автоматичному режимі під кожний дозвіл дисплея користувача. Цю ж функцію пропонують деякі інші CMS. Але в більшості випадків потрібно в ручному режимі вказати кількість px. Оптимальний формат – 1000х1000 px.

Що стосується ваги медіаконтенту, то, чим він менший, тим швидше буде завантажуватися сторінка. Також необхідно потурбуватись про оптимізацію шляхом стиснення. Головне – не перестаратися, інакше погіршиться якість відображення. Оптимальна вага картинки – 200-400 кілобайт, в залежності від розміру.

Оптимізуємо фотографії для сайтів: детальна інструкція - фото

Кадрування картинок

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

Чи потрібні мініатюри?

Однозначно потрібні! Для багатьох сторінок на сайті потрібні мініатюрні зображення (як і для сторінок інтернет-магазинів). Оптимальний їх розмір в пікселях – всього 250 px при вазі в 50 кілобайт. Досягнете цього значення вручну в редакторі. А на сайтах на Ecwid мініатюри створюються автоматично!

Які пропорції фото потрібно додавати на сайт

Існує перелік пропорцій, які можуть бути додані на сайт (оптимальні):

  • 1: 1 (квадрат з рівним сторонами);
  • 4: 3 (високий прямокутник);
  • 3: 2 (простий прямокутник);
  • 16: 9 (низький прямокутник).

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

Налаштовуємо правильну різкість для фото в Photoshop

Розміри картинки і алгоритм зменшення безпосередньо впливають на різкість і деталізацію. Для правильного налаштування потрібно використовувати вбудовану функцію в редакторі Photoshop. За різкість відповідають параметри Bicubic Sharper. Значення Image Size краще залишити на рівні 1000 px. Щоб налаштувати різкість великого знімка, зменшуйте його розмір поступово, кожен раз на 1000 пікселів. Після кожної зміни встановлюйте параметр Bicubic Sharper для настройки різкості. Таким чином ви досягнете потрібного результату без необхідності подальшого коригування.

Спосіб зміни різкості для досвідчених користувачів

Цей спосіб передбачає собою створення двох шарів фото з різним рівнем різкості.

Дотримуйтесь таким алгоритмом:

  • Зменшіть розмір картинки за допомогою параметра Image Size, вибравши додатково параметр Bicubic Sharper.
  • Додайте другий шар на фото параметром Duplicate Layer.
  • Зробіть другий шар більш різким (параметр Filter → Sharpen → Sharpen).
  • Зробіть перший шар більш прозорим (параметр Opacity в вікні Layer).

Тут же ви можете використовувати кілька хитрощів. Наприклад, додайте на другий шар режим luminosity, щоб не допустити прояву кольорових ореолів.

Який формат картинок найкраще підійде для додавання на сайт

Всього виділяють три актуальних формату фото і скріншотів для додавання на сторінки:

  •  JPEG – найбільш актуальний формат, який підтримує стиснення з втратою якості або без нього (залежить від кінцевого розміру);
  •  PNG – формат, що дозволяє отримати найбільш деталізовану картинку після стиснення;
  • GIF – формат, що підтримує анімаційні зображення (максимум – 256 кольорів).

Для вибору:

  • якщо зображення має багато деталей, вибирайте стандартний JPEG;
  • якщо зображення має багато рівних заливок, вибирайте PNG, так як в форматі JPEG стиснення додасть зображенні піксельності, що буде помітно на рівних краях;
  • для анімації вибирайте GIF.

Не рекомендований ні в якому разі формат TIFF.

Щоб зменшити розмір, втративши при цьому МІНІМУМ якості, скористайтеся сервісами: TinyPNG або JPEGmini.

Photoshop

Що робити, якщо немає Photoshop?

Не у кожного є повноцінна версія Photoshop, особливо якщо дизайн і створення сайтів вашим покликанням перестав бути. Є альтернатива у вигляді онлайн версії Фотошопа, яка доступна на їхньому сайті. Незважаючи на обмежений функціонал, за допомогою веб-програми можна відредагувати розмір, налаштувати різкість. А при необхідності можна придбати базову версію, ціна якої становить близько 10-20 доларів.

Перелік альтернативних безкоштовних редакторів фото:

  1.  GIMP.
    Ця програма легко встановлюється на ОС Windows, Linux і MacOS. У базовий функціонал входить робота з шарами, ретушшю, корекцією кольору. Можна редагувати картинки будь-якого популярного формату, малювати, вставляти текст.
  2.  Paint.NET.
    Ця програма використовується тільки в Windows. Багато її знають, як один з базових варіантів для спрощеного редагування картинки. Програма підходить для напівпрофесійної обробки. В інструменти входить робота з шарами, різкість, корекція кольору.
  3.  PicMonkey.
    Цей редактор доступний в онлайн-режимі. Його особливістю є наявність великої кількості фільтрів (напевно, найбільше з усіх перерахованих тут додатків). Однак, поглиблений функціонал ховається в платній версії.
  4.  Pixlr.
    Ця програма частково здатна замінити Фотошоп, так як і по призначеному для користувача інтерфейсу, і по функціоналу його повторює.

Всі редактори, крім Paint.NET, можна встановити і на Windows, і на MacOS.

Як бачите, існує безліч можливостей правильно налаштувати і оптимізувати медіаконтент д

У Вас залишилися питання?
Ми працюємо 365 днів на рік та допізна! +38(044)229-19-90 или [email protected]
Зробити замовлення