Хіба ви не любите зображення?

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

І знаєте що? Ми запрограмовані реагувати на зображення. Ось чому включення зображень у ваш контент є потужним інструментом, який можна використовувати для маркетингу вашого блогу.

Але, якщо ви не будете обережними, зображення можуть складати більше половини (або більше) загального розміру вашої веб-сторінки. Всього кілька років тому середній розмір веб-сторінки становив 600-700 тис. КБ. Зараз середній розмір становить 2 МБ, і він збільшується з кожним роком.

Це дуже круто!

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

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

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

Навіщо потрібно оптимізувати зображення

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

Дослідження показують, що до 40% відвідувачів натискають кнопку "Назад", якщо сайт завантажується довше трьох секунд.

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

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

Надмірно великі зображення також займають місце у вашому хостинг-акаунті. Хоча деякі з вас можуть мати хостинг з "необмеженим" обсягом пам'яті, багато хостинг-провайдерів преміум-класу обмежують обсяг пам'яті приблизно 10 ГБ у тарифних планах нижчого рівня. Він може швидко заповнитися, особливо якщо ви розміщуєте кілька сайтів з великими обсягами зображень в одному акаунті.

Отже, як визначити, чи не сповільнюють зображення ваш сайт? Перевірте швидкість вашого сайту за допомогою Google PageSpeed Insights.

Якщо Google повідомляє про проблему з неоптимізованими зображеннями, ось що вам потрібно знати, щоб її вирішити.

Основи оптимізації зображень

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

Розглянемо докладніше кожну з цих сфер.

Тип файлу

Зображення в Інтернеті зазвичай зберігаються у форматі PNG або JPEG - або GIF для анімації. Хто не любить ці веселі анімовані GIF-файли, що ширяють Інтернетом!

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

• JPEG - використовуйте для фотографій і дизайнів, де зображені люди, місця або предмети
• PNG - найкраще підходить для графіки, логотипів, дизайну з великою кількістю тексту, скріншотів, а також коли вам потрібні зображення з прозорим фоном
• GIF - якщо потрібна анімація, в іншому випадку використовуйте PNG

Чому ж існують різні формати?

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

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

Пізніше ми поговоримо про стиснення більш детально, а поки що, якщо ви пам'ятаєте лише дві речі, запам'ятайте: JPEG для фотографій і PNG для тексту/графіки.

Розміри зображення

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

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

І це величезний файл!

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

Зараз деякі платформи для веб-публікацій автоматично створюють кілька варіацій вашого зображення з повною роздільною здатністю в різних розмірах, але якщо цього не відбувається, вам слід заздалегідь змінити розмір зображення в редакторі зображень, такому як Photoshop, Lightroom, Pixlr - або навіть MS Paint. Це може означати різницю між файлом розміром 50 Кб і 5 МБ.

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

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

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

Після активації Imsanity також може шукати наявні зображення та змінювати їхній розмір відповідно до них.

Обслуговування ваших зображень

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

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

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

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

Blogging Wizard використовує Sucuri (він включає брандмауер для безпеки, а також CDN), але є й інші якісні провайдери, такі як Amazon's Cloudfront або KeyCDN. Навіть популярний CloudFlare, який не є CDN, пропонує CDN безкоштовно, і його легко налаштувати в більшості пакетів віртуального хостингу.

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

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

Більшість інструментів для редагування зображень, таких як Visme або Photoshop, зберігають файли з використанням стиснення JPEG з втратами, оскільки воно найкраще зменшує розмір файлів. Таким чином, хоча якість зображення дещо знижується, використання стиснення з втратами дозволяє зменшити величезні зображення до зручних для перегляду в Інтернеті розмірів.

Я впевнений, що багато хто з тих, хто користується фотошопом, може переглянути його Зберегти для веб І навіть онлайн-інструменти для редагування зображень, такі як PicMonkey або Visme, також оптимізують ваші зображення.

Але чи знаєте ви, що існують інструменти, які можуть взяти ваше "оптимізоване" зображення з фотошопу або інших редакторів, стиснути його ще на 40% (або більше), і все ще чи виглядає він майже ідентично людському оку?

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

Настільні інструменти

ImageAlpha / ImageOptim

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

Порада професіонала : Для технічно підкованих є ImageOptim-CLI, за допомогою якого ви можете оптимізувати цілу теку зображень одночасно.

ImageAlpha - це PNG-компресор з втратами, який може творити чудеса зі стисненням PNG-файлів, тоді як ImageOptim виконує просунуте стиснення без втрат (з можливістю втрат) - і видаляє непотрібні метадані з PNG, JPEG і GIF-файлів.

Для зображень у форматі PNG я спочатку проганяю їх через ImageAlpha:

Тут він зменшив мій скріншот зі 103K до 28K.

Потім я прогнав його через ImageOptim і заощадив додаткові 10%.

JPEGmini

Для своїх файлів JPEG я оптимізую їх за допомогою настільної програми JPEGmini, доступної як для Mac, так і для Windows.

Версія Lite дозволяє безкоштовно оптимізувати до 20 зображень на день, а зняття обмеження коштує $19,99.

Порада професіонала Просунуті користувачі, які бажають інтегрувати JPEGmini у Photoshop або Lightroom за допомогою плагіна, можуть придбати Pro-версію за $99.99.

Онлайн / хмарні / SaaS інструменти

TinyPNG

Якщо ви шукаєте високоякісний онлайн-інструмент для стиснення зображень, TinyPNG (незважаючи на назву, він також оптимізує файли JPEG) - це веб-додаток, який дозволяє перетягувати до 20 зображень розміром 5 МБ або менше у ваш браузер і оптимізувати їх одночасно.

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

TinyPNG надає вам 500 безкоштовних оптимізацій зображень на місяць, а після цього стягує від $0.002-0.009 за зображення, залежно від обсягу.

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

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

Якщо ви не готові витрачати гроші і не хочете турбуватися про оптимізацію зображень вручну, безкоштовний плагін EWWW Image Optimizer для WordPress може автоматично оптимізувати завантажені зображення.

Ви можете вибрати преміум-підписку, яка виконує стиснення з втратами, але безкоштовна версія виконує лише стиснення без втрат, тому економія не така значна. Це заощадить ваш час і все ж таки краще, ніж нічого.

Зауважте: Щоб дізнатися більше, прочитайте нашу статтю про інструменти для стиснення зображень.

Підбиваємо підсумки

За деякими прогнозами, до 2017 року середній розмір веб-сторінки наблизиться до 3 МБ, тому зараз саме час почати оптимізувати свої зображення.

Пам'ятайте, що не всі ваші відвідувачі будуть користуватися високошвидкісними з'єднаннями, а роздуття сторінок і повільне завантаження сторінок потенційно можуть вплинути на ваш рейтинг в Google. Щоб полегшити навантаження, так би мовити, візьміть собі за звичку оптимізувати зображення вже сьогодні.

Звертайте увагу на розміри зображень і зменшуйте надто великі стокові фотографії або зображення з цифрової камери до відповідного розміру.

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

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

Пов'язане читання: 7 способів зменшити розмір PDF-файлів.