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

Причина номер один у повільності веб-сайтів пов’язана з обсягом завантажених даних. У цьому реєстрі найвимогливіший предмет стосується, без сумніву, зображень.

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

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

Чи потрібне зображення ?

Але почнемо з, здавалося б, наївного питання: чи потрібні зображення ?
Дивно, але в деяких випадках зображення використовуються для забарвлення суцільних поверхонь, таких як фон сторінки, банер або фон меню. Наприклад, суцільний 20-піксельний квадрат, повторюваний ad infinitum як фон сторінки, дорівнює щонайменше 100 байтам, при використанні властивості фону CSS ви споживаєте лише 30. Між цими двома підходами вигода становить щонайменше 60% для еквівалентного візуалізації. Тому моя перша порада: вистежуйте непотрібні зображення !

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

Виберіть правильний формат зображення

Далі, врахуйте, що лише три формати зображень придатні для веб-сайтів:

  • jpg (або jpeg для Спільна група експертів з фотографії): цей формат може обробляти до 16 мільйонів кольорів і повинен використовуватися лише для вдосконаленої графіки, високоякісних зображень або фотографій.
  • gif (для Формат графічного обміну): цей формат підтримує максимум 256 кольорів, але підтримує прозорість або дозволяє створювати прості анімації. Тому його використання є ідеальним.
  • PNG (для Портативна мережева графіка): цей формат може управляти до 16 мільйонів кольорів, а також різним рівнем прозорості . Тому він підходить практично для всіх ваших візуальних покращень.

Однак майте на увазі, що не всі браузери спочатку підтримують формат png (особливо Internet Explorer для версій нижче 7), і що, можливо, вам доведеться використовувати відповідні хаки [1]. Але за статистикою StatCounter, це становить менше 3,76% використовуваних браузерів (для W3Scools.com це 0,3%).

Формат png, як правило, є безпечним вибором, але для знакових зображень, які не потребують використання прозорості, також знайдіть час, щоб порівняти версії jpg та png, які іноді можуть спричинити невідповідність 1 із 10.

використання

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

Відрегулюйте розмір зображення

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

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

Налаштуйте роздільну здатність зображення

Як тільки формат зображень буде раціоналізований, враховуйте роздільну здатність [1], виражену в dpi (крапки на дюйм) або ppp (крапки на дюйм), припускаючи, що для того самого зображення, чим вища його роздільна здатність, тим більша його вага. Зрозуміло, що всупереч поширеній думці, стандартна роздільна здатність екранів не становить 72 dpi. Флоран Вершельде займається цим аспектом у статті Le Web c'est pas en 72 dpi, coco !.

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

Стискати зображення

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

У наведеному нижче прикладі вам потрібно бути експертом із візуальних зображень, щоб визначити втрату якості !

Для екстремістів

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

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

Інструментальна обробка ?

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

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

Особисто я все-таки рекомендую RIOT (Radical Image Optimization Tool). Цей інструмент, справжній швейцарський армійський ніж оптимізації зображення, дозволяє вам керувати:

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

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

Альтернативою (під Windows) також може бути imgOptimize.

Висновок

У наступній статті (дуже швидко) ми продовжимо тему зображень та, зокрема, найкращі практики щодо їх інтеграції в HTML-код.

До цього часу ви встигнете розпочати аудит або застосовувати вже згадані рекомендації !

[1] Методи, що дозволяють скористатися певними способами поведінки браузера, щоб обійти певні обмеження.
[2] Роздільна здатність зображення виражає кількість кольорових точок, що використовуються для даної області, традиційно в дюймах.