збираєтеся

Допомагає в роботі вашого веб-сайту.

Покращує візуалізацію для користувача.

Ви отримуєте кращу швидкість завантаження.

Ви подобаєтесь Google більше.

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

У моєму випадку, зібравши всі фотографії, які я збираюся використовувати в папці, я відкриваю їх за допомогою інструменту Photoshop, і тоді я починаю свій перший крок з оптимізації.

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

Ну давайте дійдемо до цього. Ми почали. 🚀

Формат зображення для Інтернету

Напевно ви вже знаєте, деякі розширення, такі як jpeg, png, gif ... можливо, не так вже й багато, якщо говорити про svg або Wbmp.

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

У випадку SVG це векторний формат, який використовує рядки. Мені подобається цей формат для піктограм, роздільників та лінійних зображень.

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

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

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

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

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

Ну, оскільки моя камера робить фотографії розміром 5200 пікселів, тобто, щоб побачити, як сфотографувати 5 екранів комп’ютера разом, щоб ви мене зрозуміли.

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

Ти це краще розумієш так?

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

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

І звідки я знаю, який розмір вам потрібен? Ось пояснювальне відео, в якому показано, як дізнатися розмір.

Коли ми встановимо правильний розмір, ми зменшимо вагу зображень.

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

Розмір

Інфографіка вимірювань у пікселях для Інтернету

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

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

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

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

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

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

Вага зображень

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

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

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

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

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

Розмір для різних пристроїв

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

Розміри зображень, які ми можемо використовувати на веб-сторінці

У цьому випадку я залишаю вам шаблон, який я використовую з темою GeneratePress, який я встановив на 1140 пікселів у повноекранну ширину.

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

Плагін для оптимізації

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

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

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

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

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