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

Покажчик змісту

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

оптимізації

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

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

  • Візуально: Якість зображень також дуже важлива візуально. Веб-сайт або блог, які мають якісні зображення, дадуть серйозний імідж чи професіоналізм нашого бізнесу, щось дуже важливе, враховуючи високий рівень конкуренції в мережі.

Добре знати різні формати, які існують.

  • PNG: Це найбільш ідеальний формат для зображень на нашому веб-сайті, особливо для логотипи, зображення з великим білим фоном, геометричні та плоскі кольори, і в основному для зображень без фону (прозорий фон). Це формат зображення без втрат, тому навіть якщо він не зменшить вагу настільки ж, як JPG, якість буде вищою.

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

  • GIF: Це дещо застарілий формат, він лише був анімація.

  • EPS/SVG: Важливість векторні зображення це стає дедалі помітнішим. Їх можна наносити на піктограми та логотипи та бути масштабованим до будь-якого розміру або роздільної здатності, не втрачаючи жодної якості, оскільки векторний формат складається з ряду математичних атрибутів, які сприяють цьому, порівняно з попередніми форматами, які є растровими форматами, що складаються з пікселів.


ПРИМІТКА : При збереженні за допомогою опції Переплетений (якщо це PNG) або Прогресивний (якщо це JPG), ми робимо завантаження в Інтернеті прогресивним, тобто воно відображається з низькою роздільною здатністю, і в міру завантаження різкість покращується. Якщо ми не виберемо цю опцію, зображення буде відображатися у міру завантаження, що може бути не так добре візуально.

Існує кілька варіантів оптимізації наших зображень.

Основні програми для ретушування фотографій та дизайну, такі як Photoshop та Illustrator, дають вам можливість Зберігайте безпосередньо в Інтернеті, На панелі, що відкривається, ми вибираємо різні варіанти, якості та формати, з попереднім переглядом, який допомагає нам дізнатися кінцеву вагу та її якість (чіткість). У цих двох програмах ми знаходимо його у меню Файл> Зберегти для Інтернету ...

Існує кілька конкретних програм для встановлення на ПК або MAC для зменшення ваги зображень. Ми залишаємо вам по одному для кожної операційної системи:

Погроми (ПК)

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

Програма підтримує багато форматів зображень, серед них PSD Photoshop, але ми можемо зберегти результат лише у трьох типах: JPEG, GIF та PNG.

Оптимізуйте зображення, тому вони займають менше місця на диску та швидше завантажуються, знаходячи кращі налаштування стиснення та видаляючи непотрібні коментарі та кольорові профілі. Підтримує PNG, JPEG та анімовані GIF-файли.

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

Є кілька веб-сайтів, де ми можемо зменшити вагу наших зображень до 90%, не втрачаючи якості. Ми рекомендуємо ці 3 сайти:

Ви стискаєте та оптимізуєте безпосередньо з Інтернету, і підтримує 4 типи форматів, найпоширеніші: JPEG, PNG, GIF та SVG. У вас є два варіанти: Lossless, який достовірно підтримує якість зображення, хоча це не зменшує вагу до максимуму, та Lossy, який зменшує зображення до 90%, хоча це трохи знижує якість зображення. Ми повинні оцінити, який варіант нас найбільше цікавить.

Спеціалізується на Стиснення JPG та PNG (відповідно).

TyniPNG використовує інтелектуальний тип стиснення Lossy, щоб зменшити розмір файлів PNG, зменшуючи кількість кольорів на зображенні, так що для цього потрібно менше байтів пам'яті. Це його ледве видно, але різниця в розмірах велика. Повністю зберігає прозорість фону.
ПРИМІТКА. Він має плагін для WordPress та Photoshop.

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

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

Крім того, він має Варіант професійного рахунку, який постачається з деякими додатковими елементами: стискайте зображення за допомогою URL-адреси, вибирайте розмір ширини та висоти після стиснення, завантажуйте файли розміром до 16 МБ та хмару для доступу до ваших файлів з будь-якого місця.

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

Найвідоміший завдяки автоматичному зменшенню розміру зображень вашого веб-сайту. Він заснований на API Smush it від yahoo та робить все автоматично, Вам просто потрібно встановити його, і кожне завантажене вами зображення буде автоматично оптимізовано. Якщо ви вже завантажили зображення під час його встановлення, він має можливість оптимізувати їх усі одним клацанням миші.

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


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

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

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