코드스테이츠 블로깅 - (Lighthouse)

Performance의 Opportunities 항목에

Properly size images 라는 것이 있는데 이미지 사이즈를 최적화하라는 의미이다

가져오는 이미지의 용량이 현재 보여지는 화면의 용량보다 크기 때문에 과도하게 많은 용량을 가져온다는 의미로 이미지의 사이즈를 줄이라는 뜻

해결 방법 

화면에 표시되는 사이즈와 실제 이미지의 용량을 일치시켜야 하는데 용량을 어떻게 줄이냐면 image cdn을 사용해야 한다

image cdn

서버로 부터 이미지를 불러오면 image를 크게하거나, 줄이거나, 직사각형을 둥글게 만들어주는 회사에 이미지를 의뢰해서 원하는 형태로 이미지를 바꾸는 방법

출처 : https://kyounghwan01.github.io/React/optimize-performance/properly-size-images/#%ED%95%B4%EA%B2%B0       

Use video formats for animated content

대용량 GIF는 애니메이션 콘텐츠 전달에 비효율적이라서 네트워크 바이트를 저장하려면 GIF 대신 MPEG4/WebM 비디오와

정적 이미지에 PNG/WebP를 사용하는 것이 좋다. 

왜냐면 대용량 GIF를 동영상으로 변환하면 사용자의 대역폭을 크게 절약할 수 있기 때문이다.해결 방법 

GIF를 비디오로 변환하는 방법 FFmpeg 을 사용한다 Fmpeg를 사용하여 GIF를 MP4 비디오로 변환하려면 콘솔에서  

ffmpeg -i my-animation.gif -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p my-animation.mp4

이 명령을 실행하면 된다 (gif 이름이 my-animation.gif 임) 

이 코드를 설명하자면 Fmpeg에 my-animation.gif를 입력으로 받아서(-i 플래그로 지정됨) my-animation.mp4라는 비디오로 변환할 것을 지시하는것을 의미한다. 

출처: https://web.dev/replace-gifs-with-videos/