Оптимізувати завантаження його зображень; Редпік
Коли ми говоримо про оптимізацію завантаження нашого сайту, ми зазвичай думаємо про його код або сервер, але інший параметр впливає на відображення: зображення. Це важливий критерій, який можна вдосконалити двома методами: зменшити кількість звернень до сервера & оптимізувати вагу його зображень.
1 - Зменшити кількість звернень до сервера
Спрайти CSS
Як радить Google Page Speed, важливо максимально обмежити кількість запитів HTTP. Дійсно, браузери можуть завантажувати лише два-чотири елементи паралельно, чим більше кількість елементів важливо, тим більше важливий час затримки сервера (більше інформації з цього приводу). Тому необхідно обмежити кількість зображень для завантаження, і є рішення: Спрайти CSS.
Він просто складається з об’єднання кількох зображень в одне. Потім відображення відповідного "підзображення" буде здійснено в CSS через властивість background-position. Теоретично тут ви запитаєте себе: "Так, але як ви насправді це робите? ". Ну, є такі генератори, як Css-Sprit.es, які дозволяють завантажувати всі ваші зображення за допомогою декількох клацань і виходити з красивим спрайтом із пов'язаним CSS. Зверніть увагу, що ця техніка підходить лише для невеликих зображень, як правило, у форматі .gif або .png
Перейдемо до конкретного випадку, я щойно створив спрайт із іконок стандартних тем Prestashop. У підсумку ми отримуємо одне зображення, тому уникаємо карантину доступу до сервера. Щоб уникнути псування, загальна вага зросла зі 123 кб до 18 кб !
Кодування Base64 зображень
Кодування Base64 зображень перетворює файл зображення в ряд символів. Відсоток? Потім рядок можна вставити у ваш CSS або HTML, тому ми переходимо від 1 до 0 додаткового доступу до сервера. Так Будьте обережні, однак, навіть якщо ви отримаєте доступ, після закодування зображення може «набрати вагу» (+ 33% в теорії). Тому техніка зарезервована для світлих зображень. Цей метод залишається експериментальним з тієї простої причини, що IE6 та IE7 (до цих пір 4% трафіку) не підтримують відображення закодованих зображень.
Якщо, незважаючи на це, ви хочете протестувати цей метод, я рекомендую Base64 Image, онлайн-конвертер.
Ось, наприклад, що вона дає для цієї піктограми:
2 - Оптимізуйте вагу ваших зображень
Вага зображення визначається при збереженні: Який формат (png, gif ...)? Яка якість стиснення jpeg ?
Цей крок, очевидно, є найважливішим, але все ще існує можливість захопити кілька кб. Для цього я пропоную вам послугу Smush.it від Yahoo, яка дозволяє зменшити вагу ваших зображень без втрати якості. Smush.it просто видаляє всі непотрібні дані з файлу. Все, що вам потрібно зробити, це оновити свої зображення, і через кілька секунд ви побачите zip, що містить усі ваші оптимізовані зображення. Ми навіть знаємо кількість і відсоток виграних байт. Невеликий тест із типовою темою Prestashop:
Розмита 22,12% золото 31,52 КБ від розміру ваших зображень.
Непогано! Ось хороша практика, яку слід застосовувати після закінчення її різання 😉
Для того, щоб рухатися ще швидше, існує також хороше програмне забезпечення для стиснення без втрат: «Trimage» (Linux) та «ImageOptim» (Mac)
Чудова стаття, дякую !
Це правда, що завантаження зображень іноді може бути справжньою проблемою, коли йдеться про оптимізацію часу завантаження ...
Дякуємо, що поділилися різними перетворювачами, особливо CSS Sprites, які повинні мені служити в майбутньому 🙂
Дякуємо за посилання на Yahoo, але чи є якась реальна різниця між зображенням 15 кб і зображенням 140 кб? Щодо завантаження сторінки тощо, дякую