JPG против JPEG2000 против WebP - PullRequest
Новая
       66

JPG против JPEG2000 против WebP

0 голосов
/ 21 декабря 2018

Я создаю свой веб-сайт с использованием React и имею несколько изображений для отображения.После выполнения аудита с использованием функции аудита Google Chrome я получил сообщение о возможности «Служить изображениям в форматах следующего поколения».

После прочтения о различных форматах (WebP, JPEG2000, JPEGXR) кажется, что каждый поддерживается только в некоторых браузерах.Например, я не могу просто конвертировать все свои изображения в WebP, потому что они не отображаются в браузере Safari.Поэтому моя проблема заключается в том, как «обслуживать» каждый тип изображения в зависимости от используемого браузера.Вот что я попробовал:

У меня есть 3 типа файлов: jpg, JPEG2000 и WebP.Каждый импортируется как: 

import Imagejpg from './path/image.jpg'
import ImageJPEG2000 from './path/image.JPEG2000'
import ImageWebP from './path/image.webp'

Затем в моем классе у меня есть массив объектов, который содержит изображения.Чтобы использовать изображения: 

 <picture>
      <source>
          srcSet={`
            ${project.Imagejpg},
            ${project.ImageJPEG2000},
            ${project.ImageWebP},
      </source>
     <img src={project.imageWebP} alt=""/>
 </picture>

Теперь, если я использую только изображение jpg, оно отлично работает во всех браузерах, так как большинство браузеров могут использовать jpg.Но я пытаюсь оптимизировать свой сайт и использовать лучшие типы файлов изображений.Есть ли способ использовать несколько типов файлов или мне чего-то не хватает?

1 Ответ

0 голосов
/ 22 августа 2019

Решение действительно в элементе <picture>, но с использованием нескольких источников.

Код с правильным синтаксисом выглядит следующим образом: 

<picture>
    <source srcSet={project.ImageWebP} type="image/webp" />
    <source srcSet={project.ImageJPEG2000} type="image/jp2" />
    <source srcSet={project.Imagejpg} type="image/jpeg" />
    <img src={project.Imagejpg} alt="" />
</picture>

Объяснение

Увидев элемент изображения, браузер загрузит первый поддерживаемый источник.Если это старый браузер, который вообще не поддерживает <picture>, он вернется к тегу <img />, имеющему источник jpeg.

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

...