Підготовка картинок до публікації на сайті

Багато користувачів роблять помилку, одразу завантажуючи на сайт фото отримані з камери чи телефону. Ці фотографії, зазвичай мають дуже велику роздільну здатність і важать десятки мегабайт. Тож їх використання призводить до суттєвого уповільнення завантаження сторінок і зниження рейтингу сайту в пошукових системах. Також, використання дуже «важких» файлів швидко заповнює дисковий простір серверу і адміністратори змушені переводити сайт на більш дорогий тариф.

Оскільки CMS Joomla автоматично не оптимізує картинки під потреби користувача, то саме редактор чи контент-менеджер повинен подбати про їхню підготовку.

Ключові етапи оптимізації картинок

1. Підбір правильного розміру картинки, щоб вона не була занадто великою і не перевантажувала сторінку.
2. Вибір правильного формату зображення (JPEG, PNG чи WebP).
3. Зменшення ваги файлу без втрати якості для швидкого завантаження сторінки сайту.

Підбір правильного розміру картинки

Ви повинні заздалегідь визначитися з тим, які будуть розміри картинок в тій чи іншій категорії матеріалів. Наприклад, якщо ви публікуєте новини сайту, то потрібно створити картинку для короткого опису новини (це зображення буде відображатися в категорії матеріалів, або на головній сторінці) та для сторінки з повним текстом статті. Зазвичай це одне й те саме зображення.

Картинка повинна виглядати чітко та гармонійно в макеті сайту. Для цього рекомендується дотримуватися однакового співвідношення сторін, наприклад 16:9 чи 4:3, залежно від дизайну шаблону. Це дозволить уникнути «рваних» блоків та зсуву верстки. Тобто, якщо ви в одній статті використали картинку з співвідношенням сторін 16:9, а в іншій — 4:3, то цілком логічно, що такі матеріали будуть виглядати непропорційно.

Я рекомендую публікувати в матеріалах картинки розміром 800х600 пікселів. Адже, якщо ви будете робити репост статті в соціальні мережі, то співвідношення сторін 4:3 добре виглядатиме будь де. А от якщо співвідношенні сторін буде 16:9, то при перепублікації матеріалу в Facebook, чи при відправці посилання на статтю у Viber така картинка буде обрізана самим сервісом і може втратити свою привабливість.

Файл картинки з розміром 800х600 пікселів важить в рази менше ніж початкове фото з телефону на 4032х3024 пікселів. Наприклад, фото з розміром 4032х3024 має вагу 1,47 Мб, а після зменшення до розміру 800х600 воно важить вже 68,8 Кб, що майже в 22 рази менше.

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

Вибір правильного формату зображення

На сьогодні, контент-менеджери використовують наступні формати:

1. JPEG (JPG) — найкраще підходить для фотографій і картинок з великою кількістю кольорів та відтінків. Завдяки алгоритму стиснення, цей формат дозволяє суттєво зменшити вагу файлу, зберігаючи прийнятну якість. Використовуйте JPEG для зображень у новинах, блогах чи фотогалереях.
2. PNG — оптимальний формат для графіки з прозорим фоном.
3. WebP — сучасний формат, який поєднує переваги JPEG і PNG.
4. GIF — підходить для простих анімацій.

Якщо ваша мета швидке завантаження новини чи статті, то краще використовувати формат JPEG або WebP. Якщо ж вам потрібно підкреслити деталі графіки чи зберегти прозорий фон — вибирайте картинки в форматі PNG.

Зменшення ваги файлу

Навіть правильно підібраний розмір та формат картинки не гарантує швидкого завантаження сторінки, якщо файл важить занадто багато. Велика «вага» зображень — це одна з найпоширеніших причин повільної роботи сайтів, зокрема й тих, що працюють на CMS Joomla.

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

Сьогодні існує велика кількість онлайн-сервісів, що допомагають швидко стиснути зображення:

• OptimiZilla;
• TinyPNG / TinyJPG;
• ILoveIMG;
• Squoosh.
• D-Nik Image Optimizer Online.

Використання цих сервісів дозволяє зменшити вагу файлу в кілька разів. Наприклад, фотографія розміром 1,5 Мб після оптимізації може важити на 75-80% менше. При цьому, вона не втрачає своїх візуальних якостей.

Підготовка картинки в програмі Paint

Щоб оптимізувати фотографію перед публікацією на сайті:

1. Відкрийте фото в програмі Paint: Файл → Відкрити (Ctrl+O).
2. На вкладці «Основне» оберіть «Змінити розмір» (Ctrl+W).
3. У вікні «Змінення розміру й нахилу» в блоці «Змінення розміру» оберіть «пікселі».
4. В поле «По горизонталі» введіть потрібне значення для ширини картинки (Наприклад, 800).
5. Поле «По вертикалі» повинно змінитися автоматично. Наприклад, якщо ваше фото має співвідношення сторін 4:3, то коли ви зазначите ширину картинки 800, то висота автоматично зміниться на 600. Якщо ж картинка має співвідношення сторін 16:9, то при введенні 800 в поле «По горизонталі», значення поля «По вертикалі» автоматично зміниться на 450.
6. Натисніть OK.
7. Збережіть картинку в форматі JPEG: Файл → Зберегти як → (Збереження у форматі JPEG).

Відеоінструкція з підготовки картинок для сайту