Як зменшити вагу картинки і прискорити завантаження блогу?

1. Як зменшити вагу картинки? Оптимізація картинок за допомогою програм і сервісів
2. Оптимізація картинок за допомогою Adobe Photoshop за 5 хвилин + зменшення ваги картинки

Наша взаимовыгодная связь https://banwar.org/

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

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

Як зменшити вагу картинки? Оптимізація картинок за допомогою програм і сервісів

У цьому пості хочу поділитися з вами трьома способами, які дозволять зменшити вагу картинки для вставки в статті, а також оптимізувати картинки свого шаблону. Ось, що буде задіяно:

1. Програма Snagit;
2. Програма Abode Photoshop;
3. Онлайн сервіси оптимізації графіки.

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

Працюємо з першим способом. Припустимо, у вас на ПК лежить фото, зроблене на професійну камеру, сподіваюся, ви знаєте, скільки важать такі фотографії, а якщо немає, то цифри коливаються від 3Мб до 15-20мб і вище.

Тільки уявіть, ви закинули на хостинг 10 картинок, а десять картинок - це одна хороша стаття, візьмемо найменше значення, 3 мегабайта, разом вийшло, що на хостингу зайнялося 30 мегабайт простору. Ще 20-30 статей і місця немає! Жах ...

Отже, повертаємося до теми поста. Що робити? Відкриваємо цікавить картинку стандартною програмою для перегляду зображень. Запускаємо програму Snagit і робимо скріншот цієї фотографії. Як працювати з програмою, я писав в цьому пості .

І відразу, картинка отримує меншу вагу. Для прикладу, я візьму своє фото, і виконаю вищесказане. Початковий розмір 5,24 мб.

Після того, як я зробив скріншот, розмір став 65,4 кб. Класно, так ?! Уявіть скільки місця можна економити, проробляючи такі маніпуляції перед вставкою картинок до себе на сайт. А адже це ще не все!

Можна зменшити розмір картинки. Багато хто любить це робити через адмін панель WordPressa, але правильніше буде підготувати її на ПК і тільки потім завантажувати.

Отже, відкриваємо картинку за допомогою програми Microsoft Office Picture Manager.

У верхній частині меню вибираємо змінити малюнки -> зміна розміру.

Потім у вікні налаштувань задавайте необхідні параметри. Можна скористатися ручним методом, тобто вручну ввести циферки, а можна поставити крапочку навпроти «відсоток від вихідних ширини і висоти» і підігнати бажаний розмір.

У чому різниця між ручним і автоматичним методом?

Якщо ставити вручну, потрібно знати пропорції, інакше картинка буде витягнута або розтягнута, автоматичний метод сам підганяє пропорції, саме їм я і скористався. Тиснемо «ок».

Розміри вийшли 614 х 407. Тепер по-старому, потрібно зберегти дане зображення. Вибирайте файл - зберегти як ... і вказуйте місце, куди потрібно зробити збереження. Після збереження, моє фото важить всього 36,6 кб (прям як температура тіла:''). А візуально виглядає так.

Насправді, програмою Picture Manager дуже рідко користуюся, перевагу віддаю фотошопу. Але про нього трохи нижче.

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

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

Після завантаження, файл важить 35 кб. Як бачите, сервіс не сильно стиснув, тому, програми Snagit буде досить, до речі, в ній також можна задавати і розміри зображення, для цього потрібно перейти в редакторі на вкладку «зображення» і вибрати «розмір» - «розмір зображення». У вікні, підігнати потрібні розміри, результати можна переглядати внизу.

Йдемо далі, наступну програму, яку розглянемо - це мною улюблений фотошоп, хоч я і використовую його на 10%, він мені страшно подобається, впевнений, що незабаром знайду час, щоб вивчити його глибше 🙂

Оптимізація картинок за допомогою Adobe Photoshop за 5 хвилин + зменшення ваги картинки

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

Щоб перевірити, скільки важить вся графіка вашого шаблону, пройдіть за адресою wp-content / themes / назва теми /, і папку «images» скопіюйте до себе на ПК. Дізнавшись вага, ви вже будете орієнтуватися, нуж але чи оптимізувати дані зображення чи ні.

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

Тут йдемо тим же шляхом, пкм на зображенні - відкрити за допомогою - adobe photoshop. Я використовую Adobe Photoshop CS5.

Моє фото виглядає наступним чином і має вагу 313 кб.

Після відкриття відразу тиснемо файл - зберегти для web і пристроїв.

Нам відкривається віконечко наступного плану:

Задаємо такі настройки:

1. Вказуємо формат картинки. Для сайтів це часто формати: jpeg і png (png має прозорий фон)
2. Можна вибрати пропоноване якість.
3. У третьому пункті ставимо «прогресивний».
4. Повзуночки можна зменшити або збільшити якість зображення, попередній перегляд є, тому пограйте повзунком і підберіть оптимальне співвідношення ваги і якості.
5. Подгоните розміри, припустимо, якщо у вас фото 1000 × 500, то є сенс зменшити його! Мені в текст відмінно вписуються розміри 620 і менше по ширині, і по висоті необмежено.
6. Вікно для відстеження ваги картинки.
7. Після всіх налаштувань натискайте «зберегти» і вказуйте, куди зберігати картинку.

З перерахованого вище, я використовую тільки фотошоп і програму снегіт. Цього мені цілком вистачає.

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

Як вам стаття? Можете підписатися на оновлення блогу і бути в курсі його новостей.

Взагалі, я рекомендую вам почати вивчати програму Adobe Photoshop, знаючи її, ви не пропадете, вона буде вас годувати і працювати можна буде віддалено, не виходячи з дому. Якщо не знаєте з чого почати, почніть з відеокурсів, у мене дівчина вчилася за курсом Зінаїди Лук'янової "Фотошоп з нуля в відеоформаті" їй дуже сподобалося і зараз вона вдосконалює свої знання.

Купуючи курс по моїй партнерської посиланню, я поверну вам 50% своїх комісійних, а це - 240 рублів. Для повернення, пишіть в тех. підтримку через зворотний зв'язок.

А як ви оптимізуєте картинки? Може поділіться ще смачними методами? Із задоволенням почитаю в коментарях.

Це щось!

З повагою, Михед Олександр.