Всім відомо, що зображення коштує тисячі слів і що веб-сторінка заробляє багато, маючи фотографії, що супроводжують його, але так, все це вірно, якщо згадані зображення добре оптимізовані. Блукаючи Інтернетом, ми знаходимо багато веб-сайтів, зображення яких не оптимізовано. Це те, що вони важать занадто багато, що вони більші за рахунок, що формат не підходить. Усі ці проблеми призводять до того, що Інтернет завантажується повільніше, і, як я вже говорив вам у цій публікації, це впливає на позиціонування, що є великою проблемою. Той, хто присвячує себе веб-дизайну в Кордові чи деінде в світі, повинен контролювати цей аспект. У цій публікації я навчу вас оптимізувати зображення на вашому веб-сайті, зменшити розмір і вагу фотографій Y як змінити розмір зображення - щоб він мав саме ті розміри, з якими згодом буде відображатися на вашому сайті. За допомогою цього підручника ви почнете закохуватися в Google, принаймні, коли справа стосується оптимізації зображень. Давайте зробимо це 😉

Навіщо вам стискати зображення вашої сторінки?

Google враховує сотні факторів, коли йдеться про ранжування сайтів на своїх сторінках результатів. Серед цих факторів є один із принципових: час завантаження. Чим швидше ваш веб-сайт завантажується, тим краще. Тим не менш, очевидно, що чим менш оптимізовані ваші фотографії, вони важитимуть більше, а тому завантажуватимуться довше, що спричинить страждання позиціонування. На щастя, дуже легко змінити розмір зображення і, як наслідок, зменшити вагу ваших фотографій та всього вашого сайту.

Розмір зображень на веб-сторінках: пікселі

Що таке пікселі

Пікселі - це найменша одиниця цифрового зображення. Кожне цифрове зображення - це прямокутник, який складається з певної кількості пікселів, кожен з одного кольору. Чим більша кількість пікселів, тим більше зображення. І навпаки, чим менше пікселів, тим менше зображення.

Як дізнатися ідеальні пікселі для веб-сайту

Гаразд, тепер, коли ви контролюєте, що таке піксель, можливо, вам цікаво, скільки пікселів потрібно вставити у ваші зображення, щоб вони добре виглядали на вашій сторінці. Це легко з’ясувати. Для цього ви можете використовувати розширення Google Chrome. Він називається Page Ruler, і він дозволить вам намалювати прямокутник на вашій сторінці та побачити його виміри. Це також допоможе вам виміряти пробіли або зображення, які вже вставлені в Інтернет. На наступному зображенні я вимірюю одну з фотографій, які прикрашають наш пост на безкоштовних банках зображень.

Як бачите, зображення має ширину 800 пікселів та висоту 447 пікселів. Решта вимірювань вказують розташування зображення по відношенню до сторінки, причому лівий верхній кут становить піксель 0,0.

Що таке пікселяція?

Я покажу вам пару прикладів. Наступне зображення має розмір 300 × 300 пікселів:

фотографії
Фотографія 300 × 300 пікселів

А наступне - 500 × 500 пікселів:

Фотографія 500 × 500 пікселів

Як бачите, вони виглядають якісними, але зараз давайте проведемо тест. Я збираюся взяти зображення розміром 300 × 300 пікселів і змусити його збільшити його до 500 × 500 пікселів:

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

Нарешті: перевірте реальний розмір фотографій

За допомогою Page Ruler ви зможете дізнатись, з яким розміром зображення відображаються на веб-сайті, але це не означає, що зображення насправді є таким розміром. Зображення іноді показуються менше, ніж є, зменшуючись за допомогою HTML або CSS. Це спричиняє проблему, про яку я сказав вам на початку, зображення важать більше, ніж мали б. Щоб побачити розмір зображення, я справді збираюся розповісти вам ще одне розширення, яке буде дуже корисним не лише для цього, а й для тисячі інших речей. Справжній швейцарський армійський ніж під назвою Web Developer. Клацніть тут, щоб встановити його. Отримавши його, ви повинні виконати такі дії:

  1. Клацніть на зубчасте колесо, яке з’явилося поруч із вашим адресним рядком, потім на вкладці Зображення, а потім на Відображення розмірів зображення. Над кожним зображенням з’явиться невеликий плакат із його розмірами.
  2. Наведіть курсор на зображення, розмір якого потрібно перевірити, і клацніть правою кнопкою миші.
  3. Клацніть на Відкрити зображення на новій вкладці.
  4. Повторіть крок 1 на новій вкладці.

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

