інтернету

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

  • Мобільний перегляд. На мобільний перегляд припадає 55,6% загального перегляду, і цей показник продовжує зростати.
  • Не втрачайте користувачів. Повільний і важкий веб-сайт є синонімом дуже високого показника відмов, і ви, звичайно, цього не хочете. Не змушуйте своїх користувачів чекати, оптимізуйте вагу вашого веб-сайту.
  • SEO позиціонування. Google має обмежений час для сканування вашого веб-сайту, тому чим менше він важить, тим більше сторінок він зможе просканувати, і у вас буде більше шансів отримати кращий рейтинг, оскільки тепер ми також знаємо, що Google надає велике значення швидкості завантаження серед його факторів позиціонування.

З чого почати? Проаналізуйте, які зображення потрібно оптимізувати

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

Найкращі програми для його аналізу:

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

Вже переконалися у важливості оптимізації ваших зображень для Інтернету? Давайте подивимося, як це зробити:

Перше, що потрібно знати, як вибрати відповідний формат зображення для ваших потреб. Напевно ви коли-небудь задавались питанням, яка різниця між jpg, png чи gif. Ми не будемо набридати вам технічними характеристиками, ми лише підкажемо, коли краще використовувати той чи інший формат:

  • .GIF

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

  • .PNG

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

  • .JPG

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

Загалом, ми будемо використовувати PNG для всіх зображень, що складають наш веб-сайт (логотипи, піктограми, кнопки ...) та JPG лише для фотографій, особливо великих.

Окрім цих, стає все більш поширеним використання векторних форматів (.EPS або .SVG) для логотипів та піктограм, оскільки вони повністю масштабовані до всіх роздільних здатностей. У NoJpeg вони дають нам багато причин, щоб вибрати цей варіант.

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

Якщо ви перебуваєте у Photoshop, пам’ятайте, що ви повинні зберегти свої зображення, використовуючи цю опцію «Файл> Зберегти для Інтернету ...«Але що робити далі?

Спочатку виберіть формат, у який ви хочете експортувати (gif, png або jpg) у верхньому правому куті. Якщо ви використовуєте верхні вкладки, ви можете побачити до чотирьох копій, щоб порівняти різні формати або стиснення та побачити їх співвідношення якість/вага.

Якщо ви експортуєте у JPG, майте на увазі:

  • Смуга якості, від 0 до 100, становить 0 максимальне стиснення та 100 нульове стиснення, тобто висока якість.
  • Варіант "прогресивний". Якщо натиснути на нього, jpg збереже різні шари з різними якостями, так що при завантаженні на сервер зображення буде бачитись у низькій якості, а його визначення покращуватиметься під час завантаження. Якщо ні, зображення буде виглядати прямо вгору, спотикаючись.

Якщо ви експортуєте у PNG, майте на увазі:

  • PNG-8 або PNG-24? Головна відмінність полягає в тому, що PNG-8 стискає максимум 256 кольорів, як GIF, тоді як PNG-24 досягає 16 мільйонів кольорів. Зазвичай ви будете використовувати останні.
  • Прозорість. Досить очевидно, але якщо ви ввімкнете його на тлі, зображення буде прозорим (якщо на фоні Photoshop немає суцільного шару).
  • Варіант "чергування" дуже схожий на "прогресивний" у JPG, він стосується типу навантаження. Це буде залежати від наших уподобань та можливостей браузера, куди буде завантажено зображення.

На панелі Photoshop "Зберегти для Інтернету ..." є набагато більше варіантів, але ми не хочемо бути надто технічними, тому показуємо лише найпоширеніші варіанти. У 90% випадків вам більше не знадобиться.

Крім Photoshop, існують інші програми, які допоможуть вам зменшити вагу ваших зображень, стискаючи та усуваючи метадані та інші параметри. Ми рекомендуємо два: Image Optim (MAC) і RIOT (PC).

Автоматичне стиснення та оптимізація в WordPress

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

Завершення

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

@socialmood

Половина агентства, наполовину водевіля. Ми настроєні шкури.