Як збільшити час постійності вашого веб-сайту, щоб покращити позиціонування SEO
[SEO для початківців] 7 ключових ідей, які ви повинні знати, щоб розмістити свій веб-сайт

ЕКСПЕРТ GOOGLE?

зображення

Лист очікування

Ми всі любимо образи.

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

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

Апріорі це може здатися вам не дуже «серйозним», але якщо ви залишите його, цілком можливо, що ваш веб-сайт займе роки, а ваш сервер може бути навіть насиченим. Ви вже бачите його важливість?

Тож, не пропустіть цей пост, тому що ми збираємось пояснити все, що вам потрібно знати, щоб поетапно оптимізувати зображення на вашому веб-сайті, і які інструменти ви можете використовувати.

Індекс змісту статті:

Чому так важливо оптимізувати зображення на вашому веб-сайті

На секунду уявіть, що ви живете на шостому поверсі, де немає ліфта, і вам доведеться здійснити покупку. Що буде простіше для вас, завантажте одну сумку або завантажте п’ять за раз?

Відповідь очевидна.

Ну, те саме відбувається з вашим веб-сайтом.

Завантаження зображень без оптимізації - це наче ваша сторінка повинна була підніматися сходами, завантаженими великою кількістю важких мішків.

Формула проста: менше ваги, швидше.

І це також має ряд переваг:

Оскільки ви можете думати, що це перебільшення, ми рекомендуємо вам переглянути це відео, зроблене Google, щоб показати наслідки повільної швидкості завантаження в мобільних версіях. 😉

Уявіть собі, що ваш мобільний телефон у цьому магазині не завантажився, чи справді ви думаєте, що так довго чекали, щоб перейти на інший веб-сайт?

Як поетапно оптимізувати зображення веб-сайту

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

1. Який формат зображення використовувати

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

  1. PNG: пропонує вищу якість і дозволяє прозорі фони, але важить більше. Це найкращий вибір для скріншотів, зображень з великою кількістю білого або логотипу.
  2. JPEG: ми можемо грати краще при зменшенні розміру, і він важить менше, ніж PNG, проте якість буде нижчою. Краще використовувати JPEG для дуже великих зображень з великою кількістю кольорів або елементів, оскільки в PNG ці зображення важать набагато більше.

З’ясувавши це, давайте поговоримо про пікселі. 😉

2. Вимірювання

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

Напевно вам відомий вираз: "що вбиває мух гарматними пострілами".

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

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

3. Знаменита «вага» або якість

Усі файли, якими ви обробляєте на комп’ютері, мають «вагу», яка є посиланням на те, скільки вони займають у кілобайтах, мегабайтах тощо. Коли ми змінили вимірювання на попередньому кроці, ми зробили це з метою завантаження оптимального розміру в Інтернет, оскільки a більше зображення важить більше.

Яка тоді ідеальна вага зображення?

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

Погляньте на наступні приклади.

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

Це виглядає набагато краще, ніж інше, але все ж, якості все ще недостатньо.

А тепер так, подивіться, як це виглядає ідеально.

Скільки важить це зображення?

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

В ідеалі, зображення повинні складати близько 100 кілобайт, ніколи не перевищуючи, якщо це можливо, 150 кілобайт (за винятком деяких особливих винятків).

Інструменти для налаштування та стиснення зображень на вашому веб-сайті

Тепер ви знаєте, що робити, але нам не вистачає, як чи з чим. Давайте подивимось інструменти, якими ви можете скористатися.

1. Обрізати або змінити розмір

Для цього існує багато інструментів, тому ми пояснимо 4 найвідоміші:

  1. Photoshop: Програма Adobe - найкраще програмне забезпечення для ретушування зображень. Якщо ви знаєте, як ним користуватися (і у вас є), більше нічого сказати.
  2. Фото горох: одна з найвідоміших безкоштовних альтернатив Photoshop, яка дозволяє відкривати файли PSD (із Photoshop). Ви можете побачити це тут.
  3. Зменшити фотографії: безкоштовний онлайн-інструмент для легкого зменшення чи обрізання зображень. Якщо ви не працюєте з файлами PSD, це ефективно та швидко виконує ці функції. Увійдіть, натиснувши тут.
  4. WordPress: Якщо ви вже завантажили зображення і з якоїсь причини допустили помилку, ви можете зменшити або обрізати його за допомогою опції "редагувати". Проблема в тому, що те, що робить WordPress, - це створення копії, тож цим ви створите новий образ. Ви повинні пам’ятати, що слід видалити перший.

Як бачите, це не дуже складно.

2. Стискати, не втрачаючи великої якості

Іншими словами, як тільки розмір буде пристосовано до відповідного виміру, зображення все одно може важити багато. Як зменшити вагу, не втрачаючи багато якості? За допомогою будь-якого з цих 3 інструментів.

  1. Веб-Resizer: Хоча він має дещо застарілий інтерфейс, цей безкоштовний онлайн-інструмент дозволяє нам обрізати, обертати та регулювати розмір та якість - все в одному. Приходьте сюди, щоб подивитися.
  2. TinyPNG: панда зображень. Ви можете завантажити до 20 зображень одночасно (це чудова честь), і вони повернуть їх вагою менше. Не обманюйте себе назвою, воно також стискає зображення JPEG. Клацніть тут, щоб побачити.
  3. Compressor.io: Він підтримує JPEG, PNG, GIF та SVG, ви можете вибрати між двома типами стиснення та дозволяє завантажувати його безпосередньо на Drive та Dropbox. Клацніть, щоб увійти.

Думаєте, ми закінчили?

Щодо оптимізації зображення перед завантаженням його в WordPress, так. Але ми все ще можемо зробити трохи більше.

3. Плагіни для оптимізації зображень

У Tu Posicionamiento Web ми є експертами у розробці та позиціонуванні для WordPress (нам здається найкращою системою управління вмістом у всіх відношеннях), тому ми зосередимося на рекомендації конкретних плагінів для неї. І будьте впевнені, що всі вони вільні. 😉

  • WPSmush: ви завантажуєте зображення, а плагін відповідає за його оптимізацію сам по собі. Більше нічого робити не потрібно. Це сторінка плагіна.
  • EWWW Image Optimizer: ще один безкоштовний плагін, подібний до попереднього, який дозволить зменшити вагу зображень. Ви можете побачити це тут.
  • Ледаче навантаження: якщо ми перекладаємо буквально, це означає "ліниве навантаження", хоча це добре. Плагін завантажує зображення в тому вигляді, в якому вони з’являються на екрані, а не всі одночасно. Який сенс буде завантажувати зображення, яке може бути в кінці допису, якщо людина прочитає його лише наполовину? Таким чином сторінка завантажиться першою швидше.

Як бачите, вітається все, що подряпає десяті частки секунди на швидкості завантаження. 😉

Завжди оптимізуйте зображення на своєму веб-сайті

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

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

Ось чому дуже важливо, щоб ваш веб-дизайн був таким:

  • Привабливий.
  • Функціональний (що сторінка інтуїтивно зрозуміла під час навігації по ній).
  • Оптимізовано для веб-позиціонування та перетворення.

Якщо ви шукаєте агентство веб-дизайну в Мадриді, яке відповідає цим 3 вимогам, ми можемо вам допомогти.

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