Швидка навігація по сторінці:
- Що це і навіщо потрібно?
- Як зробити?
Оптимізація зображень для сайту входить в список «must have» для будь-якого серйозного сайту, однак, як показує практика, в дійсності багато вебмастера не завжди до неї вдаються. Зізнаюся, і я далеко не завжди цим займаюся. У роздумах про це і з’явилася ця стаття.
Що це і навіщо потрібно?
Розуміння цього питання важливо для того, щоб не робити оптимізацію заради самої оптимізації (за принципом «нехай буде»).
Це дія по суті переслідує дві мети:
– задоволення пошукових систем;
– задоволення користувачів.
При цьому для вебмайстра, що просуває свій сайт, звичайно, більш значущим є перший пункт. А саме, в даний час пошукові системи враховують швидкість завантаження сайту як один з факторів його ранжування в пошуковій видачі. Звичайно, це не самий головний фактор, але якщо ваш ресурс нічим не краще за інших, але при цьому дуже повільно вантажиться, то, як ви розумієте, у пошукача не буде підстав ставити його вище, навпаки, цілком логічно, що він ранжируватиметься нижче.
Але і другий пункт має безпосереднє значення — навіть якщо б цей фактор безпосередньо не враховувався б пошуковими машинами, він все одно мав би непряме значення. Сайт, який швидше вантажиться, більше сподобається відвідувачу, отже, середньостатистичний відвідувач більше віддасть перевагу походити по різних сторінках цього сайту, збільшивши поведінкові фактори. Якщо ж сайт надмірно довго вантажиться, то користувачеві простіше закрити його і перейти до іншого сайту, тим самим погіршивши поведінкові фактори.
Таким чином, головна задача оптимізації — зменшити розмір зображень — як входять до складу дизайну сайту, так і картинок в статтях, з тим, щоб прискорити його завантаження і тим самим отримати невеликий плюс в ранжируванні і поведінкових факторах.
Як зробити?
1. Використовуємо правильний формат
Як відомо, основними форматами зображень в Інтернеті є jpg, png png-8 і png-24) і gif. У кожного з них є своє призначення, і вкрай бажано слідувати йому.
Наприклад, для графіки найоптимальнішим в даний час вважається формат png (png-8 — для простих зображень з невеликою кількістю квітів, png-24 — для зображень з великою кількістю квітів і напівпрозорість).
Формат gif до теперішнього моменту морально застарів і використовується в основному заради анімації. Звичайні ж кнопки та іконки краще робити в png, так як вони і важити менше (чого ми і добиваємося), і виглядати в складних деталях будуть краще.
Формат jpg використовується для фотографій і великих складних зображень.
Виходячи з цих правил, вам потрібно взяти дизайн свого сайту і перевірити, у якому форматі виконані всі зображення — немає зайвих елементів дизайну в jpg або gif, а також не використовуються в постах картинки у форматі png (або, що набагато гірше, bmp та інших рідкісних форматах), які повинні були б бути в jpg.
2. Ширина і висота картинок
Кожна картинка повинна завантажуватися тільки в тому розмірі, в якому вона реально показується на сторінці. Це, до речі, одна з поширених помилок, оскільки вебмастери часто завантажують картинки через адмінку, не зменшуючи їх розмір. В результаті, на сторінці показується картинка в розмірі 300?200, а в реальності завантажується файл розміром 900?600, або навіть більше, ніж ширина сторінки сайту.
Для зменшення розміру особисто я використовую безкоштовний редактор Paint.net — це дуже простий і хороший редактор зі всіма необхідними для оптимізації функціями. Є, звичайно, і фотошоп, але для цих цілей я вважаю його використання зайвим.
В Paint.net Вам достатньо відкрити фотографію, натиснути CTRL+R, і у вікні поставити потрібну ширину, а висота буде змінено автоматично. Якщо ж потім треба обрізати і висоту, тоді потрібно виділити потрібну область (внизу програми будуть показуватися її розміри) і натиснути CTRL+SHIFT+X.
3. Розмір файлів
Крім зміни ширини і висоти, найважливішим показником є розмір файлу. Якщо у Вас не фотопортал, то, повірте, для користувачів зовсім не потрібні фотографії зі 100-відсотковим якістю jpeg, вони не побачать жодної різниці між 90% і 100% якістю, а розмір файлу вже на одному тільки цьому зміну істотно скоротиться. Можна знижувати і до 60-80% — просто дивіться, щоб не було шкоди для якості.
Я цю операцію, знову-таки роблю все в тому ж самому Paint.net — натисніть «Зберегти як» відкритого jpeg файл (CTRL+SHIFT+S) і далі при збереженні Вам буде запропоновано вибрати якість. Операція займає десь 2 секунди ))
4. Робити водяний знак?
На багатьох сайтах можна побачити внизу картинки підпис з URL-адресою відповідного проекту та/або його логотипом. Робиться такий водяний знак безліччю способів — можна в фотошопі (у тому числі автоматизовано за допомогою action), можна Paint.net можна засобами PHP або плагінів для WordPress.
Питання в іншому — чи варто наносити?
Тут моє суто особисте ІМХО полягає в тому, що наносити його має сенс на ті фотографії і картинки, які сфотографовані, зроблені, намальовані, створені Вами. Це дозволить захистити ваші авторські права, так як інакше ваша праця швидше за все буде скопійовано десятками ресурсів, і ви з цим нічого зробити не зможете.
Якщо ж мова йде про те, що ви розміщуєте на своїй сторінці якусь картинку, знайдену вами на просторах Інтернету (за допомогою тих же Google або Яндекс картинок), то на неї водяний знак, на мій погляд, проставляти некоректно і неетично.
