Оновлено в неділю, 14 червня 2020 р

wordpress

Покращити завантаження зображень на веб-сайтах WordPress

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

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

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

Банер - WordPress: оптимізуйте вагу веб-зображень

Примітка 1: Ми завжди говоримо про зображення в Інтернеті або на цифровому носії, а не про друк.

Індекс

  1. Деталі малюнків: розмір, роздільна здатність, вага
  2. Приклади: камера та швидкість передачі даних
  3. Програми, інструменти, поради та плагіни
    - Програми для редагування зображень (Mac/Windows): змініть розмір
    - Інтернет-інструмент: для стиснення (зменшення) ваги
    - Порада "AyudaWP": зменшіть розмір WordPress
    - Плагіни WordPress: для стиснення (зменшення) ваги зображень
  4. Відео-посібник
  5. Думка

Деталі малюнків: розмір, роздільна здатність, вага

Примітка 2: Ця стаття призначена для того користувача, який не розуміє важливості Інтернету у питаннях фотогалерей.

Розмір

960 x 720 пікселів (рекомендовано макс.).

Веб-роздільна здатність

72 dpi (відповідно до розміру пікселів).

Середня вага на зображення

Приблизно 150 КБ (уникайте МБ), якщо це формат JPG (формат PNG важить більше, але має менші втрати якості та використовується для прозорих плівок та плоских зображень, а також текстів).

Приклади: камера та швидкість передачі даних

Камера

Вони обробляють у пікселях розмір і вони з одного дозвіл 72 точок на дюйм:
- 12 мегапікселів = 4000 х 3000 пікселів (цей розмір потрібно зменшити до 960 х 720 пікселів макс.) З вагою прибл. 4 МБ (зменшити приблизно до 150 КБ)

План даних

Зазвичай для мобільних пристроїв або планшетів вони обробляють певні вага, Виражене в:
- 1 Гб = 1000 Мб (найнижча швидкість передачі даних).
Інші показники даних:
- 1 МБ = 1000 КБ (зверніть увагу на цю вагу КБ, яку ми побачимо нижче).
- 1 КБ = 1000 Б.

Ми повинні отримати, щоб наші фотографії мали менше 1 Мб. Ідеальним буде менше 150 КБ, беручи до уваги розмір, який я навев як приклад у цій статті: 960 x 720 px, роздільна здатність: 72 dpi та формат: JPG.

Програми, інструменти, поради та плагіни

Редагування програм
За потреби змінити розмір (пікселі).

Інтернет-інструмент
Для подальшого стиснення (зменшення) ваги та збереження якості (формати JPG, PNG).

Порада «Довідка WordPress»
Виключіть певні розміри за замовчуванням, встановлені WordPress.

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

Примітка 3: Хороша заміна плагінів галереї зображень, це буде власна галерея WordPress, і якщо у вашої теми немає спливаючих вікон для презентації зображень, є плагін, який має, Responsive Lightbox.

Програми для редагування зображень (Mac/Windows): змініть розмір

За потреби змінити розмір (пікселі). Безкоштовні програми .

Попередній перегляд (Mac).

- Змінити розміри (розмір) зображення:
Відкрийте будь-яку фотографію за допомогою "Попередній перегляд"> Інструменти> Налаштування розміру> Розміри зображення.

Попередній перегляд - приклади параметрів (натисніть, щоб збільшити)

1-й. Придатний для: Спеціальний (пікселі).
2-й. Ширина: 960/Висота: 720 (пікселі).
3-й. Роздільна здатність (dpi): 72 (пікселі/дюйм).
4-й. Шкала пропорційно (так).
5-й. Зразок зображення (так).
6-й. Прийняти.

