Yii2 Framework용 자동 WebP 파일 생성 기능이 있는 이미지 위젯

ImgOpt는 PNG 및 JPG 파일에서 자동으로 Yii2 Framework 이미지 형식을 생성하는 WebP용 이미지 최적화 위젯입니다.

내 웹사이트를 더 빠르게 만드는 방법은 무엇입니까?

My website에는 모든 아름다운 이미지와 스크린샷이 있었지만 한 가지 문제가 있었습니다. 대부분은 PNG 형식이었고 일부는 약 200kB의 가중치를 가졌습니다. 그리고 그것은 내 웹 사이트 로딩 시간이 느렸던 시점까지 합산됩니다.

WebP 형식에 대해 찾았고 최신 브라우저에서 지원된다는 것을 읽었으며 그렇지 않은 경우(오래된 Safari 브라우저만 해당) 이를 극복하고 기본PNG 또는 JPG 이미지를 제공하는 방법이 있습니다. 완벽한.

하지만 전체 프로세스를 진행하려면 수동으로 이동하여 일종의 이미지 변환 도구를 사용하고 새 WebP 이미지를 서버에 업로드하고 내 HTML 코드를 업그레이드해야 합니다.

지옥에! 우리는 더 잘할 수 있습니다!

PNG 및 JPG를 WebP로 자동 변환

저는 이 작업을 자동화할 Yii2 위젯을 만들기로 결정했습니다.

무엇을 하는가? 다음과 같은 정적 이미지 대신:

<img src="/images/product/extra.png" alt="Extra product">

새WebP 형식의 추가 이미지(제공된 이미지가 있는 동일한 디렉토리에 있음)를 자동으로 생성하고 HTML<picture> 태그로 브라우저에 제공합니다. WebP 이미지를 지원하지 않습니다.
IMG 템플릿 내에서 HTML 태그를 다음에 대한 호출로 바꿉니다.

<?= \PELock\ImgOpt\ImgOpt::widget(["src" => "/images/product/extra.png", "alt" => "Extra product" ]) ?>

(이미지 경로는 Yii2 Framework @webroot alias에 상대적임)

일단 실행되면 위젯 코드가 즉시 새 WebP 이미지 파일을 생성하고(원본 이미지는 그대로 유지됨) 다음 HTML 코드가 생성됩니다.

<picture>
    <source type="image/webp" srcset="/images/product/extra.webp">
    <img src="/images/product/extra.png" alt="Extra product">
</picture>

브라우저는 제공된 이미지에 대한 최상의 소스를 선택하고 혁신적인 WebP 압축 덕분에 웹 사이트 로딩 속도가 빨라집니다.

설치

라이브러리를 설치하는 기본 방법은 composer을 사용하는 것입니다.

운영:

php composer.phar require --prefer-dist pelock/yii2-imgopt "*"

또는 다음을 추가하십시오.

"pelock/yii2-imgopt": "*"

require 구성 파일 내의 composer.json 섹션에.

설치 패키지는 https://packagist.org/packages/pelock/yii2-imgopt에서 사용할 수 있습니다.

Yii2 확장은 https://www.yiiframework.com/extension/pelock/yii2-imgopt에서 사용할 수 있습니다.

소스 코드는 https://github.com/PELock/yii2-imgopt에서 사용할 수 있습니다.

이미지 품질

당신이 그것에 대해 물어볼 줄 알았어! 기본적으로 변환은 원본 이미지보다 작은 WebP 파일을 생성하기 위해 100% 출력 이미지 품질에서 70%까지 모든 단계를 시도합니다.


원본 PNG(181kB)
최적화된 WebP(60kB)






생성된 WebP 이미지가 원본 이미지보다 크면 기본<img> 태그가 생성됩니다.

WebP 이미지 제공 중지

어떤 이유로 HTML<picture> 태그를 통한 WebP 파일 제공을 비활성화하려는 경우 위젯 설정별로 수행할 수 있습니다.

<?= \PELock\ImgOpt\ImgOpt::widget(["src" => "/images/product/extra.png", "alt" => "Extra product", "disable" => true ]) ?>

WebP 파일 재생성

위젯 코드는 원본 이미지가 있는 디렉토리에 WebP 이미지가 있는지 자동으로 감지합니다. 거기에 없으면 다시 만듭니다. 한 번만 수행됩니다.

어쨌든 위젯 코드를 강제로 다시 생성하려면 특수 매개변수를 위젯 코드에 전달합니다.

<?= \PELock\ImgOpt\ImgOpt::widget(["src" => "/images/product/extra.png", "alt" => "Extra product", "recreate" => true ]) ?>

모든 WebP 파일을 다시 만들고 수정하지 않고 이를 수행하려면 다음에서 위젯 소스 코드를 변경하십시오.

/**
 * @var bool set to TRUE to recreate *ALL* of the WebP files again (optional)
 */
const RECREATE_ALL = false;

에게:

/**
 * @var bool set to TRUE to recreate *ALL* of the WebP files again (optional)
 */
const RECREATE_ALL = true;

라이트박스 2 통합

Lightbox( https://lokeshdhakar.com/projects/lightbox2/ ) 친숙한 이미지를 생성할 수도 있습니다.

대신에:

<a href="/images/sunset.jpg" data-lightbox="image-1" data-title="Sunset">
    <img src="/images/sunset-thumbnail.jpg" alt="Sunset">
</a>

보다 간결한 위젯 코드로 바꿀 수 있습니다.

<?= \PELock\ImgOpt\ImgOpt::widget(["lightbox_data" => "image-1", "lightbox_src" => "/images/sunset.jpg', "src" => "/images/sunset-thumbnail.jpg', "alt" => "Sunset" ]) ?>

그리고 다음 HTML 코드를 생성합니다.

<a href="/images/sunset.jpg" data-lightbox="image-1" data-title="Sunset">
    <picture>
        <source type="image/webp" srcset="/images/sunset-thumbnail.webp">
        <img src="/images/sunset-thumbnail.png" alt="Sunset">
    </picture>
</a>

버그, 질문, 기능 요청

네가 좋아하길 바래. 질문, 버그 및 기능 요청은 내 사이트를 방문하십시오.

Bartosz Wójcik | https://www.pelock.com