브라우저에 접속하게 되면 모든 html, css, src(폰트, 이미지) 를 다운 받아 화면에 보여주게 됩니다.
이 과정에서 src, 즉 폰트나 이미지 같은 것들을 한 번에 보여주게 되는 것은 아닙니다. 이 소스들은 용량이 커서 처음부터 바로 보여주게 되면 렌더링 되는 동안 빈 화면만 출력되기 때문에 사용자가 불편함을 느끼게 되므로, 나중에 보여주게 됩니다.
어떻게 보면 편리하고 좋은 기능이지만 이러한 특징 때문에 문제가 발생되기도 합니다
위 사진 처럼 'Not' 이 중요한 의미를 담고 있는데 해당 글씨에 font가 입혀져 처음에는 전혀 다른 의미로 보이게 되므로 사용자들에게 잘못된 정보를 전달 해줄 수 있습니다.
이러한 문제가 발생되지 않도록 최대한 빠른 시간 내에 폰트가 보여질 수 있도록 용량이 적은 폰트를 사용하거나, 주요 텍스트에만 적용되어 있는 서브셋폰트(경량화폰트) 를 사용합니다.
위 사진의 폰트들의 size를 보면 폰트의 확장자마다 용량이 차이가 나는 것을 알 수 있습니다. 때문에 압축률이 높은 폰트 확장자를 사용해주는 것이 좋습니다.
이미지 webp 확장자
webp 확장자는 구글에서 만든 이미지 포맷입니다.(웹피라고 부릅니다.) png, jpeg와 같은 이미지 확장자입니다
구글에서는 왜 webp 확장자를 만들었을 까요?
구글은 전세계적으로 사용하고 있는 사이트 입니다. 구글에서만 관리하고 있는 이미지 서버만 해도 엄청난 트래픽이 있습니다.
구글은 이미지 서버의 부담을 줄이고, 서버비를 아낄 수 있는 방안으로 Webp라는 확장자를 만들었습니다.
Webp의 장점
Webp는 GIF, PNG, JPEG 확장자 모두를 대체 가능한 확장자이며 이미지를 파일을 압축했을 때 기존 PNG, JPEG보다 약 30%정도 용량을 줄일 수 있는 장점이 있습니다.
같은 이미지를 webp으로 받을시 webp은 300kb라면 png는 500kb정도 됩니다.
그리고 GIF는 256색만 표현할 수 있지만, Webp은 파일 크기도 작고 , 색상 수에 제한이 없으므로 GIF보다 훨씬 좋은 성능을 보입니다.
또한 PNG 처럼 알파 채널을 지원합니다.
알파 채널이란 배경이 투명한 것을 이야기 합니다.
Webp 확장자 변환하기
우리의 이미지 파일을 Webp 확장자로 변환시켜주이트가 있습니다.
Webp 확장자 변환 사이트 << 링크를 클릭하면 이동 합니다.
