Кінцевий посібник з управління зображеннями WordPress

  1. 1. На даний момент читаємо: Кінцевий посібник з управління зображеннями WordPress
  2. 2. 3 маловідомі поради щодо управління зображеннями в WordPress
  3. 3. Помилки SEO WordPress Image та як їх виправити

Візуальний вплив – одна з найважливіших особливостей, коли мова йде про ефектний контент-маркетинговий план. Ласкаво просимо до нової серії публікацій – Найвищий посібник із управління зображеннями в WordPress.


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

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

Вам може бути цікаво, як ми будемо робити це. 24 000+ завантажень нашої загальнодоступної багатоцільової теми WordPress у ThemeForest може бути не чудовим показником.

Що ж, ми розібрали найкращі блоги від провідних в галузі підприємств WordPress (наприклад, WPEngine та Pagely) і дізналися що Вони дізналися під час обслуговування мільярдів переглядів сторінок у тисячах висококваліфікованих клієнтів. Ми зжили всю цю інформацію для вас у крихітні абзаци та пункти для вашого успіху в Інтернеті. Тепер почнемо, чи ми?

Поради щодо технічної та ефективної роботи для зображень WordPress

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

JPG або PNG? Використання правильного формату зображення

Найперший крок в оптимізації зображення – хороший початок. Кажуть, добре розпочата робота – це наполовину зроблено. Це саме той випадок, коли мова йде про оптимізацію зображення в WordPress. Все починається з вибору правильного формату зображення. JPG та PNG – це два найпоширеніші формати зображень, які використовуються в Інтернеті для контент-маркетингу.

Хитрість полягає в тому, щоб зрозуміти, який формат вибрати для кожного типу зображення. Вибір неправильної викликає монументальне збільшення розміру зображення. Ось правила.

Коли використовувати формат PNG?

Для плоских зображень – наприклад, векторів, ілюстрацій, шрифтів, логотипів, банерів, фігур, банерів тощо – будь-що, що створено у векторному форматі, наприклад, у форматі EPS або Adobe Illustrator (.AI), використовуйте PNG. Ви отримаєте оптимізоване зображення з майже нульовою втратою якості. Якщо ви використовуєте JPG в цьому випадку, ви не будете робити компроміси щодо розміру, але може не вистачити на якість. Насправді, при більш високих дозволах, PNG був би легшим без втрати якості. JPG постраждає.

Візьміть його приклад. Ми створимо плоське зображення в 5000px і збережемо його як JPG та PNG.

Зразок зображення, який використовується для тесту

Плоский образ
JPG233 Кб
PNG42 КБ

У двох словах, зображення JPG було на 455% вище, ніж PNG для тієї ж роздільної здатності.

Коли використовувати формат JPG?

Для всього іншого використовуйте JPG. Використовуйте JPG будь-що, крім плоского чи векторного зображення. Фотографії людей, місць, речей тощо – використовуйте JPG. Майже всі фотографії цієї категорії використовують JPG. Якщо ви використовуєте PNG замість JPG, ви натрапите на деякі серйозні питання ефективності.

У цьому випадку потрібно бути особливо обережними. Якщо ви використовуєте JPG замість PNG, шкоди буде мало або зовсім не буде. Однак якщо ви використовуєте кривавий PNG у випадку JPG, ви створюєте багато місця для пошкоджень. Погляньте на цей приклад.

Налаштування: Я завантажив це зображення з Shutterstock, яке важить навколо 10,3 Мб за резолюцією 6149 × 4562 – По суті, 28MP фондова фотографія. Якщо ми не готуємо щось на зразок готової до друку брошури, ми не будемо використовувати повну роздільну здатність фотографії в наших блогах. Скажімо, у нас в блозі фіксований максимальний розмір зображення 1600 пікс.

Експеримент: Ми змінимо розмір вихідного зображення до 1600 пікселів і створимо чотири версії – два для формату PNG і два для JPG. Для кожного формату (JPG / PNG) ми будемо використовувати (a) рекомендації щодо параметрів стиснення та (b) максимальних параметрів стиснення.

Зразок зображення для експерименту JEPG

Результати: Ось результати в хорошій діаграмі, яку ви повинні наслідувати:

Оригінальне зображення (КБ)

10870
Цільова роздільна здатність1600 пікс
ФорматНалаштуванняРозмір (КБ)% Зниження
JPGПрогресивний, якість = 8523198%
Непрогресивна, якість = 8523998%
PNGСтиснення = 0557549%
Стиснення = 61852 рік83%
Стиснення = 91750 рік84%

