Неодноразово я говорив з вами про важливість якнайшвидшого завантаження вашого веб-сайту, щоб запобігти вашим клієнтам втомитися чекати і переходити на веб-сайт конкурента.
Є кілька факторів, які ви повинні оптимізувати і які впливають на швидкість завантаження веб-сайту.
Серед них одне, що я вважаю дуже важливим, - це те, щоб кожне із зображень на вашому веб-сайті було правильно оптимізовано.
Сьогодні я хочу показати вам 17 способів зменшити розмір та стиснути фотографії для вашого веб-сайту, таким чином, щоб у вас більше ніколи не виникало проблем, через які зображення на вашому сайті вічно відображаються вашим користувачам або потенційним клієнтам (разом із як наслідок ризик того, що вони підуть так само швидко, як і прийшли).
Покажчик змісту
Що таке оптимізація зображень для Інтернету?
Процес оптимізації зображення полягає у зменшенні як їх розмірів (ширини та висоти), так і ваги (що займає в МБ або КБ), з тим, щоб час завантаження вашого веб-сайту був якомога коротшим.
Все це, звичайно, без впливу на якість зображення (принаймні неозброєним оком).
Марно зменшувати розмір або стискати фотографії для вашого веб-сайту, якщо вони бачаться неякісно, що значно погіршує ваш імідж або імідж вашого бізнесу.
Побачимо це на більш практичному прикладі.
Уявіть, що у вас є фотографія розміром 4000 х 2000 пікселів вагою 4 МБ, і ви хочете розмістити її на своєму веб-сайті.
А тепер уявіть також, що насправді це зображення на вашому веб-сайті буде мати розмір 300 х 150 пікселів.
Як бачите, різниця у розмірах (а отже, і у вазі) значна.
Якщо ви розмістите зображення на своєму веб-сайті в оригінальних розмірах, ви б змусили комп’ютер користувача, який його відвідує, завантажити 4 МБ, щоб побачити фотографію розміром 300 х 150 пікселів.
Вага та час завантаження, наприклад, для користувача, який відвідує вас зі смартфона, є справжнім обуренням та непомірним споживанням даних.
Це може бути навіть для іншого, хто заходить на ваш веб-сайт із настільного комп’ютера та звичайної лінії ADSL.
Це схоже на те, що ви заходите в Інтернет, і зображення завантажується як «по шматочках» і дуже повільно?
Не кажучи вже про те, що зображення, настільки зменшивши його в розмірі без попередньої оптимізації, може спотворитися.
Або, що те саме, втратити якість візуально кажучи.
Погано розмістити дуже велике зображення у дуже маленькому розмірі, як дуже маленьке зображення у дуже великому розмірі.
Як бачиш, стиснення ваших фотографій без втрати якості є необхідним і важливим для успіху вашого веб-сайту.
Якщо з усього цього, що я розповів вам, ви починаєте усвідомлювати серйозну проблему не зменшення розміру та ваги всіх зображень на ваших веб-сторінках, я впевнений, що питання, яке ви задаєте собі на даний момент, полягає в наступному.
Як можна зменшити розмір своїх зображень та фотографій?
Для оптимізації зображень чи фотографій веб-сторінок у вас є три варіанти.
1 # Програми графічного дизайну або ретуші фотографій
Існує кілька програм (як платних, так і безкоштовних), за допомогою яких ви можете оптимізувати зображення для свого веб-сайту простим та ефективним способом.
За допомогою них ви можете встановити розміри, необхідні для будь-якої фотографії, яку ви хочете вставити у свій проект.
Але це не найкраще. Є ще одна цікава річ.
Ці програми, як правило, мають опцію "Зберегти для Інтернету" (або будь-яку іншу з подібною назвою), що дозволить вам значно зменшити вагу зображень, практично не втрачаючи якості залежно від параметрів оптимізації, які Ви хочете позначити перед збереженням.
2 # Інтернет-інструменти для стиснення фотографій або зображень
Це рішення пропонується багатьма різноманітними сайтами, які ви можете знайти в Інтернеті і на яких ви можете виконати це завдання без необхідності встановлювати будь-який тип програмного забезпечення на свій комп’ютер.
Деякі з них дуже повні та пропонують широкий спектр можливостей для оптимізації ваших зображень чи фотографій дуже інтуїтивно зрозумілим, практичним та простим способом.
Звичайно, майже всі вони зосереджувались на тому, щоб їх використовували будь-які користувачі, незалежно від знань, якими вони володіють у цьому виді завдань графічного дизайну або ретуші фотографій.
3 # Плагіни для оптимізації зображень у WordPress
В черговий раз WordPress з’являється в нашій допомозі для виконання необхідних завдань практично для кожної веб-сторінки у світі.
Завдяки встановленню певних плагінів, запрограмованих для цього чудового менеджера вмісту, ви можете оптимізувати свої зображення, щоб зменшити їх розмір та покращити час завантаження вашого веб-сайту.
"Добре Хосе. Але мені потрібно щось конкретніше, ніж ця загальна класифікація ".
Не хвилюйся, я не збираюся залишати тебе з медом на вустах.
Продовжуйте читати, і ви відкриєте кілька інструментів (деякі платні, а інші безкоштовні) для стиснення розмірів та ваги ваших зображень.
ОНОВЛЕННЯ (24.01.2020). Окрім інструментів, які ви знайдете нижче, Я залишаю вам відео пояснення того, як ви можете зменшуйте розмір зображень та стискайте фотографії, щоб зменшити як розмір, так і вагу і що вони ідеально підходять для вашого веб-сайту.
Відео включає можливість зробити це як за допомогою Photoshop, так і за допомогою одного із згаданих нижче інструментів, який є онлайн і абсолютно безкоштовним. Почніть з сьогоднішнього дня і не залишайте це на завтра!
Програми, безкоштовні онлайн-інструменти та плагіни, за допомогою яких ви можете стискати фотографії для своїх веб-сторінок
1 # Photoshop
У цьому списку не могла не бути провідної у світі програми для редагування фотографій.
За допомогою Adobe Photoshop ми можемо зменшити розмір будь-якого знімка чи ілюстрації, які ми хочемо представити на нашому веб-сайті, за допомогою опції Зображення - Розмір зображення.
Після налаштування розміру та для оптимізації як ваги, так і якості зображення, яке ми збираємось завантажити на наш веб-сайт, нам залишається лише натиснути Файл - Зберегти для Інтернету, щоб вибрати формат, в якому буде збережено наш оптимізований файл або бажана якість, виходячи з наших інтересів.
Не знаю, чи хотіли б ви, щоб я зробив покроковий підручник про те, як це зробити, і заглибитися у варіанти, запропоновані параметром «Зберегти для Інтернету». Якщо так, залиште мені коментар у цій публікації, і я буду пам’ятати про це на майбутнє. 😉
Логічно, що "але" цього програмного забезпечення полягає в тому, що воно платне. Але якщо ви не хочете витратити жодного євро на програму такого типу, наступне рішення, яке я вам запропоную, може вам допомогти.
2 # Gimp
Ще одна програма, схожа на Photoshop, з тією різницею, що ви можете завантажити її з його веб-сайту абсолютно безкоштовно.
Він має точно такі ж параметри, про які згадувалося вище в програмі Adobe, тому вам просто потрібно виконати ті самі дії, що і у Photoshop, щоб ваші зображення були ідеально оптимізовані.
3 # Web Resizer
Web Photo Resizer пропонує нам повну послугу оптимізації зображень для нашого веб-сайту ... та ще щось.
За допомогою цього онлайн-інструменту ви можете не лише стискати фотографії, щоб зменшити час завантаження вашого веб-сайту, але він також має інші додаткові опції, такі як обертання зображення, зміна експозиції, контрастності або насиченості цих зображень і навіть додавання меж кольору, що хочеш.
Без сумніву, це дуже повний інструмент для зменшення розміру або стиснення фотографій.
4 # ReducePhotos.com
Ще один дуже корисний онлайн-інструмент, за допомогою якого можна стискати фотографії та зменшувати їх розмір з можливістю експорту в різні формати, такі як JPG, PNG і навіть PDF.
Він також має велику кількість додаткових опцій, таких як обрізання, зміна розміру, обертання, гортання, малювання геометричних фігур або додавання текстів до наших зображень.
5 # Оптимізатор зображень
Надзвичайно простий у використанні. Ось як можна визначити цю іншу утиліту для зменшення розміру зображень на вашому веб-сайті.
Все, що вам потрібно зробити, - це завантажити фотографію, вибрати бажану якість, максимальну ширину та висоту та натиснути кнопку, щоб оптимізувати зображення, щоб завантажити його на ваш комп’ютер.
Дуже просто, правильно?
6 # TinyPNG
Цей інструмент дозволяє нам з вашого веб-сайту завантажувати до 20 файлів одночасно максимум 5 МБ кожен і стискати їх вагу (не їх розміри).
Хоча на перший погляд це може здатися дещо обмеженим, правда полягає в тому, що це, безсумнівно, одне з наймогутніших, що існують сьогодні.
Це пов’язано з тим, що він вибірково зменшує кількість кольорів у зображенні, не змінюючи його розміри за допомогою типу стиснення, що називається «з втратою».
Крім того, TinyPNG пропонує вам можливість завантажити безкоштовний плагін для WordPress та платний для Photoshop.
Що ще мені потрібно, щоб я почав цим користуватися?
Звичайно, він більше зосереджений на файлах PNG. Щодо JPEG, дивіться наступне.
7 # TinyJPEG
Від тих самих творців, що і попередній інструмент, з тими ж можливостями і лише з однією відмінністю: орієнтований на файли JPEG.
8 # Compressor.io
Ще один інструмент для стиснення фотографій та зображень надзвичайно простим, професійним способом із вашого веб-сайту без необхідності завантажувати чи встановлювати будь-яку програму на комп’ютері.
У вас є можливість експортувати до 4 форматів (JPEG, PNG, GIF та SVG) та 2 типи стиснення під назвою Lossless і Lossy.
Різниця між одним та іншим полягає в тому, що перший тип надає перевагу оптимізації якості зображення, навіть незважаючи на те, що отриманий файл більший, а другий дозволяє зменшити розміри до 90% ціною якості. зменшення зображення ще трохи.
9 # Smush.it
Я вже розповідав вам про цей інструмент раніше ... ви пам’ятаєте?
Smush.it (або WP-Smush) - це плагін для зменшення розміру або стиснення фотографій у WordPress. Напевно, один із найвідоміших і використовуваних для цього сьогодні.
Гарна річ цього плагіна полягає в тому, що нам залишається лише встановити його на нашому веб-сайті, і лише він буде виконувати всю роботу з оптимізації кожного разу, коли ми завантажуємо зображення на наш веб-сайт.
Звичайно: це лише зменшує вагу даної фотографії, а не розміри.
10 # Kraken.io
Як і Compressor.io, Kraken дозволяє стискати ваші фотографії між типами стиснення Lossless та Lossy.
Kraken.io полегшує вам це завдання завдяки своїм різним стратегіям зміни розміру завантажуваних зображень, а також дозволяє встановити фіксовану ширину та висоту, щоб оптимізація була ідеальною.
11 # ImageOptim
Це програма для завантаження для користувачів Mac, і для її використання потрібно встановити її на свій комп’ютер.
Особисто я не пробував, оскільки не маю (поки що) жодного обладнання Apple. Але з того, що я бачив в Інтернеті, це дуже простий і потужний інструмент для стиснення фотографій.
До того ж це абсолютно безкоштовно. Що ще ти можеш хотіти?
12 # Shrink O’Matic
Ще одна високоякісна програма для завантаження для зменшення розміру та ваги зображень вашого веб-сайту.
Сказання про те, що ця програма від Adobe AIR, вже багато говорить нам про це.
Ви можете змінювати розмір фотографій JPG, PNG та GIF, крім того, що у вас є можливість повороту, назви або навіть водяних знаків зображень, які ви оптимізуєте.
13 # Оптимізатор динамічного приводу
Це надзвичайно простий онлайн-інструмент, але йому також бракує кількох варіантів, які ми маємо в інших додатках.
За допомогою Dynamic Drive Optimizer ви можете стискати фотографії вагою до 2,86 МБ. Вам просто потрібно завантажити відповідне зображення та вибрати, чи хочете ви експортувати його у форматі GIF, PNG або JPG.
Після натискання кнопки оптимізації інструмент надасть вам стиснене зображення в різних якостях.
Погана річ у тому, що ви не можете визначити ширину та висоту під час стиснення фотографії, і вам доведеться адаптуватися до того, що з цим вирішує Dynamic Optimizer.
14 # ConvertImage
Ще один дуже простий спосіб стиснення зображень.
За допомогою ConvertImage вам потрібно буде лише завантажити фотографію у свою онлайн-програму, а потім вибрати потрібний для неї відсоток стиснення.
Як недоліки, я скажу вам, що ви не можете вибирати розміри оптимізованого зображення або формат, оскільки ConvertImage експортуватиме отримані файли лише у форматі JPG.
15 # PunyPNG
Хоча PunyPNG дуже добре стискає ваші зображення у форматі JPG, PNG або GIF, правда полягає в тому, що особисто це одне з тих, що мені найбільше подобається через одне з його обмежень.
Цей онлайн-компресор зображень у своїй безкоштовній версії та без реєстрації дозволяє нам стискати зображення розміром до… 500 КБ!
Без сумніву, це те, що значно відстає від інших варіантів, про які я вже згадував у цій статті. Хоча це також правда, що він має версію Pro, яка розширює його функціональні можливості.
16 # CompressNow
Це інструмент для стиснення фотографій настільки простим, наскільки корисним і практичним.
Все, що нам потрібно зробити, - це завантажити нашу фотографію вагою до 9 МБ, вибрати бажаний відсоток рівня стиснення та натиснути кнопку «Стиснути».
Ця онлайн-служба автоматично генерує повністю оптимізоване зображення з максимально дозволеним розміром, виходячи із вказаного вами відсотка та зберігаючи пропорції.
17 # Зменшити картинки
Повний інструмент в Інтернеті, який дозволяє зменшити розмір ваших фотографій з дуже невеликою втратою якості.
У ньому є безліч варіантів стиснення фотографій, які повністю адаптуються до ваших потреб.
Ці параметри включають наступне: вибрати максимальну ширину фотографії в пікселях або у відсотках, можливість застосування спеціальних ефектів до отриманого файлу або визначення кінцевого ступеня якості стиснутої фотографії.
До кінця…
Це лише деякі з багатьох інструментів зменшення розміру фотографій або стиснення фотографій без втрати практично будь-якої якості.
Я розповів вам про ті, які я знаю, але я впевнений, що якщо ви будете шукати в Google, ви знайдете ще багато таких, які чудово підходять для будь-якої вашої потреби.
Прочитавши цю статтю, я впевнений, що зображення чи фотографії на вашому веб-сайті ніколи не завантажуватимуться вічно.
Чи знаєте Ви ще якісь інструменти, які, на Вашу думку, повинні бути в цьому списку?
Смійте залишити мені свій коментар трохи нижче, і ми продовжуємо розмову.