Як завантажувати картинки на сайт. оптимізація зображень

1. Як стиснути зображення без втрати якості
2. Як правильно завантажувати картинки на сайт
3. Як завантажувати картинки на сайт зі сторонніх сховищ

Всім привіт! сьогодні на SEO-Mayak.com ми знову будемо говорити про картинках для сайту, але в цей раз мова піде не про те, де брати зображення для сайту , А про те як завантажувати картинки на сайт і як оптимізувати зображення.

Тема вже заїжджена, але як я переконався: далеко не всі, а особливо початківці веб-майстри, дбають про зниження навантаження на сервер.

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

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

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

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

Як же можна підготувати картинку, адже вона вже і так готова? Все вірно, тільки вага картинки не повинен перевищувати 40Kb або бути близьким до цієї цифри, а розміри (пропорції) зображення треба оптимізувати під ширину сторінки сайту заздалегідь.

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

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

Я спеціально підготував картинку розміром 450х333 пікселів і вагою 57,3 kb:

Проходжу нескладну процедуру реєстрації і завантажую цю картинку:

Якийсь час сервіс обробляв зображення, але результат перевершив всі мої очікування:

Картинка втратила у вазі аж 43% і стала важити не 57.3 kb, а всього 32.8kb. Просто чудово! Але тут же в голову приходить думка - «Напевно тепер якість картинки буде огидне, треба терміново перевірити». Тисну на кнопочку - «DOWNLOAD» і скачував оброблену картинку на свій комп'ютер.

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

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

PunyPng - це просто «spa слон» якийсь або «фітнес центр», при частому відвідуванні якого, Ваш сайт буде мати «саму струнку фігуру» 🙂

Втім сервіс PunyPng може стискати одночасно до 15 зображень, що погодьтеся дуже зручно.

Упевнений, що багато веб-майстри задумаються - «Блін, це що тепер мені треба кожну фотку з усіх моїх 200 статей прогнати через цей сервіс, а потім залити назад на сервер через редактор Wopdress?»

Можу трохи Вас заспокоїти. Зробити можна все набагато простіше, якщо Ви звичайно вмієте користуватися FTP клієнтом Filezilla .

Всі фотографії з вашого блогу зберігаються в папці - «wp-content / uploads», де вони розділені по роках і місяцях. Так ось за допомогою FTP клієнта, викачуємо татка з зображеннями і по 15 штук закидаємо їх на сервіс PunyPng, стискаємо і потім таким же чином розміщуємо їх назад на сервер. Найголовніше при цій операції випадково не змінити формат або назва картинки, щоб WordPress не розгубився.

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

Гаразд, з стисненням зображень ми розібралися, тепер треба правильно їх завантажити на сайт, щоб вони не залишали абсолютно не потрібні дублі.

Як правильно завантажувати картинки на сайт

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

В середньому ширина сторінки блогів становить 600 пікселів, звичайно у кого-то може бути більше або менше. Справа в тому, що якщо завантажити картинку з пропорціями width (ширина) - 800 пікселів, а height (висота) - 500 пікселів, то звичайно таке зображення не поміститься на сторінку, і щоб вставити це зображення, доведеться міняти розмір безпосередньо в редакторі WordPress.

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

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

Отже, ми оптимізували картинку, заздалегідь підігнали розміри і завантажили її на сайт. При цьому у нас автоматично склалося 3 зображення різних розмірів: мініатюра, середній розмір і вихідний розмір.

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

Про використання мініатюр в wordpress читайте в наступних статтях: схожі записи зі слайдами без плагіна - виводимо під кожною статтею, блок популярних записів зі слайдами без плагіна - виводимо в сайдбарі, а також використання мініатюр на головній сторінці .

Для того, щоб позбутися від, абсолютно не потрібного, середнього розміру картинок заходимо в Адмін -> Параметри -> Медіафайли і поруч зі рядком - «Середній розмір» ставимо нулі:

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

Йдемо далі.

Як завантажувати картинки на сайт зі сторонніх сховищ

Хотів розглянути ще одну можливість завантаження картинок. Це особливо актуально для фотоблогів, тобто сайтів, які використовують велику кількість фотографій. Справа в тому, що існує можливість використовувати ресурси сторонніх сховищ, наприклад таких, як Яндекс фотки і вже звідти довантажувати зображення, тим самим істотно полегшуючи сам сайт. Щоб працювати з сервісами Яндекс Ви повинні бути зареєстровані - « Реєстрація сайту в пошукових системах Яндекс, Google, Bing, Mail.ru і інших »

Для того, щоб завантажити картинку нам треба потрапити на Яндекс фотки і клікнути на кнопку - «Завантажити фотки»:

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

Після того, як Ви вибрали зображення, внизу сторінки натискаємо кнопку - «Завантажити» і картинка завантажиться на Яндекс фотки. Далі виділяємо потрібне зображення:

Якщо клікнути по посиланню - «В іншому розмірі», то можна вибрати вихідний або запропоновані Яндексом розміри. Далі, натискаємо по напису - «Код для вставки на сайт або в блог», копіюємо верхній код, від тега <a>, до закриває тега </a>, виділений квадратом і вставляємо в редактор WordPress в HTML режимі. Ось та сама фотографія, тільки підгружена не з самого блога, а з Яндекс фоток:

Звертаю Вашу увагу, що скопійований код зображення з Яндекс фоток є відкритою посиланням і її необхідно закрити тегом nofollow , А ще краще приховати посилання за допомогою AJAX .

Схожа історія зі вставкою відео з YouTube. Уявляю докладних скріншот:

Це відео з YouTube вставлено за допомогою скопійованого коду, що робить абсолютно непотрібним використання плагіна Video Embedder, від якого я благополучно позбувся.

Сподіваюся стаття вийшло цікавою і не менш корисною. Успіхів!

З повагою, Віталій Кирилов