Розмістіть правильно масштабовані зображення на своєму веб-сайті 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, ви можете отримати високоякісні зображення, які адаптуються до пристроїв ваших читачів.