Розміщуйте зображення з правильним масштабуванням на вашому веб-сайті WordPress або Joomla

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

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

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

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

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

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

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

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

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

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

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

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

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