Зменшити вагу ваших зображень - продуктивність; Швидкість завантаження Joomla

Опублікував Тьєррі Тардіф.

вагу

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

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

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

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

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

  • GIF: Малий за вагою, відносно низької якості, для використання для невеликих зображень, піктограм або зображень із основними однорідними кольорами.
  • JPG/JPEG: Велика вага, відсутність прозорості, але рішення для відображення фотографічних зображень. У цьому форматі у вас є вибір між використанням прогресивного або "базового" формату ("стандартний", який можна визначити в Зберегти для павутина фотошопу)). Прогресивний формат показує злегка розмите зображення, що покращує різкість при завантаженні, тоді як "основний" формат показує спочатку верхню частину зображення, а потім поступово відображає решту зображення. Прогресивний формат - це формат, рекомендований webpagetest.org та Google PageSpeed. Однак для цього потрібно більше ресурсів центрального процесора, що може бути не ідеальним для завантаження зображень на мобільні телефони, тому немає ідеальних відповідей на цей вибір. Особисто я завжди дотримуюсь рекомендацій Google, тому вибираю формат Progressive.
  • PNG: Виберіть цей формат для невеликих зображень, логотипів тощо. і що вимагає прозорості.

Коли ви зберігаєте "зображення в Інтернеті", зменшення його якості зі 100% до 60% значно зменшить його вагу, хоча воно все одно буде виглядати ідеально, особливо це стосується невеликих зображень.

Використовуйте JCE для видалення EXIF-даних із ваших зображень

Текстовий редактор JCE має дуже цікаву функцію, починаючи зі своєї версії 2.5.10, він може дозволити вам заощадити багато кБ. Фактично він видаляє дані Exif із зображень, коли вони завантажуються в Joomla. Подивіться на різницю у вазі між двома зображеннями, одне при звичайному завантаженні з JCE, а інше з активованим параметром JCE:

Ви можете спостерігати зниження ваги на 30%, а на якість знімків це ніяк не впливає. Цей варіант повинен бути активованим в JCE, призначити зустріч у Компоненти> Адміністрування JCE> Профілі редактора> За замовчуванням (якщо ви використовуєте цей профіль)> Параметри редактора> Файлова система і виберіть активувати установку Видалити дані EXIF ​​зображення:

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

Хоча це може здатися трохи дивним або технічним, це ВЕЛИКЕ зменшення ваги ваших зображень і дуже просте у використанні. Навіть якщо ви правильно змінили розмір своїх зображень, вони можуть містити непотрібні дані (байти) та метадані, які можна видалити для остаточної оптимізації (наприклад, дані EXIF, про які щойно згадано). Це може бути дата, коли було зроблено фото, модель камери тощо. який для веб-сайту не потрібно зберігати. Видаліть ці даніне впливає на якість зображення, цей етап англійською мовою називається "Стиснення без втрат". Більшість цих даних не можуть ні бути видаленим за допомогою команди Photoshop "Зберегти для Інтернету".

Існує ряд інструментів, які можуть зробити цю оптимізацію за вас. Все, що вам потрібно зробити, це завантажити свої зображення з Інтернету (по одному або декілька за раз) в один із цих інструментів, після чого ви можете завантажити своє оптимізоване зображення. Це, як правило, дуже вражає, особливо для зображень у форматі PNG, які можуть отримати більше 70%. Інші формати мають менш вражаючі результати, але часто в діапазоні від 10 до 40%. Smushit Yahoo був найвідомішим із цих інструментів, але він був вимкнений в автономному режимі на початку 2015 року. На щастя, існують інші інструменти, подібні або з покращеною функціональністю.

Найкращий варіант - це, мабуть, використання ImageRecycle. Його оптимізатор безкоштовний, і ви можете використовувати його в Інтернеті. Це може зменшити більшість форматів зображень і навіть PDF-файли. Ви можете завантажувати свої файли по одному або декілька за раз.

Унікальним для ImageRecycle є те, що він має плагін Joomla, який ви можете легко встановити, який зможе оптимізувати ваші зображення (і, за бажанням, змінити їх розмір) без будь-яких подальших дій з вашого боку. Ви можете знайти на цій сторінці огляд цього плагіна: http://joomlaseo.com/seo-extensions/imagerecycle

