엣지, Firefox가 잇따라 대응하고 남은 것은 사파리의 웹P뿐이다.
이렇게 주류를 제패하고 올해는 웹P 원년이길...!살며시 기도하다.
따라서 기존 웹 이미지를 WebP로 간단하게 시뮬레이션할 수 있는 도구를 만들었습니다.

WebP 가져오기 시뮬레이터

URL을 입력하면 이 느낌으로 보고서 페이지가 생성됩니다.
데이터의 경량화가 얼마나 충격적인지, 각 이미지의 화질이 어떻게 나올지 조사할 수 있다.

실제 보고는 다음과 같다.
https://sim.lightfile.net/webp/reports/e1af4b66-4029-418e-acf2-ac9964b7cb05

많은 사이트의 이미지 데이터가 절반도 안 된다

위에서 도쿄올림픽·장애인올림픽의 페이지를 예로 들면 이미지 데이터량이 1/3 정도이다.
Jpeg에서 WebP로의 전환은 표준-q 75이다.
확실히 자세히 보면 화질이 좀 떨어진다고 할 수 있다.
다만, 이 정도 화질을 낮추면 -7.58MB를 줄일 수 있다면 좋지 않을까요?자기가 그렇게 생각할 거야.
PNG와 GIF는 무손실 변환이어서 화질이 전혀 떨어지지 않았다.
예를 들어 도요타 자동차의 홈페이지도 웹P를 도입하는 효과가 있다.
WebP 도입 보고서 - 6.1% | 도요타 자동차 사이트
https://sim.lightfile.net/webp/reports/9c86718a-3bc7-4966-b633-9dfe45bedd3d

이 정도의 성과가 나온 사이트는 곳곳에서 찾아냈다.
WebP 대단해!
그래서 여러분의 사이트와 고객의 사이트도 시도해 볼 수 있다면 저는 매우 기쁠 것입니다.

큐브

읽기 시간, 천메가 절약, 클라우드 요금의 지표는'응~?'이런 느낌도 있지만 홍보의 도구이기도 하니 용서해 주세요^^;
또 트위터 등 외부 참조 이미지도 결합 시뮬레이션 등을 통해 아라도 눈에 띄지만 조금씩 개량한다.

어떻게

모처럼 Qita, 사용하는 기술을 소개해 드리겠습니다.
사용자가 많지 않으면 기본적으로 무료로 보낼 수 있도록 제작된 클라우드 로컬 구조다.

데이터 저장소

S3

DynamoDB

SQS

시뮬레이션 결과는 DynamoDB, 캡처, WebP 변환된 이미지 등을 S3에 저장합니다.
실제 시뮬레이션은 폐쇄된 환경의 작업자 중에서 이루어지기 때문에 그 작업 대기열에서 SQS를 사용했다.

스태프

Puppeteer

cwebp 명령

Puppeeteer에서 시뮬레이션을 진행하여 실제 다운로드한 이미지 데이터를 포착하여 WebP로 변환합니다.
이 근처가 제일 무거운 곳이지만 싸게 해결하고 싶어서 사무실에서SQS를 통해 작업을 수신하고 시뮬레이션합니다.

프런트엔드

Vue.js

AWS SDK

Chart.js

제한된 IAM 사용자는 AWS 리소스에 직접 액세스할 수 있습니다.Vue.js에서 렌더링과 상호작용을 실현합니다.

웹 호스트/SSR

S3

CloudFront

Lambda@Edge

S3부터 최대한 간단하게 정적 파일로 보내서 해결하려고 했는데 공유 기능을 구현하고 싶어서 SSR을 조금 썼어요Lambda@Edge하고 있어.
그렇긴 하지만 루트 보조의 간단한 URL 리셋과 타이틀 탭과 OGP만 바꾸면 쉽게 준비할 수 있습니다.
Vue.js + Lambda@Edge마음에 들어요.

공유 이미지

기술적으로 중시하는 것은 공유 이미지의 생성 부분이다.
Puppeeteer에서 실제 보고 화면에서 상부의 요약 부분을 잘라 OGP 이미지로 재활용합니다.