З першого погляду можна подумати, що 84% стиснення PNG є досить добре проти 98%, досягнутого в JPG. Це не зовсім правда. Якщо ви більш детально подивіться на розміри зображень, то побачите, що PNG важить трохи більше 1,7 МБ, тоді як JPG становить 0,22 МБ. Що означає, що PNG в 8 разів важчий за JPG версія того ж зображення з однаковою роздільною здатністю. Іншими словами, для того ж зображення та роздільної здатності версія JPG на 700% легша, ніж PNG!

Для того ж зображення та роздільної здатності версія JPG на 700% світліша за PNG!

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

Контрольний список для завантаження фотографій запасів у блоги

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

1. Змініть розмір зображення

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

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

2. Видаліть EXIF-дані

Фотографії, натиснуті на звичайну камеру, мають багато вбудованих метадані – що є не що інше, як крихітні (але корисні) біти інформації про зображення. Приклади такої інформації включають GPS координати місця, коли було натиснуто зображення, налаштування ISO, модель камери тощо.

EXIF інформація про випадкову фотографію, натиснуту на моєму iPhone

Якщо ми не ведемо фото-блог, ми зазвичай не хочемо такої інформації на зображенні в блозі. Коли ви зберігаєте або пакетно конвертуєте зображення в IrfanView, дані EXIF ​​зазвичай видаляються. Це допомагає зберегти вашу конфіденційність – особливо ваше фізичне місцезнаходження. Різниця в розмірі для більшості фотографій становить приблизно 200-300 Кб на зображення.

3. Збережіть як прогресивний JPG

IrfanView за замовчуванням зберегла JEPG як прогресивну

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

4. Встановіть DPI на 72

DPI або крапки на дюйм – це показник якості зображення. Для друкованого матеріалу використовується високе значення DPI. Для Інтернету цінність 72 ідеальна.

Гаразд, підсумовуючи вищесказане, наступні мої налаштування. Я запускаю цю функцію, коли скомпонував усі зображення для своєї публікації в блозі – перед завантаженням зображень у WordPress.

Параметри пакетного перетворення в IrfanView для типового блогу WordPress

5. Оптимізуйте свої зображення

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

Я говорю про такі послуги, як TinyPNG або TinyJPG, який просто оптимізує ваші зображення PNG / JPG за допомогою деяких вдосконалених алгоритмів.

Оптимізовані зображення в TinyPNG

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

Ви також можете придбати Pro версія послуги як плагін Photoshop за $ 50 USD. Доступні обидві версії Windows та Mac. Для моїх цілей онлайн-версія (у поєднанні з Збережіть у Dropbox функція) найкраще працює.

Плагіни для оптимізації зображень у WordPress

Поки ми вивчили кроки отримання розпочато правильно. Що робити, якщо ви зараз натрапили на цю публікацію і вже завантажили 100 зображень? Ну ось кілька плагінів, які допоможуть вам у цьому:

EWWW Оптимізатор зображень у хмарі

Цей плагін – це вилка оригінальної та дуже популярної EWWW Оптимізатор зображень підключати. Цей плагін для оптимізації зображень налічує понад 500 000 завантажень та дозволяє оптимізувати зображення під час завантаження у WordPress.

Що відрізняє його від конкуренції, – це його здатність оптимізувати наявні зображення у вашій базі даних, що призводить до величезних наслідків. Це також економить значні витрати на пропускну здатність, оскільки більша частина вашого трафіку надходить із старих статей. Ви також можете вибрати, щоб увімкнути стиснення зображення, що втрачається (що ледве видно неозброєним оком), але може заощадити багато місця та пропускної здатності. Що стосується технології оптимізації, вона може використовувати API TinyPNG або TinyJPG для оптимізації нових та існуючих зображень.

Але ось проблема. Багато хостів (включаючи WPEngine) не дозволяють плагін EWWW Optimization Image, оскільки він покладає багато додаткового навантаження на сервер. Якщо вам якось вдасться обійти обмеження на сервері, ви можете ризикувати призупинення облікового запису через порушення політики.

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

Плани та ціни: Як можна було очікувати, плагін не є безкоштовним, оскільки розробник повинен сплачувати рахунки в хмарних обчисленнях. Однак ціноутворення надзвичайно розумна вартість 9 доларів США на 3000 оптимізацій зображення для передплаченої підписки.

Плагін EWWW Cloud Optimizer розроблений прекрасно. Медіа-сканер повідомляє, скільки зображень потрібно оптимізувати, перш ніж здійснити покупку. На основі зображень вашого сервера ви можете придбати відповідний передплачений план.

Плагін TinyPNG WordPress

Це ще один чудовий плагін для оптимізації зображень, який інтегрується безпосередньо в сервіс TinyPNG / JPG. Це автоматично нові та наявні зображення, завантажені в медіатеку WordPress. Цей плагін пропонує безкоштовний план із 100 оптимізацій зображення на місяць.

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

Висновок

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map