В Інтернеті доступно багато інших служб, але жодна з них на даний момент не пропонує плагін Joomla:

  • TinyPNG - чудовий інструмент, на жаль, він обробляє лише зображення PNG (тепер також доступні для обробки зображень JPG: tinyjpg.com).
  • Зауважте, що kraken.io - новачок, який виглядає дуже перспективним. Kraken може обробляти зображення JPG та PNG під час одного завантаження, що особливо корисно для пакетної обробки зображень. Kraken також існує у версії PRO, яка пропонує інші опції (та плагін Wordpress). Але доступ до базового інтерфейсу є безкоштовним і вже дуже потужним.
  • media4x.com може оптимізувати PNG або JPG, але лише по одному
  • компресор.io. Він може обробляти зображення PNG та JPG.
  • Існують також інші безкоштовні інструменти, які ви можете встановити на свій комп’ютер, вони особливо корисні, коли ви хочете зменшити партію зображень. Radical Image Optimization Tool, JPEG Reducer, Batch Purifier Lite (лише для JPEG)
  • Якщо ви використовуєте GTmetrix.com для перевірки швидкості завантаження вашого сайту та натискаєте рядок "Оптимізувати зображення", ви зможете завантажити оптимізовані версії цих зображень.

Кодуйте свої зображення в base64

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

Ось зразок коду:

Це код, який використовується для показу цього фонового зображення:, яке використовується в шаблоні сайту автора.

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

Для окремих зображень ви можете скористатися доступними в Інтернеті інструментами для їх перетворення, наприклад, www.base64-image.de. Також можна автоматизувати це завдання. Розширення Joomla Yireo ScriptMerge має опцію, яка дозволяє автоматично замінювати зображення після налаштування порогу, що відповідає коду base64.

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

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

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

Звичайно, існує безліч інших рішень, таких як використання K2, який включає механізм, який використовує змінену версію ваших зображень лише при завантаженні в Joomla, але існує безліч інших рішень.

Ліниве завантаження зображень

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

Налаштувати це рішення дуже просто, використовуючи плагін Lazy load для Joomla від розширень Kubrik (безкоштовний плагін). Цей плагін також дозволяє виключити зображення та розширення. Після встановлення ви побачите, що, рухаючи ліфт браузера вниз, з’являться зображення.

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

Використовуйте фонові зображення

Класичним методом уникнення завантаження зображень на смартфони може бути налаштування ваших зображень як фонових зображень для div замість "звичайних зображень". Наприклад, якщо у вас є зображення розміром 400 х 400 пікселів, якщо ви показуєте його на задньому плані div, який також має розмір 400 на 400 пікселів, зображення буде ідеально візуалізовано за бажанням. Але якщо ви показуєте це фонове зображення лише для смартфонів, розмір яких перевищує 468 пікселів, із використанням носіїв запиту, це зображення буде завантажено не для всіх смартфонів шириною менше 468 пікселів. Щоб такі типи зображень поводились як чуйні, вам потрібно буде використовувати більш просунуті методи, але це ще один метод, який можна додати до набору інструментів для оптимізації адаптивних зображень.

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

Більшість веб-сайтів використовують чуйний характер зображень, просто змінюючи їх розмір, щоб вони залишались у своєму контейнері, застосовуючи до них значення. макс. ширина з css.
Кращим рішенням буде завантаження іншого зображення для екранів меншої роздільної здатності. Тут вступає в дію техніка чуйного зображення. Хоча це відносно нова техніка, вам слід почати ознайомлення з цією технікою вже зараз, однак зауважте, що вам, ймовірно, знадобляться рішення javascript, щоб вона працювала у старих браузерах. На даний момент ви можете використовувати 2 методи:

1. атрибут srcset та різні розміри тегу


2. маяк

Як ви можете бачити тег

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

Також перевірте responsiveimages.org, щоб отримати додаткову інформацію з цього питання.

NDT: Щоб перевірити, який браузер підтримує атрибут srcset, див. Цю сторінку http://caniuse.com/#search=srcset.
Для обліку тегів

з різними браузерами дивіться цю сторінку: http://caniuse.com/#search=picture

Адаптивні зображення

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