Як оптимізувати картинки для сайту: для чого це необхідно

Вітаю всіх на сторінках свого блогу!

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

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

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

Зверніть увагу! Швидкість завантаження сторінок – дуже важливий показник, від якого залежить позиція сайту в пошуковій видачі.

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

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

Оптимізація картинок за допомогою фотошоп

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

Наприклад, нам потрібно розмістити на своєму блозі картинку. Її розмір 1200 * 800 і вага 5Мб.

Сподіваюся на Вашому комп’ютері вже встановлена ​​програма Фотошоп.

Відкриваємо фотошоп, натискаємо поєднання гарячих клавіш Ctrl + O (O- це буква в англ. Розкладці)

Вибираємо на комп’ютері потрібну картинку і і відкриваємо її.

Кількома на «замочок», щоб розблокувати картинку для подальшого редагування.

Далі нам потрібно виставити необхідний розмір картинки, що-б вона без спотворень розміщувалася по ширині поста Вашого блогу. Зазвичай це ширина – 650 px (пікселів).

Для цього одночасно натискаємо поєднання гарячих клавіш Ctrl + Alt + I.

У вікні встановлюємо ширину 650 px. Дивимося, щоб кнопка значка була натиснута, тоді висота картинки встановлюється пропорційно ширині автоматично. Встановлюємо дозвіл 72 піскелей / дюйм і тиснемо кнопку «ОК».

Тепер нам потрібно змінити вагу картинки до 50 кБ.

Робимо це в три простих кроки.

Крок 1. У верхньому меню фотошоп вибираємо: Файл- Зберегти як … або поєднання клавіш Shift + Ctrl + S

Крок 2. У вікні вибираємо тип файлу JPEG і тиснемо на кнопку «Зберегти».

Далі перед нами відкривається вікно «Параметри JPEG»

Крок 3. Встановлюємо якість зберігається картинки. Для цього переміщаємо повзунок і дивимося на зміну якості картинки.

Як тільки значення обсягу картинки досягне 50К або близького значення. При цьому зображення не втратить візуальної якості зображення можна зберегти з такими параметрами.

Тиснемо кнопку «ОК»

Як бачите нашому прикладі обсяг зберігає картинки вдалося зменшити до 48,2 кБ замість 5 МБ!

Ось так, за допомогою простих дій в програмі фотошоп ми змогли оптимізувати картинку для Вашого сайту та прискорити завантаження сторінок сайту.

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

Обробляємо зображення за допомогою сервісу

Оптимізувати картинки можна за допомогою сервісу https://kraken.io

Заходимо на цей сервіс і натискаєте на сіру кнопку «спробуйте безкоштовний веб-інтерфейс»

У вікні тиснемо на кнопку почати безкоштовно.

Далі проходимо процедуру швидкої реєстрації і переходимо на головну сторінку і і тиснемо на іконку показану на скріншоті нижче.

Потім вибираємо на своєму комп’ютері картинку для обробки і завантажуємо її на сервер сайту kraken.io

Протягом 2 секунд картинка обробляється і ми можемо завантажити готове зображення.

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

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

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

Ссылка на основную публикацию