Товаров:
- Оптимізація розміру зображення
- Програма для оптимізації зображень
- Оптимізація зображення для пошукових систем
Ми вже говорили про те, що CSS стилі і скрипти JavaScript бажано стискати перед додаванням на сайт. У стислому вигляді вони менше важать, а відповідно меншу вагу доведеться передавати користувачеві. Та ж ситуація і з зображеннями. Якщо Ваше зображення, завантажене на сторінку, буде мати велику вагу, то не чекайте що вона швидко завантажиться. Саме тому необхідно оптимізувати і стискати зображення перед додаванням на сайт. Нижче ми розглянемо яким же чином можна оптимізувати картинки для сайту.
Оптимізація розміру зображення
Розмір завантаженого Вами зображення дуже рідко буде збігатися з розміром, в якому він буде показаний кінцевому користувачеві. Наприклад, зображення на моєму сайті, які додаються до статті, засобами CSS або HTML стискаються до 512 пікселів в ширину. При цьому зберігається пропорція ширини на висоту. У статті користувач бачить зображення в 512 пікселів в ширину. Якщо ж зображення має в ширину менше 512 пікселів, то зображення буде показано в оригінальному розмірі. Все начебто схоплено. Але ми зайвий раз напружуємо сервер і змушуємо його стискати зображення. Якщо перед завантаженням ми змінимо ширину картинки до 512 пікселів, зберігши при цьому пропорції, то ми позбавимо сервер необхідності напружуватися з цього приводу. В результаті сторінка буде відкриватися швидше, чого ми і добиваємося.
Але з іншого боку, не варто забувати про те, що зазвичай картинки можна розкрити і подивитися. Якщо на Вашому сайті користувачі частенько більш детально розглядають картинки, то його розмір краще не зменшувати, а просто оптимізувати зображення без втрати якості.
Для того щоб зменшити розмір зображення прекрасно підійде програма Microsoft Paint, яка є у всіх, хто використовує операційну систему Windows. Відкривши зображення в даному редакторі, натисніть кнопку Змінити розмір. Відповіддю на таку дію буде наступне вікно:
Тут необхідно вибрати поле пікселі і вказати ширину зображення, яка Вам потрібна. Якщо при цьому Ви не забули поставити галочку напроти пункту Зберегти пропорції, то Ваше зображення буде зменшено в розмірі зі збереженням пропорцій. Що нам і потрібно.
Програма для оптимізації зображень
Є два методи стиснення зображень:
- Стиснення з втратами
- Стиснення без втрат
Більш ніж упевнений що всіх нас цікавить стиснення зображення без втрат. Для цих цілей є чимала кількість програм. Я розповім Вам про програму Riot, яка спеціально призначена для оптимізації зображень. Ця невелика і досить швидка програма прекрасно справляється зі своїм завданням. Інтерфейс програми дуже простий:
Вам необхідно за допомогою мишки перенести оригінальне зображення в ліве вікно. Відразу ж після цього Ви побачите оптимізоване зображення в правому вікні. При цьому, над кожним вікном буде вказано розмір зображення, так що Ви легко зможете проконтролювати рівень стиснення. Ніяких інших рухів тіла не потрібно. Єдине що може Вас зацікавити, то це повзунок Якість (Quality). Пересуваючи його ближче до нуля Ви будете зменшувати якість зображення, але при цьому сильніше стискати зображення. Я рекомендую залишити цю настройку на 80 відсотках, які встановлені за замовчуванням. В даному режимі оптимізація картинок відбувається найбільш адекватним і відповідним для наших потреб чином. Залишається тільки зберегти оптимізоване зображення і залити на сайт.
Оптимізація зображення для пошукових систем
Оптимізація розміру зображення і його стиснення зроблять Ваш сайт швидше, а в пошуковій видачі вище. І все це можна зробити без жодних втрат. Крім цього, під оптимізацією зображень розуміється прописування тегів ALT і TITLE всередині тега IMG, в якому підключається зображення. Так тег ALT повинен містити альтернативний текст, який буде виводиться при проблем з відображенням картинки, а це значить що вміст цього тега має непогано передавати суть картинки. А ось в тезі TITILE найкраще вжити ключове слово, за яким оптимізована вся стаття і сторінка сайту. Успіхів Вам з оптимізацією картинок.