Зменшення розміру зображення у мегабайтах без втрати якості є актуальним питанням для всіх власників веб-сайтів, які прагнуть оптимізувати свої сайти. Зазвичай саме фотографії становлять значну частину обсягу сайту. І мова йде не тільки про сайти Joomla. Одне велике зображення може важити більше, ніж один невеликий сайт (без зображень).
Крім того, що зображення займають багато місця, як на фізичних, так і на веб-серверах, велика вага фотографій впливає на швидкість завантаження сайту. Чим більше зображень на сторінці, тим повільніше сайт буде завантажуватися. Чим більша вага кожного зображення в МБ, тим більше часу потрібно сторінці для завантаження.
Не завжди доцільно зменшувати кількість зображень на сторінці. Але завжди доцільно зменшити їх вагу. Навіть якщо фотографія на сторінці — всього одна. Такі вимоги ставить Google до сайтів.
Чим більш оптимальною буде вага фотографій на сайті, тим менше доведеться чекати вашим користувачам, що позитивно впливає на SEO. Швидкість завантаження сайту — один із найважливіших SEO-показників.
Нижче ми розглянемо оптимізацію ваги зображення по кроках з прикладами. Саме в такій послідовності необхідно оптимізувати фотографії.
Крок 1. Зміна роздільної здатності зображення
Найочевидніша дія для зменшення ваги зображення — це зміна роздільної здатності, або по простому - розміру. Якщо для вашого сайту достатньо розміру, наприклад, 1000 х 1300 пікселів, не потрібно використовувати зображення більшого розміру, скажімо, 3000 х 3900.
Якщо ви отримали оригінал фотографії у високій роздільній здатності, або завантажили зображення з фотостоку, використання на сайті зображення в оригінальному розмірі є поганою практикою, і ймовірно, Google це не оцінить. Зменшіть роздільну здатність зображення до мінімально необхідної.
Роздільну здатність можна зменшити пропорційно і/або обрізавши зайві частини фотографії, наприклад, порожні області по боках. Нижче покажемо, як це робиться в Adobe Photoshop (професійний графічний редактор) і Paint (безкоштовна стандартна програма Windows).
Зміна розміру зображення в Photoshop зі збереженням пропорцій
Відкриваємо зображення в Photoshop: Файл > Відкрити... .
-
Щоб змінити розмір, переходимо в Зображення > Розмір зображення... (Alt + Ctrl + i)
-
Вказуємо необхідні значення ширини або висоти для зміни роздільної здатності.
-
Ланка, що з'єднує поля ширини і висоти, означає пропорційну зміну роздільної здатності (тобто при зміні висоти також зміниться ширина, і навпаки).
Після зміни параметрів ширини і висоти натискаємо ОК внизу спливаючого вікна. Після цього можна зберегти файл.
1) Для збереження вибираємо Файл Зберегти як...
2) Вибираємо необхідний тип файлу (наприклад, JPEG або PNG) і натискаємо Зберегти (праворуч внизу).
Фото буде збережено в зазначене місце (наприклад, на Робочий стіл). Також можна відразу задати своє ім'я файлу.
Зміна роздільної здатності зображення в Paint зі збереженням пропорцій
Варто зазначити, що незважаючи на очевидні переваги Photoshop, збережені в Paint зображення (JPG / PNG) зазвичай не поступаються за якістю, хоча можуть мати більшу вагу. Після зменшення ваги фото на 3-му кроці, фото, збережені в Paint і Photoshop, стають приблизно однаковими за якістю і вагою. Таким чином, безкоштовної програми Paint може бути цілком достатньо для простої задачі - зміни розміру зображення (з наступним зменшенням обсягу - крок 3).
Відкрийте Paint через панель Пуск або скористайтесь пошуком, та введіть назву програми. (Якщо не вдається знайти Paint через Пуск або пошук, введіть у провіднику шлях C:\Windows\System32\ і знайдіть файл з назвою "mspaint.exe").
Після запуску Paint відкрийте фото для редагування: Файл > Відкрити, після чого виберіть потрібне зображення.
-
Натисніть "Змінити розмір".
-
У відкритому вікні ви можете вибрати відсотки або пікселі як параметр зміни.
-
Поля для введення необхідних параметрів ширини і висоти фото.
-
Наявність чекбокса означає збереження пропорцій при зміні висоти або ширини.
Після зміни параметрів натисніть "OK". Для збереження фото виберіть "Файл" > "Зберегти як". Потім ви можете вибрати формат збереження (JPG, PNG та інші), а також місце, куди буде збережена картинка та її ім'я.
Обрізка зображення в Photoshop (2 способи)
Спосіб 1: Зміна розміру полотна
Відкриваємо зображення в Photoshop: "Файл" > "Відкрити".
-
Переходимо в Зображення > Розмір полотна... (Alt + Ctrl + c).
-
У відкрившомуся вікні налаштувань можна встановити параметри ширини та висоти (фото буде обрізане відповідно до введених параметрів).
-
Вибір одиниць вимірювання фото (наприклад, пікселі або відсотки).
-
Напрямки обрізки зображення. Наприклад, стрілка зліва направо означає, що область зправа буде обрізана (або збільшена) при зміні параметра ширини.
Після зміни параметрів натискаємо ОК.
Скасувати дію в Photoshop можна натисканням клавіш Ctrl + Z.
Спосіб 2: Видалення виділеної області
Також обрізати зображення в Photoshop можна, виділивши певну область курсором і видаливши її. Цей спосіб може бути зручним у випадку, якщо під час обрізки ви орієнтуєтесь на якийсь об'єкт, зображений на фото.
Після відкриття зображення відкрийте вікно керування шарами - натисканням клавіші F7.
Розблокуйте шар з зображенням натисканням на іконку замка:
Після розблокування шару, можна видалити будь-яку область фотографії за допомогою інструментів виділення, наприклад, "Прямокутна область" (клавіша M):
Допустимо, потрібно видалити гірський масив справа на фотографії. Для цього виділяємо область справа пунктирним прямокутником і натискаємо клавішу Delete:
В результаті видалення обраної області, на її місці повинен залишитись порожній (прозорий) фон.
Щоб швидко позбутися від утвореної пустої області, виберіть Зображення > Обрізка... У відкрившомуся меню налаштування залишаються за замовчуванням (на основі прозорих пікселів), потрібно просто підтвердити, натиснувши ОК. "Обрізка" видалить прозору частину, залишивши тільки заповнену область.
Зображення зберігається через Файл > Зберегти як... (детальніше про збереження зображення описано вище).
Обрізка зображення в Paint
У програмі Paint фото можна обрізати просто потягнувши за межі:
Якщо ви видалили забагато, скасуйте дію, натиснувши клавіші Ctrl + Z.
Зображення зберігається через кнопки Файл > Зберегти як.
При необхідності, ви можете поєднувати способи зменшення роздільної здатності фото, спочатку обрізавши зображення (видаливши зайві області), а потім змінивши параметри висоти та ширини зображення зі збереженням пропорцій.
Крок 2. Зміна формату зображення
Зазвичай фотографії у форматі JPG (JPEG) займають менше місця, ніж у форматі PNG або BMP. Тому Google вважає формат JPG більш оптимальним. Але JPG не завжди є найлегшим, все залежить від вашого оригінального файлу зображення та методів збереження. Наприклад, скріншот екрана комп'ютера, спочатку збережений у форматі PNG, при повторному збереженні може займати більше місця, навіть якщо формат буде JPG. Варто дивитися на кінцевий результат. Ви можете зберегти фото у форматі JPG і PNG, і порівняти, який з варіантів має менший розмір.
Якщо ваше зображення має прозорий фон або інші прозорі області, фото необхідно зберігати у форматі PNG, щоб прозорість лишилась.
Збереження фото у форматі JPG у Photoshop
-
Обираємо Файл > Зберегти як...
-
Обираємо тип файлу JPEG (JPG).
Натискаємо Зберегти. Потім редактор запропонує параметри збереження файлу.
Залишаємо якість на рівні 8, оскільки це оптимальний показник, який зменшує розмір фото, але не погіршує помітно деталізацію. Натискаємо "ОК".
Збереження зображення у форматі PNG у Photoshop
Ви можете зберегти зображення таким же способом, як описано вище. Але замість JPEG виберіть PNG. Тобто, Файл > Зберегти як, вибираємо тип файлу PNG, натискаємо "Зберегти". Параметри збереження фото у форматі PNG будуть наступними:
Де можна вибрати розмір файлу від великого до маленького і натиснути "OK". Вибір найменшого розміру файлу означає, що збережений файл буде мати найменшу вагу порівняно з іншими опціями. Однак збереження у малому розмірі займе більше часу.
Альтернативним методом збереження у форматі PNG є Швидкий експорт.
Відкриваємо шари (F7), на шарі зображення викликаємо контекстне меню правою кнопкою миші та обираємо пункт "Швидко експортувати як PNG". Не буде запропоновано жодних параметрів збереження, фото буде збережене відразу. Цим методом можна користуватися сміливо, зважаючи на те, що надалі зображення буде стиснуте (Крок 3).
Збереження зображення у форматі JPEG/PNG в Paint
У програмі Paint зображення зберігається досить просто, через Файл > Зберегти як, після чого слід обрати формат JPEG (JPG) або PNG.
Порівняно з Photoshop, Paint не має налаштувань якості зображення при збереженні.
Крок 3. Зменшення розміру (Стиснення зображення)
Незалежно від того, у якому форматі ви зберегли фотографію - JPEG або PNG, використовували Photoshop, Paint або іншу програму, завжди варто стискати фото. Навіть найоптимізованіше зображення можна зменшити.
Для стиснення ваги зображення використаємо онлайн-сервіс https://tinypng.com/. Ви можете просто перетягнути фото на сторінку сервісу, щоб миттєво отримати стиснену фотографію без втрати якості.
Існує багато подібних онлайн-сервісів, ви можете знайти їх за відповідними запитами в Google. https://tinypng.com/ справді добре справляється з завданням стиснення зображень і може зменшити розмір фото в декілька разів. Однак завжди варто перевіряти якість фото після такої обробки. Обмеження для кожного зображення - 5 МБ (для безкоштовного користування).
Якщо у вас є два варіанти фото - у форматі JPG і PNG, завантажте обидва варіанти в tinypng і подивіться, що вийде. Іноді файл з більшим розміром на початку має меншу вагу після стиснення.
У процесі оптимізації фотографії обов'язково зберігайте оригінали. Також необхідно слідкувати, щоб якість зображення не зазнала помітного погіршення.
Крім того, незначне зменшення обсягу зображення можна досягти, видаливши його метадані. Метадані можна видалити під час експорту в Photoshop (Файл > Експорт > Експортувати як - з'явиться вікно з налаштуваннями, де в області "Метадані" повинна стояти позначка "Ні"), або за допомогою спеціальних програм, таких як Exif Pilot, Easy Exif Delete або Exif Tag Remover.
Перші три кроки - це основні методи зменшення розміру зображення. Ви можете скористатися будь-яким з них, наприклад, лише стиснути фото (Крок 3). Але, застосовуючи всі методи поетапно, від першого до третього, ви отримаєте найкращий результат.