Фото в Інтернеті та фото в новій вкладці. Розміри збігаються.

Гаразд, ви вже маєте всю інформацію, яку потрібно знати для початку роботи, тож давайте оптимізувати зображення наче немає завтра.

Як змінити розмір зображення

Перше, що вам слід зробити, це перевірити, чи правильний розмір зображень на вашому веб-сайті. Життєво важливо, щоб усі вони мали правильні розміри. Як я вже казав вам раніше, вам не доведеться нічого робити з хорошими (на цьому етапі), але вам доведеться змінити розмір фотографій, більший за розмір, з яким вони відображаються. Ви зробите це за допомогою веб-сайту ILoveIMG, що дозволяє зменшити розмір зображення в Інтернеті безкоштовно.

Змінити розмір зображень з ILoveIMG це дуже просто. Вам просто потрібно натиснути на синю кнопку «Вибрати зображення» і вибрати ті, які потрібно змінити. Ви можете вносити зміни по партіях, якщо всі вони матимуть однакову ширину або висоту. Ввівши одне з двох вимірювань, інше буде адаптоване пропорційно до кожного завантаженого вами зображення. Наприклад, якщо я хочу, щоб усі зображення у моїх публікаціях у блозі мали ширину 500 пікселів, я можу завантажити їх усі та вибрати цю ширину. Автоматично змінить розмір до 500 пікселів у ширину та відповідну висоту відповідно до співвідношення сторін зображення. Якщо ми не хочемо, щоб пропорція дотримувалася, ми можемо зняти прапорець "Зберігати пропорції". Ви також можете запобігти збільшенню зображень, розмір яких менше введеного вимірювання, щоб вони не втратили якість. Ви можете зробити це, встановивши прапорець "Не збільшувати, якщо оригінал менше".

Параметри зміни розміру

Інший варіант зменшити розмір фотографій - у відсотках. У цьому випадку це дає вам три варіанти: на 25% менше, на 50% менше і на 75% менше. Як бачите, у цьому випадку у вас немає можливості збільшити зображення, ви можете лише зменшити розмір.

Змінити розмір у відсотках

Коли закінчите змінити розмір фотографій -, ви можете перейти до наступного кроку у вашому оптимізація зображення: стиснути їх.

Як стискати зображення в Інтернеті

Для стискати фотографії в Інтернеті - Я рекомендую дві сторінки, які дозволяють вам обом знизити якість фотографії. Один - це знову ILoveIMG, а інший - TinyPNG. Чому я рекомендую два? Дуже просто, в тестах, які я робив, ILoveIMG дав кращу продуктивність, оптимізуючи файли PNG. Однак TinyPNG виграв у плані зниження ваги JPG. Тому для стиснути PNG-зображення Я рекомендую ILoveIMG і для стискати зображення JPG Я рекомендую TinyPNG. Якщо ви хочете оптимізувати зображення у форматі GIF, вам доведеться зробити це також за допомогою ILoveIMG, оскільки TinyPNG не підтримує цей формат.

Ця панда з’їдає приємні кілобайти 😀

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

Як обрізати фотографії в Інтернеті

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

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

Обрізання фотографії за допомогою ILoveIMG

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

Параметри обрізання ILoveIMG

Як стиснути зображення за допомогою плагіна (WordPress)

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

Наша подруга з WPSmush чекає, поки ми кинемо її фотографії

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

Позначення цих параметрів автоматично оптимізує зображення під час їх завантаження.

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

Зображення в цій публікації до та після оптимізації

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