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

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

Пришло время порадовать вас новыми невероятными обновлениями. В 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 (2 Голоса)
Представляем Preloader для Gridbox
Previous

Представляем Preloader для Gridbox

Оставить отзыв
Скажите «Привет» Gridbox Preloader! Joomla Website...
Читать далее
Sitemap xml генератор
Далее

Sitemap xml генератор

Оставить отзыв
Мы продолжаем улучшать SEO в Gombox для Joomla Web...
Читать далее

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

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

ТЕГИ

Популярные

Канонические URL

Канонические URL

Оставить отзыв
Представляем обновление Gridbox для Joomla Website Builder. Теперь Gridbox ...
Читать далее

Последние материалы

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

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

Оставить отзыв
Пришло время порадовать вас новыми невероятными обновлениями. В Gridbox доб...
Читать далее
Приложение Zero

Представляем приложение Zero

Оставить отзыв
Дамы и господа, представляем вам приложение Gridbox Zero с пользовательским...
Читать далее
Система проектирования Gridbox: 160 блоков страниц Gridbox

Система проектирования сайта: 160 блоков страниц

Оставить отзыв
Пришло время представить вам последнюю систему проектирования сайтов, с важ...
Читать далее

Категории

Follow us