Оптимізуйте зображення у своєму веб-сайті WordPress

1. Оптимізація зображень, частина 2: технічна оптимізація Багато чого було сказано і написано про SEO...
2. Мобільний сайт
3. Стиснення
4. Зображення для екранів сітківки та інших екранів високого дозволу
5. CSS-спрайти
6. Мапи сайтів для зображень
7. Висновок

Оптимізація зображень, частина 2: технічна оптимізація

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

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

"Розмір має значення", також з зображеннями

Сайт робочого столу

Припустимо, ви пишете захоплюючу статтю про ваш новий продукт, і ви отримаєте гарну картину від постачальника. Ви помістите це у свою статтю, а потім перегляньте її в браузері. Скільки часу потрібно для завантаження сторінки . Ви отримаєте це, якщо ви використовуєте зображення, яке насправді призначене для друку - 3000 x 2000 пікселів, а потім 12 МБ! Це крайній приклад, але це відбувається частіше, ніж ви думаєте. Поточна максимальна ширина області вмісту на веб-сторінці зараз становить близько 1000 пікселів (за винятком повних повзунків, які можуть мати ширину 1600 пікселів). Таким чином, додаткові 2000 пікселів у цьому прикладі є непотрібними і тільки коштують більше пропускної здатності та часу завантаження, ніж потрібно. Ви також втратите якість, тому що залиште його веб-переглядачу для масштабування зображення. Спосіб масштабування і результат відрізняються для кожного браузера і ОС.

Рішення можуть бути різними для кожної системи, але я зосереджуся тут на найбільш використовуваній системі керування вмістом (CMS): WordPress .

Рішення:

1. Якщо ви використовуєте WordPress, ви можете встановити максимальні розміри (і пропорції) усіх зображень (Settings -> Media). Вони повинні / повинні відповідати пробілам, що використовуються на сайті (повна ширина, вміст блогу та мініатюри віджетів). Попросіть свого веб-розробника встановити правильні розміри. Стандартно WordPress використовує 3 регульовані формати зображень:
   1. Великі розміри - зображення, що використовуються по всій ширині сайту - зазвичай від 960 до 1000 пікселів.
   2. Середній розмір - зображення для повідомлень у блогах - часто 100% від ширини, в якій пост підходить +/- 600 пікселів
   3. Ескізи - зображення для віджетів, наприклад - +/- 150 пікселів
2. Під час використання зображень у ваших повідомленнях / сторінках виберіть правильний формат зображення. Дивіться зображення нижче .
3. Для деяких цілей (наприклад, повзунки повної ширини) зображення потребують правильного формату урожай і збільшити або зменшити. WordPress потім використовує оригінальний формат зображення для повзунків, не масштабуючи їх. Photoshop як і раніше залишається найкращим інструментом для цього. Запитайте свого веб-розробника про правильні розміри.
4. Вибрані зображення використовуються для різних цілей у WordPress; як зображення в списку блогів, портфелі, галереї тощо. Творець вашої теми відповідає за використання правильних розмірів. Веб-розробник може краще оцінити, чи вони занадто великі.

Відображення налаштувань на сторінках / повідомленнях

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

Мобільний сайт

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

Рішення:

1. Використовуйте окрему тему для мобільних пристроїв - (наприклад, з Теми WPTouch ). Вміст автоматично відформатовано і зображення зменшено.
2. З деякими JavaScript і PHP, ваш веб-розробник може мати сайт відповідати на різні пристрої та / або дозвіл екрана. Для мобільних пристроїв WordPress буде використовувати зменшені версії ваших зображень. У випадку Екран сітківки буде також використовувати більші дозволу. Найчастіше використовується JavaScript для цього на даний момент Retina.js ( див. "Зображення для екранів сітківки та інших екранів з високою роздільною здатністю" нижче ).
3. Все більше і більше тем підтримують зображення Retina.

Також можна зробити сценарій Retina.js з цим зручним плагіном (доповнення травня 2017 року).

Стиснення

Навіть якщо ви пишете зображення з Photoshop через "Зберегти для Інтернету", це не кінець розповіді. Приємно і приємно, ці зображення з Photoshop, які складають близько 80 кб, але якщо ви все ще відображаєте 12 зображень на сторінці, то це майже 1 Мб. Чи може це бути трохи менше? Так, ви можете . Існує інше рішення для кожного формату файлів (.jpg, .png і навіть .gif). Більшість з них видаляють мета-інформацію (EXIF) і непотрібні кольорові профілі з зображень. Розмір зображення розміром 1 Мб зменшено до 80%! Існують також два типи стиснення; "Без втрат" і "втрати" або відкидання кольорової інформації, а отже, збереження якості або втрати якості інформації. Характерним для важкого стиснення JPEG є видимі блоки розміром 8 x 8 пікселів. Нижче наведено екстремальний приклад стиснення "з втратами".

