Оптимизация изображений для сайта

Оптимизация изображений для сайта

Пришло время порадовать вас новыми невероятными обновлениями. В Gridbox добавлены новые инструменты оптимизации изображений для сайта, такие как отложенная загрузка, адаптивные изображения и поддержка WebP.


В Gridbox выпущен инструмент автоматического сжатия изображений, который автоматически изменяет размеры и уменьшает ширину и вес изображения. В сегодняшнем обновлении мы хотим представить вам новые инструменты, которые позволяют оптимизировать изображения для повышения производительности страницы.

Ленивая загрузка изображений

Ленивая загрузка - это потрясающая техника, которая загружает картинки на веб-страницу асинхронно. Изображения начинают загружаться только тогда, когда они появляются в окне просмотра браузера.


В Gridbox картинки начинают загружаться на один экран раньше. Посетитель не увидит процесс загрузки изображения. Такую же технику мы используем в галерее Balbooa Joomla.


Для включения отложенной загрузки в Gridbox откройте « Настройки сайта » >> вкладку « Производительность » и установите флажок « Ленивая загрузка изображений ».

Оптимизация изображений для сайта

Lazy Load в Gridbox работает для всех плагинов Gridbox и всех типов картинок. Все, что вам нужно, это просто включить и получать удовольствие от более быстрого времени загрузки страницы.

Адаптивные изображения

Функция Adaptive Image направлена ​​на повышение производительности сайта на мобильных устройствах. Основная идея «Адаптивных изображений» заключается в отображении уменьшенной версии изображения для экранов меньшего размера.


Gridbox автоматически генерирует 5 версий изображения для каждого размера экрана мобильного устройства и отображает соответствующую версию. Ширина создаваемого изображения зависит от настроенных точек останова. Вот пример:


  • Оригинал: 3726 x 2494 пикселей (684 КБ)
  • Сжатый: 1440 x 963 (107 КБ)
  • Планшетный планшет: 1024 x 685 пикселей (56 КБ)
  • Портрет планшета: 768 x 514 пикселей (32,5 КБ)
  • Телефонный пейзаж: 667 x 446 пикселей (24,7 КБ)
  • Телефонный портрет: 375 x 251 пикселей (8,88 КБ)

Как видите, с помощью функции «Адаптивные изображения» вы можете значительно повысить производительность, страницы будут загружаться быстрее на мобильных устройствах.

Оптимизация изображений для сайта

Адаптивные изображения в Gridbox выпускаются как часть инструментов «Сжатие изображений», поэтому перед включением функции «Адаптивные изображения» необходимо включить сжатие изображений.

Формат изображения WebP

WebP - это современный формат изображений Google, который обеспечивает сжатие без потерь и с потерями для изображений в Интернете. По сравнению с форматами JPG и PNG, WebP обеспечивает меньший размер с тем же качеством. Кроме того, WebP поддерживает прозрачность и анимацию, поэтому WebP может заменить JPG, PNG и GIF.


Gridbox полностью совместим с форматом WebP, вы можете загружать изображения и анимации WebP в медиа-менеджер Gridbox и использовать их для своих страниц и постов в блоге. Кроме того, Gridbox Photo Editor работает с форматом WebP, не стесняйтесь редактировать изображения WebP прямо в Gridbox.


Прежде чем начать загрузку изображений WebP, обратите внимание, что вам необходимо добавить WebP в качестве разрешенного типа файла в параметрах Gridbox (Gridbox Admin >> Параметры >> Разрешенные типы файлов).

Оптимизация изображений для сайта

Для совершенно новых установок Gridbox WebP добавляется по умолчанию.

WebP и кросс-браузерная совместимость

Прежде чем вы начнете использовать WebP в своих веб-проектах, вы должны знать, что формат изображений WebP полностью совместим с Google Chrome, Firefox, Opera и Microsoft Edge.

 

Браузер Safari на данный момент не поддерживает WebP. Но поскольку во всех современных браузерах добавлена ​​поддержка WebP, вполне возможно, что Safari также скоро начнет поддерживать WebP.

Конвертировать в WebP с помощью Gridbox

В Gridbox добавлена возможность конвертировать ваши JPG и PNG в формат изображений WebP!

 

Чтобы преобразовать изображение в формат WebP, вам нужно сохранить изображение как копию в Gridbox Photo Editor и установить флажок « Сохранить как WebP ».

Оптимизация изображений для сайта

Нет причин использовать сторонние инструменты для преобразования изображений. Все, что вам нужно, это внутри Gridbox!

Рейтинг 5

Теги страницы

Это интересно