Просте керівництво d; оптимізація зображень для Інтернету - Б

зображень Інтернету

Зміст

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

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

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

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

Це дуже погано для SEO, а також для трафіку.

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

Зменште розмір зображення, зберігаючи прийнятну якість та роздільну здатність

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

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

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

Результат знайдено в байтах (b), щоб перетворити його в мегабайти (Мб), розділіть знайдену відповідь на 1048576.

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

Ресурси

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

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

Ось деякі з цих сайтів:

  • Compressor.io:

Цей сайт стискає зображення у форматах JPG, PNG, SVG та GIF. Він приймає лише один файл за раз.

  • Tinyjpg:

Він стискає зображення у форматі JPG та PNG, одночасно приймає 20 файлів.

  • Squoosh:

Squoosh підтримує формати JPG, PNG, SVG та GIF, як і compressor.io, він одночасно приймає лише один файл

  • Веб-сайт Planet Imagecompressor

Якщо ви хочете стиснути зображення та зберегти його якість, інструмент Imagecompressor веб-сайту Planet - саме для вас.

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

Інтерфейс інструменту одночасно привабливий та інтуїтивно зрозумілий, вам потрібно поглянути.

Він приймає формати PNG та JPG.

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

Посилення завантаження

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

Ліниве завантаження

Концепція ледачого навантаження полягає в завантаженні лише необхідних елементів.

Ви краще зрозумієте на цьому прикладі.

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

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

У вашому розпорядженні також є декілька розширень JavaScript, що дозволяють інтегрувати цю функціональність, ми можемо навести: lazyload, yall.js.

Прогресивні зображення

Ця техніка є однією з найкращих в оптимізації зображень для Інтернету.

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

Ось хороший підручник із підтримуючими кодами, який навчає, як реалізовувати прогресивні зображення, використовуючи такі бібліотеки JavaScript: Vanilla, Vue JS версії 1 та 2.

Чуйні зображення

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

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

  • Вбудуйте чуйне зображення за допомогою Bootstrap:

Невеликий опис Bootstrap, якщо ви цього не знали.

Bootstrap - це популярна інтерфейсна бібліотека з безліччю компонентів та функцій. Його гнучкість та гнучкість роблять його настільки популярним серед книжкових магазинів.

Щоб зробити зображення чуйним за допомогою Bootstrap, просто включіть клас .img-рідина в тегу img, легкий, як пиріг.

  • Впроваджуйте все самостійно:

У цьому випадку ви повинні використовувати тег картина, а в тегу пропонуйте завантажувати зображення та вказуйте типи екранів, на які потрібно завантажувати ці різні зображення.

Висновок

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

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

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