요즘 사진의 픽셀이 늘어남에 따라 HD, Full HD, Ultra HD와 같은 사진의 크기가 날로 커지고 있습니다. 큰 사진은 사진을 보는 사람들에게 좋지만 사진을 표시하는 웹이나 앱은 큰 이미지를 렌더링하기 위해 더 많은 네트워크 I / O가 필요합니다.
큰 이미지를 렌더링 할 때 다음과 같은 문제가 발생할 수 있습니다.
이미지가로드되는 동안 잘린 이미지가 보일 수 있습니다.
이미지를로드하면 웹 페이지의 전체 속도가 느려질 수 있습니다.
먼저 지연 로딩 방법을 사용하여 이미지가로드되는 동안 잘린 이미지가 표시되지 않도록 할 수 있습니다. 이것은 이미지가 렌더링 될 준비가 될 때까지 비교적 작은 미리로드 된 이미지를 표시하고 이미지가로드 중임을 사용자에게 알리는 방법입니다.
그러나 지연 로딩 방법은 웹 페이지의 속도 저하를 해결하지 못합니다. 속도 문제를 해결하려면 이미지 크기 자체를 줄여야합니다. 그렇게하기 위해 생각할 수있는 두 가지 주요 방법이 있습니다.
이미지 자체의 너비와 높이를 줄이는 사이트
이미지를 압축하는 사이트
일반적으로 이미지 너비와 높이는 위와 같은 방식으로 축소되거나 이미지가 압축됩니다. 그러나 너비와 높이를 조정할 수 없거나 이미지의 품질을 고려하면이 두 가지 방법이 마음에 들지 않을 수 있습니다.
가장 현명한 방법은 이미지의 크기를 변경하지 않고 품질을 저하시키지 않는 압축 알고리즘을 사용하는 것입니다. 그러나 이러한 압축 알고리즘의 경우 대부분은 용량을 크게 줄일 수 없습니다.
그래서이 글에서 소개 할 것은 압축 성능을 그대로 유지하면서 압축 성능을 극대화하는 .webp라는 이미지 파일 형식과 일반 이미지 (jpg, png, gif, bmp)를 webp로 변환하는 사이트입니다.
webp 이미지 파일은 Google에서 개발 한 웹 이미지 형식입니다. 나는 그 이름이 웹 사진에서도 가져온다는 것을 알고 있습니다. 이 파일 형식을 사용하면 이미지 품질을 그대로 유지하면서 파일 크기를 획기적으로 줄일 수있어 웹 페이지 로딩 속도에 크게 도움이됩니다.
그러나 .webp 이미지 형식의 단점은 이전 브라우저에서 인식되지 않는다는 것입니다. 이 문제를 해결하기 위해 많은 사이트에서 일반 이미지 파일과 webp 파일과 동일한 두 개의 이미지를 가지고 있으며, webp를 지원하지 않는 브라우저에 일반 이미지를 노출시키는 방법을 사용하고 있습니다.
Google은 일반 이미지를 webp로 변경하는 코드와 도구를 제공하지만 몇 가지 편리한 사이트를 소개합니다.
Image To Webp
- 한 번에 여러 이미지 변환 : 제한 없음
- 사용자 친화적 인 UX / UI : 좋음
- 이미지 변환 속도 : 매우 빠름
- 국가 별 언어 지원 : 예
Tiny Img
- 한 번에 여러 이미지 변환 : 최대 10 개
- 사용자 친화적 인 UX / UI : 좋음
- 이미지 변환 속도 : 느림
- 국가 별 언어 지원 : 지원되지 않음
Webp Converter
- 한 번에 여러 이미지 변환 : 불가능
- 사용자 친화적 인 UX / UI : 좋음
- 이미지 변환 속도 : 빠름
- 국가 별 언어 지원 : 예
결론
새로운 압축 알고리즘을 적용하여 이미지 크기와 webp를 줄이는 방법을 배웠습니다. 또한 다양한 이미지를 webp로 변환하는 3 개의 사이트를 소개했습니다. 질문이나 우려 사항이 있으면 의견을 보내주십시오.