Подавайте належним чином масштабовані зображення на своєму веб-сайті WordPress або Joomla

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

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

Подання масштабованих зображень на WordPress та Joomla за допомогою CSS

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

CSS допоможе з набором відносно невідомих, але безцінних атрибутів: srcset , sizes та media . Ці атрибути — усі вони підтримуються більшістю сучасних веб-браузерів — дозволяють вказати, які версії зображень обслуговувати залежно від розміру вікна перегляду.

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

Детальніше про ці атрибути ви можете прочитати тут , але хороша новина полягає в тому, що протягом останніх кількох років WordPress автоматично масштабує ваші зображення та надає читачам відповідні розміри. Результат приголомшливий: портретне зображення розміром 511 Кб на мобільних пристроях зменшено до 42 Кб.

Автоматичне масштабування та оптимізація за допомогою ImageRecycle

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

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

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

Доповненням масштабування є стиснення, яке оптимізує розмір зображення без шкоди для якості. За допомогою стиснення з втратами ви можете зменшити простір зображення до 80%. Це стосується не тільки оригінальних зображень, але й зображень, масштабованих WordPress. Ще раз ImageRecycle може зробити це автоматично за вас.

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