- Збережіть зображення у форматі JPG (JPEG), PNG або інших форматах:
Файл> Експорт> Експортувати як (виберіть ім'я)> Папка для збереження (Робочий стіл)> Формат (що завгодно)> Зберегти.

Gimp (Mac/Windows/Linux).

- Змінити розміри (розмір) зображення:
Відкрийте будь-яку фотографію за допомогою "Gimp"> "Зображення"> "Масштабуйте зображення".

Gimp - Приклад параметрів

1-й. Ширина: 720/Висота: 960 (px).
2-й. Роздільна здатність (dpi): 72 (пікселі/дюйм).
3-й. Інтерполяція: кубічна.
4-й. Шкала (OK).

- Збережіть зображення у форматі JPG (JPEG), PNG або інших форматах:
Файл> Експортувати як> Ім'я> Зберегти в папці: Робочий стіл> Виберіть тип файлу (Розширення: .jpg або .png)> Якщо ми вибрали PNG, ми отримаємо спливаюче вікно із низкою параметрів (перекреслена позначка) > Експортувати.

Інші програми рекомендуються "Emezeta" (я не знаю, як вони діють) для стиснення (зменшення) ваги зображень.

Інтернет-інструмент: для стиснення (зменшення) ваги

TinyPNG (безкоштовно)

Веб-обкладинка, Інтернет-інструмент TinyPNG (дозволяє формат PNG та JPG)

Я використовував "TinyPNG", який дав мені найкращі результати. Внесіть 2 нюанси у форматі JPG та PNG.
- PNG: виберіть цей варіант для прозорих плівок та плашкових кольорів (логотипів). Також якщо він містить тексти.
- JPG: виберіть це, якщо це фотографія з людьми/пейзажами/тваринами.

Примітка 4. Як цікавість, цей онлайн-інструмент має плагін для WordPress, який ми побачимо в кінці статті, а також плагін для Photoshop (платно: 50 доларів).

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

Однак я дам вам посилання на 2 інших, рекомендованих "social4creative":
- Webresizer (завантажте макс. 10 МБ та інші деталі).
- Compressor.io (JPEG - PNG - GIF - SVG).

Порада від "AyudaWP": зменшіть розмір WordPress

Простий спосіб зменшити розмір WordPress.

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

Ви знайдете 2 або 3 додаткові зображення, які не завжди використовуєте.
Чи потрібно WordPress створювати ці копії?

Уникнути цього дуже просто, перейдіть до:
- WP Desktop> Settings> Media: і встановіть розмір або розміри, які ви не хочете, щоб WordPress автоматично створював, на "нуль".

Зменшіть вагу в WordPress, порада від "AyudaWP" (натисніть, щоб збільшити)

Налаштуйте розмір зображення

Те, що вони не коментують у "AyudaWP", оскільки стаття від 2013 року, - це новий варіант, який був включений, я думаю, з версії 4.3 WordPress.

Тепер, якщо ми додаємо об’єкт до нашого допису/сторінки, наприклад, зображення і клацаємо по ньому (у візуальному режимі), ми отримуємо 6 піктограм вгорі або внизу: Вирівнювання за лівим краєм, по центру, праворуч, Без вирівнювання, Змінити, Видалити.

Якщо ми натиснемо "Редагувати", ми матимемо в своєму розпорядженні "деталі зображення". Якщо ми хочемо налаштувати розмір, надто легко. Перейдіть до «Налаштування дисплея»> «Розмір»: Спеціальний розмір (ви можете спочатку ввести значення, яке потрібно, а інше значення буде коригуватися автоматично).

Плагіни WordPress: для стиснення (зменшення) ваги зображень

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

Плагін WordPress: WP Smush

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

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

Крім того, всі нові зображення, які ви завантажуєте до своїх статей, сама програма їх оптимізує.
- Джерело інформації: „social4creative“

Плагін WordPress: EWWW Image Optimizer

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

Зареєструйте зображення, які вже були оптимізовані, щоб не повторювати оптимізацію кожного разу, коли використовується цей плагін.
- Джерело інформації: „social4creative“

Плагін WordPress: стиснення зображень JPEG та PNG - TinyPNG

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

Встановіть цей плагін і отримайте свій безкоштовний ключ API із цієї адреси. За допомогою безкоштовного облікового запису ви можете стискати більше або менше 100 зображень на місяць (на основі звичайної інсталяції WordPress). Точна кількість залежить від того, скільки мініатюрних розмірів ви використовуєте ".

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

Відео-посібник

  • WordPress: оптимізуйте вагу веб-зображень
    Ми побачимо деталі, пов’язані з розміром, роздільною здатністю та вагою зображень, придатних для веб-сторінки. Кілька прикладів, щоб ви їх краще зрозуміли. І низка програм, інструментів, підказок та плагінів.

Думка

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

Вихідні зображення

Дивіться відповідний розділ на моєму Pinterest.

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