Вага зображень, як l; оптимізувати в WordPress
Деякий час тому ми зупинились на важливості розмірів зображень у вашому WordPress. Однак це вимірювання не єдине, яке слід враховувати. Принаймні, якщо ви маєте на увазі оптимальну роботу вашого веб-сайту. Справді, також слід враховувати вагу.
І, на відміну від того, що можна подумати, одне не обов’язково пов’язане з іншим. Звичайно, менший малюнок обов’язково буде світлішим. Однак інші фактори мають значення, такі як якість та формат.
Виберіть формат ваших зображень
З точки зору формату зображення, вибір все ще досить обмежений. Це непогано, оскільки це полегшує нам роботу! Отже, PNG або JPEG? Уже є питання ваги. Дійсно, носії PNG можуть дуже швидко важити у два-три рази важче вмісту JPEG. Ось чому рекомендується вибрати цей формат, якщо у вас є блог або магазин електронної комерції. Він не тільки ідеально підходить для великих медіатек WordPress. Але це також найкраще відтворювати фотографії, які природно містять багато кольорів.
Однак не викидайте PNG занадто швидко у смітник! Бо це теж має свої сильні сторони. Головне - керувати прозорістю. Актив, який не пропонує JPEG, знайте це. Тому PNG ідеально підходить для графічних об’єктів або логотипів для інтеграції тут чи там на вашому сайті WordPress. Тим паче, що можна діяти на вагу ... Але ми повернемось до цього трохи пізніше.
Спокуса SVG
Звичайно, ви можете посперечатися зі мною щодо використання PNG. Тому що немає нічого кращого для роботи над логотипом чи піктограмою, ніж формат SVG. Це дуже модно в той час, коли вам потрібно думати чуйно і уявити веб-сайт, який можна перенести на комп’ютер, планшет і телефон. Дійсно, вона має ту перевагу, що розширюється та скорочується майже нескінченно, без втрати якості. Крім того, для типів елементів, визначених вище, файл може бути до десяти разів легший, ніж PNG або JPEG. Тільки, якщо ви коли-небудь намагалися завантажити файл SVG у свій WordPress, ви напевно отримали це повідомлення.
Дійсно, WordPress не підтримує файл такого типу. Особливо з міркувань безпеки, оскільки дуже легко ввести код у SVG. І тим самим заразити ваш сайт ...
Звичайно, можна змусити WordPress прийняти передачу файлів SVG з кількома рядками коду у functions.php вашої теми. Однак це не рекомендується, знову ж із міркувань безпеки. Вам потрібно буде вручну перевірити код кожного файлу, перш ніж надсилати їх. Це завдання можна налаштувати за допомогою PHP. Але найпростіший спосіб все-таки делегувати всі ці операції за допомогою посилального плагіна у цьому питанні: Безпечний SVG. Однак чи виправданим є додавання плагіна для відображення піктограм? Особливо в той час, коли така бібліотека, як Font Awesome, пропонує багато з них безкоштовно. Це крім того, що його дуже легко встановити. Але я дозволю вам вирішити !
Що стосується більш складних зображень, SVG, швидше за все, слід забути. Дійсно, додавання деталей значно збільшує вагу зображення до ваги, що значно перевищує формати PNG та JPEG.
Подаруйтесь моді GIF ?
Ще один дуже веселий та цікавий формат: gif! Але так, ці маленькі анімовані зображення, популяризовані Гіфі та стають важливими в соціальних мережах! Більше того, в останні роки їх вага була значно оптимізована, щоб вписатися скрізь, незважаючи на їх анімацію. Проблема: анімація, яка може збільшити час завантаження вашого сайту. Особливо, якщо gif є рідною, тобто отриманою з вашої медіатеки WordPress. Тому першою порадою буде обмеження кількості GIF-файлів на одній сторінці. З іншого боку, якщо ви не пропонуєте саморобні GIF-файли (будьте обережні з їх розміром), вибирайте варіанти інтеграції, пропоновані існуючими бібліотеками. Подобається це:
Зображення, ставка для Google ...
Не помиліться з цим. Формат зображення не є другорядним фактором. Особливо якщо мова йде про дизайн веб-сайту. Більше того, це виходить за рамки простого питання продуктивності, яке поширюється на питання SEO. Дійсно, ефективність вашого веб-сайту враховується, коли алгоритм Google обчислює рейтинг сторінки для своєї пошукової системи. У якій пропорції? Я не міг тобі сказати. Але достатньо, щоб фірма Mountain View запропонувала інструмент, спеціально присвячений вивченню ефективності вашого сайту: Google Page Speed.
Ще одним доказом, якщо такий є, є те, що у 2010 році Google навіть розробив власний формат зображення: WebP. Формат, який повинен розбити всі записи з точки зору відображення. Ще в 2013 році веб-гігант оголосив про приріст у цій галузі від 30% до 80% порівняно з PNG або JPEG. Після десяти років розробки та використання здається, що середній приріст становить понад 30%. Нарешті, 30% без втрати якості зображення. Якщо ми вирішимо зменшити останнє, виграш справді може досягти запаморочливих цифр у 80%.
Тоді це не єдина перевага використання формату WebP. Дійсно, він підтримує як широкий діапазон кольорів (JPEG) як прозорий фон (PNG), так і анімацію (gif). Таким чином, три характеристики, пов’язані з форматами зображень, об’єднані в одну. Набагато простіше! Крім того, WebP зараз підтримується більшістю браузерів. Все, крім одного, і не менш важливе, оскільки це… Safari. Браузер Apple. Важливий фактор, який слід враховувати при виборі цього формату на своєму WordPress.
Як конвертувати зображення в WebP для WordPress ?
Точно, це ще один недолік формату. Він спочатку не підтримується WordPress. І це з тих самих причин, що й ті, що стосуються формату SVG. Рішення? Пройдіть плагін. Таким чином, ми не можемо рекомендувати вам достатньо WebP express, який працює дуже просто, пропонуючи безліч варіантів майже повного контролю над перетворенням. Дійсно, поки ви володієте деякими базовими знаннями англійської мови, плагін враховує методи збереження зображень, перезаписує .htaccess та умови перетворення (із втратою якості або без неї ...).
Зображення та Інтернет: історія про грософобію ?
Ви зрозумієте, чи це питання розміру зображення чи його формату, питання його ваги є центральним. І це, хоча це не єдиний розгляд. У будь-якому випадку, це вектор №1, який слід враховувати при завантаженні фотографій на ваш веб-сайт.
Чи ви ретельно підбирали розмір зображення та його формат? Однак, це все-таки занадто важко на ваш смак? На щастя для вас, існує ряд безкоштовних сторонніх інструментів, які можуть вирішити цю проблему перед завантаженням на ваш WordPress. Невеликий неповний вибір нижче.
TinyPNG
Найпростіший, але і найбільш обмежений. TinyPNG може легко перетягувати ваш файл PNG або JPEG. Потім він миттєво освітлюється в тому ж форматі до 50% від початкової ваги. Все без явної втрати якості. Таким чином, наш друг панди пропонує освітлити до 20 фотографій в межах 5 Мб. Потім пакет можна завантажити у форматі zip.
Зменши мене
За тим же принципом, Shrink Me також пропонує перетягувати PNG та JPEG, а також SVG та WebP. Один клік і престо. Ось ваше зображення заново подано в оригінальному форматі, але воно пролило до 75% від початкової ваги. Якщо додавання двох форматів є плюсом порівняно з TinyPNG, можна перетворити лише одне зображення за раз.
Компресор.io
Останній інструмент у списку має перевагу над попередніми двома. Дійсно, Compressor.io також пропонує перетягування своїх PNG, JPEG, SVG та WebP. Ви можете одночасно висвітлити скільки завгодно файлів у межах 10 МБ. Трохи більше: ви можете вибрати конверсію з втратою якості або без неї. До речі, преміум-версія інструменту дозволяє навіть налаштувати ступінь втрати якості. Заощадження ваги може сягати до 50%, тоді як оброблені файли потім можна завантажити у форматі zip.
Що робити, якщо я хочу обробити свої зображення за допомогою плагіна WordPress ?
Але найбільш точно! Насправді їх є безліч, яких ми більше не присутні у спільноті WordPress! Перший серед них - Imagify. Що ми можемо сказати більше, ніж те, що вже було написано в цих рядках? Можливо, безкоштовна версія Imagify обмежена 25 Мб полегшення на місяць. Це швидко може виявитися обмеженим для блогу чи магазину електронної комерції.
Resmush.it
Якщо ви шукаєте щось просте та ефективне, Resmush.it - це точно те, що вам потрібно. Дійсно, це розширення пропонує полегшити ваші файли PNG або JPEG окремо або масово. Існує навіть можливість зробити це автоматично під час завантаження файлу. Нарешті, можна визначити рівень втрати якості під час операції. Зверніть увагу, що без останнього Resmush.it вже може полегшити передані зображення на 40%.
Шортпіксель
Там ми йдемо на високий рівень, оскільки Shortpixel, скоріше, слід класифікувати в категорії Imagify. Дійсно, як і останній, вам потрібно пройти через ключ API, щоб пов’язати свій WordPress із сервером дистрибутора. Потім також можна обробити ваші зображення відповідно до трьох рівнів якості або перетворити їх на WebP. Все вручну або автоматично після завантаження. Нарешті, Shortpixel - це також плагін freemium. Тобто, хоча він пропонує безкоштовну версію, також доступні преміум-плани. Отже, у тому ж ключі, що і Imagify, ці плани пропонують більше файлів для обробки. У безкоштовній версії доступно максимум тридцять зображень на місяць.
Але саме у відділі функціональності виділяється Shortpixel, завдяки чому можна автоматично перетворювати непрозорі PNG в JPEG. І ми побачили вище, що це може бути корисним! З іншого боку, Shortpixel також дбає про оптимізацію кольорів CMYK для RGB, зображень Retina, ескізів і навіть PDF-файлів. Нарешті, якщо ви використовуєте Cloudflare, Shortpixel може підключитися до нього, щоб краще обслуговувати зображення, що проходять через CDN.
EWWW Optimizer
EWWW Optimizer - це, мабуть, розширення, яке пропонує найбільше функціональних можливостей. Але вона також виявляється найбільш ефективною. Справді, його відсоток конверсії згідно з тестами досяг 65%. Плюс, це справді ярмарок оптимізації! Хоча плагін не дуже доступний для початківців. Знову ж вам потрібно буде отримати ключ API, щоб отримати доступ до всіх можливостей оптимізації.
EWWW Optimizer пропонує перехід у формат WebP та безліч варіантів оптимізації цього формату з використанням або без JavaScript! Перетворення, яке застосовується до PNG, JPEG, а також до GIF-файлів, які плагін враховує. Як і PDF-файли, але вони не конвертовані. Крім того, розширення також пропонує конвертувати ваш PNG у JPEG і навпаки або операцію GIF у PNG. Нарешті, це також дозволяє автоматично змінювати розмір зображень відповідно до визначених критеріїв. Якість JPEG-файлів можна визначити, щоб заощадити вагу, в той час як доступне і ледаче завантаження.
А ви, якими інструментами ви користуєтесь ?
Які з них найкраще обслуговували ваш WordPress на Pingdom Tools та Pages Speed Insight ?
Не соромтеся повідомити нас у коментарях !