Деньги, как известно, имеют различные функции. Одной из них является непрестанное движение денег в обращении, обслуживание процесса обращения. Без выполнения деньгами этой функции торговля была бы невозможна.

Оптимізація картинок для сайту

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

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

Перш ніж приступити до дій давайте я спочатку поясню що таке оптимізація картинки і навіщо їх потрібно оптимізувати.

Оптимізація картинки для Web, тобто для сайту - це збереження зображення при оптимальному співвідношенні якості до його розміру. Іншими словами, необхідно знайти золоту середину при якій якість картинки не змінитися при зменшенні його розміру (ваги файлу). Тобто при оптимізації картинки людське око не відчує різниці в якості, але розмір файлу при цьому буде мінімальний.

Тепер давайте розберемося навіщо оптимізувати картинки для сайту. Уявіть у вас на сторінці, скажімо, в будь-якому огляді є 10 картинок. В не оптимизированном варіанті кожна картинка важить ~ 1 Мб. Тобто уявімо, що ці картинки зняті на хорошій камері (хоча в реальності такі картинки важать ще більше). Я тут беру по мінімуму. Всі 10 картинок ми завантажуємо на сайт. В результаті сторінка з оглядом у нас буде важити як мінімум 10 Мб. Як мінімум тому що на сайті може бути і інша графіка, що відноситься до дизайну. Ви уявляєте вантажити сторінку в 10 Мб. Я розумію, що сьогодні у кожного в будинку є провідний інтернет і Wi-Fi. А ви подумали про користувачів мобільного інтернету? Мені здається багато користувачів просто не дочекаються завантаження сторінки взагалі.

Тепер давайте уявимо, що ці ж самі картинки після оптимізації будуть важити не 1 Мб, а 100 кб. Це в десять разів менше. У підсумку все картинки сумарно будуть важити 1 Мб. 1 Мб куди швидше завантажиться на мобільному пристрої, ніж 10 Мб.

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

Для прикладу я візьму будь-яку картинку. Подивимося на її розмір в оригіналі.

Як бачимо з скріншоту картинка важить 1,47 Мб. Це багато. Не можна її на сайт таку вантажити. Також відразу хочу звернути вашу увагу на дозвіл картинки, тобто її розмір. Він вказується в пікселях.

Бачимо дозвіл - 2560 x 1600 пікс. Це теж дуже багато. Навіщо завантажувати таку картинку, якщо вона все одно буде зменшена до ширини головного контейнера сайту. Зазвичай це не понад 1200 пікс. Якщо картинка має відкриватися в лайтбокс, тобто спливати при натисканні, то дозвіл має бути не більше 1200 пікс. Тому зменшуємо картинку в 2 етапи - спочатку зменшуємо її дозвіл, а потім зберігаємо для Web-пристроїв.

Відкриємо бажану картинку в фотошоп: Файл -> Відкрити. Далі зменшуємо розмір картинки: Зображення -> Розмір зображення.

Далі зменшуємо розмір картинки: Зображення -> Розмір зображення

Далі, збережемо вже зменшений файл у форматі JPG: Файл -> Зберегти для Web або тиснемо комбінацію клавіш Ctrl + Shift + Alt + S. У вікні вибираємо формат - JPG і виставляємо якість - Висока - 60. Якість - 60 - це якраз те оптимальне співвідношення якість / вага файлу.

Якість - 60 - це якраз те оптимальне співвідношення якість / вага файлу

Зверніть увагу на вагу файлу після збереження - 250,9 КБ. А було ж 1,47 Мб, вага скоротилася трохи більше в 5 разів.

Чому ми вибрали формат JPG, а не PNG або GIF? Формат JPG цей якраз той формат при якому оптимізація графічного файлу буде максимальним. Але слід мати на увазі, що цей формат не підтримує прозорість. Для підтримки прозорості слід використовувати формат PNG, але вага файлу в такому форматі збільшується в рази. GIF формат використовують для невеликих файлів (іконки) або для анімованих картинок.

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

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

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

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

Всім до зустрічі. До нової зустрічі!

Перевірка орфографії

Що таке оптимізація картинки і навіщо їх взагалі оптимізувати?
А ви подумали про користувачів мобільного інтернету?
Реклама
Навигация сайта
Реклама
Популярные новости
Хорошая туристическая компания

Наш мир является по своему своеобразию прекрасным и очаровательным. Куда ни кинь свой взгляд, везде присутствуют свои прелести и чудеса, смотря на которые, мы упиваемся их изящностью и прелестью. В

Финансы и бизнес
Чтобы повысить производительность и результативность бизнеса, руководителям и персоналу маркетинга, сбыта, цепочки поставок, производства необходимо понимать конкретную ситуацию, что происходит и куда

Курсы изучения китайского языка
Хотите получить помощь в изучении китайского языка, но не знаете кому можно доверять ? Отвечаю вам товарищи, ещё недавно я был таким же, как вы ровно до того момента, как узнал здешний адрес. Друзья,

Выдача свидетельства государственной регистрации
Вот пожалуй и все, что нужно знать о документах которые Вы получите из налоговой инспекции после регистрации ООО. Процедура государственной регистрации общества с ограниченной ответственностью теперь

Шкафы недорого эконом готовые
После того, как ремонт или отделка закончена приходит время подумать и о мебели. Ну, наверно каждый человек выберет то, что он поставит в своем доме первым: диван, стол, кресло… А почему бы первым не

Меры государственной поддержки Томской
Не для кого не секрет, что некоторые регионы нашей страны отстают в своем развитии и даже деградируют в социальном и экономическом смысле. На это есть ряд причин объективного и субъективного характера,

Виза в Китай
Виды виз в КНР определяются целью поездки и сроком их действия. В целом это классификация не отличается от перечня виз в другие государства: основными являются туристическая, деловая, учебная, рабочая

Реклама
Облако тегов