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

Зображення відіграють важливу роль у успіху веб-сайту:

90% інформації, яку утримує мозок, є візуальною,
Ми частіше ділимося зображенням/відео з веб-сайту, ніж текстом,
Це полегшує користувачеві читання.

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

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

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

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

Компанія KissMetrics провела дослідження, яке показало, що:

73% користувачів мобільних пристроїв кажуть, що відвідували веб-сайт, який завантажувався занадто довго,
51% мобільних користувачів відвідали веб-сайт, який спричинив помилку під час завантаження сторінки,
47% користувачів хотіли б, щоб сайт, який вони збираються відвідати, був доступний менш ніж за 2 секунди,
40% користувачів покидають сайт, на завантаження якого потрібно більше 3 секунд,
На 1 секунду менше часу завантаження збільшує коефіцієнт конверсії вашого сайту на 7%.

Вибір правильного образу

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

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

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

Різні типи зображень

В Інтернеті існує кілька форматів фотографій/зображень, які дуже відрізняються один від одного, з усіма специфічними характеристиками. Найвідомішими та найвідомішими є: PNG, JPEG, GIF, SVG, WebP.

Чим відрізняються ці формати ?

Почнемо з нової дитини в блоці, WebP, випущеної в 2010 році Google. Цей формат забезпечує прозорість, анімовані зображення, але перш за все стиснення без втрат або втрат до 30%, не впливаючи на якість зображення. Єдиним недоліком є те, що він на сьогоднішній день несумісний з Internet Explorer і лише частково сумісний з найновішими версіями Safari. Що стосується IOS mobile, він сумісний лише з версією 14. Ці обмеження роблять цей формат на даний момент досить обмеженим.

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

Відомий як PNG, але різний, він є найбільш уживаним форматом у світі. Він менш громіздкий, ніж останній, але його декомпресія здійснюється із втратами, що, можливо, вплине на якість зображення. JPEG не дозволяє прозорість зображень.

GIF значно відрізняється від усіх інших форматів, які ми бачили раніше. Створений у 1987 році, GIF дозволяє згрупувати кілька зображень в один файл, що дозволяє їх анімувати та динамічно, або навіть відображати короткі кліпи відео. Формат GIF сприяє високому стисненню зображень за рахунок їх якості. Крім того, GIF може підтримувати лише 256 кольорів.

SVG відноситься до зображення у векторній формі. Цей формат дуже корисний, коли потрібно змінити розмір зображення. Якість не знизиться і залишиться незмінною. Крім сильних сторін, SVG підтримує прозорість, а також анімацію, і файл не дуже великий.

І який формат вибрати ?

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

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

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

Нарешті, не соромтеся використовувати SVG, який надзвичайно корисний для логотипів, невеликих ілюстрацій або піктограм. Це рекомендований формат для кращого відтворення.

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

Стиснення

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

Щоб перевірити свою ефективність, ви можете скористатися інструментом Google LightHouse, який знаходиться в браузері Chrome DevTools. Завдяки цьому інструменту ви можете створити звіт про ваш веб-сайт, щоб проаналізувати його ефективність, доступність, SEO ... Таким чином, ви зможете побачити, чи певні зображення створюють проблему, і зменшити ефективність вашого сайту.

Щоб змінити розмір ваших зображень, ви можете використовувати програмне забезпечення для редагування фотографій, таке як Affinity Photo, Gimp, Photoshop ... Ви також можете зробити це в засобі перегляду зображень Windows, але лише для формату JPEG. Нарешті, є веб-сайти, такі як TinyPNG, ImageSmaller або навіть iLoveImg, які дозволять вам дуже швидко стискати зображення.

Важливість тегу alt

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

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