Наша команда-партнер Artmisto
В одній з минулих статей я розповідала про те, як прискорити завантаження сайту на wordpress . І з'ясувалося, що у мене на сайті проблеми з оптимізацією картинок. Це зустрічається у багатьох веб-майстрів, так що всім буде корисно почитати як оптимізувати зображення для сайту.
Підійти до цього питання варто з усією серйозністю, особливо якщо ви вставляєте в статті багато зображень. Я розглянула 5 способів як зменшити вагу фото без втрати якості.
Зміст статті
Як зменшити вагу фото без втрати якості
Чим менше важить сторінка, тим швидше вона завантажиться. І найчастіше вага збільшується як раз через картинок. Багато починаючі блогери не замислюються про те, що потрібно робити зображення якомога легше.
Елементарний приклад: звичайна Незжата фотографія важить приблизно 1,5-3 мб в кращому випадку. Бувають і більш важкі випадки. Це фото можна зменшити без втрати якості більш ніж в 10 разів - до 50-100 кб.
Так що я настійно рекомендую попередньо скоротити всі фотографії, щоб вони важили менше і сторінки завантажувалися швидше. Адже це впливає і на пошукову видачу - сайти, які швидко вантажаться, отримують кращі місця.
Способів зменшити вагу картинки багато, так що я спробую окремо розглянути всі відомі мені варіанти. Спойлер: в експерименті кращі показники були з програмою Picture Manager.
Працювати я буду з фотографією котика, яка важить 3Мб (з інтернету).
1. Зробити скріншот і вирізати. Насамперед я зробила скріншот картинки і зберегла окремо - вага відразу став 104 кб, якість постраждало лише чуть-чуть, тільки якщо наблизити фото впритул. Я скріншот робила за допомогою вбудованої функції Win7 Ножиці. Знаходяться в Пуск - Всі програми - Стандартні - Ножиці.
Але не у всіх є така можливість, так що можна просто натиснути кнопочку Print Screen на клавіатурі, потім відкрити Paint і за допомогою клавіш ctrl + V вставити туди картинку. Обрізати зайве, щоб залишилася тільки потрібна картинка. Але таким способом вага вийшов 206 кб, що все одно кращий за оригінал.
2. Paint може допомогти зменшити вагу фотографії та без зайвих проблем з скріншот. Просто відкрийте фотографію за допомогою цієї програми (вона безкоштовна і має бути встановлена за замовчуванням). Натисніть Змінити розмір і поставте галочку на пікселях.
Зменшуємо цифру в поле По горизонталі на значення, яке вас влаштує. Я вказала 500, і вага скоротилася до 72,2кб. Вибирайте число, яке приблизно дорівнює ширині сторінки на вашому сайті.
Це один з найпростіших і доступних способів, але іноді зменшення розміру не сильно допомагає. Можна використовувати інші методи.
3. Picture Manager - це корисна програма для стиснення фотографій. Входить в стандартний пакет Microsoft Office, так що швидше за все у вас встановлена.
Великий плюс цієї програми - можна одночасно зменшити розмір і вага декількох фотографій.
Натисніть на потрібну фотографію правою кнопкою миші (ПКМ) і виберіть Відкрити за допомогою - Microsoft Office Picture Manager.
Натискаємо Змінити малюнок - Стиснення малюнків і виберіть відповідний варіант стиснення. Наприклад, в режимі Веб-сторінок вага зменшується з 3Мб до 26,6кб, що можна вважати дуже гарним результатом.
Щоб зменшити вагу відразу декількох фотографій, перемістіть їх в одну папку. Тепер в меню Файл виберіть Додати ярлики і додайте потрібну папку. Відкрийте її через програму, виділіть всі фотографії і дійте по вищеописаному плану.
4. Photoshop - дуже зручний спосіб, але тільки якщо ви розбираєтеся в цій програмі і вона у вас встановлена. Натисніть на фотографію ПКМ, виберіть Відкрити за допомогою - Photoshop.
У верхньому меню Зображення виберіть пункт Розмір зображення або просто натисніть клавіші Alt + Ctrl + I. Тут можна скоротити розмір фото до потрібного.
Коли встановіть потрібний розмір, натисніть ОК. Зайдіть в меню Файл - Зберегти як ... і даємо потрібну назву, тиснемо Зберегти. Після цього відкриється вікно, де можна внести додаткові налаштування:
Тут зменшуємо якість до 8 - це все ще висока якість, але скорочує розмір приблизно на чверть. В різновиди формату можна вибрати будь-який варіант, я вибираю зазвичай Базовий.
Як бачите, в цьому випадку розмір зменшується до 75,6кб, що теж можна вважати відмінним результатом. Для свого сайту я зменшую фотографії саме за допомогою фотошопу, використовуючи шаблон з певним розміром і підганяючи картинки під нього.
5. Онлайн сервіси - непогана альтернатива всім перерахованим вище методам. Чи не доведеться встановлювати додаткові програми або розбиратися в складних схемах.
Знайти подібні сайти можна без праці - їх багато. Я розгляну процес на прикладі watermark.algid.net. Натисніть на верхньому меню Сервіси і виберіть Зміна розмірів зображення.
У новій сторінці потрібно завантажити файл, потім поставити або прибрати галочку Зберігати пропорції. Якщо ви приберете галочку, потрібно буде вказати конкретні розміри зображення, інакше фото буде відображатися некоректно. При встановленій галочці досить змінити лише один показник, а другий розрахується автоматично.
Натисніть кнопку Наступний крок і збережіть отримане зображення, натиснувши ПКМ на нього і вибравши Зберегти як ...
Колажі - відмінний спосіб поєднати 2-4 фотографії в одну, скоротивши їх вага і не прибираючи їх зі статті. Дуже стане в нагоді при розміщенні покрокових рецептів - в одному знімку 4 кроку. Для цих цілей я використовую зручний сайт pizapru.com. Безкоштовний, без реєстрації, інтуїтивно зрозумілий і з безліччю функцій. Рекомендую.
Ось і всі основні способи зменшити вагу фото без втрати якості. Який саме спосіб вибрати - вирішувати вам.
Як оптимізувати зображення для сайту
А тепер додаткові поради про те, як же оптимізувати картинки для сайта или блога:
- Зберігайте зображення у форматі JPEG - це відмінний спосіб стиснути фото без втрати якості.
- Уникайте «важких» форматів, наприклад PNG. З його допомогою можна домогтися ефект прозорості на картинках, так що багато його використовують. Але іноді краще відмовитися від зайвої краси, і збільшити швидкість завантаження сайту.
- Називайте фотографії ключовими словами, а не набором літер - пошукові системи обробляють назви і виводять їх в пошуковій видачі. Так що ви можете отримати додатковий приплив відвідувачів, якщо з розумом виберіть назву.
- В поле ALT або альтернативний текст потрібно вказати опис того, що зображено на картинці. Якщо картинка не завантажиться, щоб люди могли дізнатися, що там було зображено. Можна в опис природно вписати ключ.
- В поле Title варто ввести текст, які буде з'являтися при наведенні курсору на картинку. Пошукові системи не враховують цей показник при ранжируванні, так що ключ вписувати необов'язково. Багато веб-майстри зовсім не заповнюють це поле.
- Намагайтеся використовувати унікальні фотографії. Як домогтися унікальності зображень я писала в цієї статті .
Використовуйте вищеописані способи як зменшити вагу фото без втрати якості, щоб ваш сайт швидше завантажувався. За часом це займає всього кілька хвилин, але якщо оптимізувати зображення для сайту, ваш сайт буде займати хороші позиції в пошуку. А адже саме це і потрібно будь-якого веб-майстру.