Lossless проти стиснення з втратами

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

Рішення в залежності від ОС:

• ImageOptim ; Інструмент офлайн для комп'ютерів Mac: PNG, JPG
• RIOT ; Інструмент офлайн для комп'ютерів Windows: PNG, JPG
• Smush.it ; Інтерактивний інструмент; Зображення PNG і JPG розміром до 1 МБ)
• SuperPNG ; Додаток Photoshop, щоб зробити файли PNG навіть меншими, ніж стандарт Photoshop
• Крихітні PNG ; Онлайн-інструмент: для PNG і JPG (раніше лише PNG)
• JPGmini Онлайн-інструмент: тільки для JPG
• Стиснути PNG / JPG ; Онлайн-інструмент для PNG і JPG

NB Навіть з методами "втрати" ви часто не бачите різниці. Отже експеримент спочатку. Часто ви можете звільнити більш агресивне стиснення "з втратами" на зображеннях для екранів Retina. Див. Наступний розділ.

Зображення для екранів сітківки та інших екранів високого дозволу

Припустимо, ви використовуєте зображення розміром 320 пікселів на сайті робочого столу та переглядайте одне й те саме зображення на екрані Retina або іншому пристрої з високою роздільною здатністю. Це, мабуть, виглядає менш добре. Це пояснюється тим, що 72 PPI (пікселів на дюйм) екрану вашого робочого столу 'розмазане' (технічно 'потроєне' або більше) над 220-232 PPI екрану Retina. Менше інформації в більшому діапазоні . Ви бачите це як розмиті зображення:

Зображення підходить для сітківки проти не-сітківка (не підходить для сітківки)

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

Рішення:

1. Використовуйте WP Retina 2X плагін. Завдяки цьому потрібно просто переконатися, що оригінальний розмір усіх зображень достатній для екранів Retina: від 1,5 до 2 разів більше. Після цього WordPress вибирає правильний розмір для пристрою.
2. З моменту появи Apple з високою роздільною здатністю модифікатора " @ 2 " буде використовувати зображення iPhone / iPad з цим розширенням на екрані Retina. Разом з деякими javascript ( Retina.js наприклад, ви можете використовувати звичайне зображення, скрипт гарантує, що при виявленні пристрою з високою роздільною здатністю зображення з низькою роздільною здатністю замінюється версією з високою роздільною здатністю. Це працює на всіх пристроях, а не тільки на продуктах Apple.
3. Для зображень у CSS (зображення, пов’язані з темою) можна використовувати медіа-запити CSS :
   • @media
     (співвідношення -wikit-min-device-pixel-ratio: 2), (мінімальна роздільна здатність: 192dpi)
     / * Правила, специфічні для Retina *
     }

Примітка. Оскільки екран мобільного телефону дещо менший, зображення для екранів з високою роздільною здатністю можна згортати дещо агресивніше. Наприклад, у Photoshop ви пишете оригінальне зображення з 80% стисненням JPG, але ви можете використовувати 30% стиснення для зображення високого дозволу. Він залишатиметься гострим, оскільки артефакти важкого стиснення зазвичай не виділяються.

CSS-спрайти

Припустимо, що на вашому сайті використовуються 2 різні зображення стрілки (ліва і права індикації) для різних цілей. Кожна з цих стрілок має окремий ефект миші . Це означає, що користувач повинен завантажити 4 різні зображення. За кожне зображення додатково HTTP-запит . Тоді чому б не зібрати його в єдиному зображенні? Замість 4 HTTP-запитів, все збирається в одному запиті . Ця колекція зображень називається «спрайтом» .

Одномісні зображення проти одного спрайту CSS

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

Рішення: насправді існує лише одне рішення;

На щастя, існує веб-додаток (букмарклет), який бере на себе важку роботу - SpriteMe .

SpriteMe аналізує вашу сторінку на можливі спрайти

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

Мапи сайтів для зображень

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

Приклад мапи XML для зображень:

<? xml version = "1.0" encoding = "UTF-8"?> <urlset xmlns = "http://www.example.com/sitemap.xml"> <url> <loc> http: //www.example .com / foo.html </loc> <image: image> <image: loc> http://example.com/image.jpg </ image: loc> </ image: image> </url> </ urlset >

Рішення:

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

Висновок

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

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