이미지: 성패 여부
이미지는 여러 가지 방법으로 귀하의 웹사이트를 성사시키거나 망칠 수 있습니다. 이미지가 너무 흐릿하거나 작으면 아무도 제품을 구매하지 않을 것입니다. 그러나 이미지가 너무 크면 페이지 로드 시간이 느려지고 매출도 감소합니다.
내 이미지가 너무 큰지 어떻게 알 수 있나요?
이미 1장을 읽으셨다면 라이트하우스 보고서를 작성하는 방법과 이미지가 가장 큰 문제인지 식별하는 방법을 아실 수 있지만, 라이트하우스 보고서를 실행하지 않고도 확인할 수도 있습니다.
300kb보다 큰 이미지가 있는 경우 이미지로 인해 웹사이트 속도가 느려질 수 있습니다.
이미지를 최적화하는 데 사용할 수 있는 두 가지 방법
이미지 최적화는 다소 어렵게 들릴 수 있지만 몇 번 해본 후에는 익숙해지기가 꽤 쉽습니다. 크기 조정, 파일 형식, 압축의 세 단계를 따르세요.
1단계: 크기 조정
너비가 4,000픽셀인 이미지를 업로드했지만 웹사이트에서 페이지 너비의 절반을 차지하는 작은 상자에만 표시된다면 해당 이미지의 파일 크기는 불필요하게 커집니다. 이미지를 실제로 표시되는 대로 크기를 조정하는 것이 첫 번째이자 이미지 최적화의 가장 중요한 단계 중 하나입니다.
Canva.com이나 Photoshop을 사용하면 이미지 크기를 쉽게 조정할 수 있습니다.
이미지의 크기를 잘 모르는 경우 다음 일반 지침을 따르세요.
- 웹사이트의 전체 너비에 걸쳐 있는 이미지: 너비가 1600픽셀 이하여야 합니다. 파일 크기는 400KB 이하입니다.
- 웹사이트 너비에 맞는 이미지: 너비가 800픽셀 이하여야 합니다. 파일 크기는 200KB 이하입니다.
- 웹사이트 너비의 1/4에 해당하는 이미지: 너비가 400픽셀 이하여야 합니다. 파일 크기는 100KB 이하입니다.
때때로, 이 규칙을 깨야 하는 매우 상세한 이미지가 있고 흐릿하게 보이지 않도록 파일 크기가 약간 더 커질 수 있습니다. 괜찮습니다. 이미지를 최대한 작게 만드세요.
2단계: 파일 유형
두 이미지의 정확한 크기가 동일할 수 있지만 하나는 JPG이고 다른 하나는 PNG인 경우 파일 크기가 다릅니다.
Canva를 사용하여 크기를 조정하는 경우: 이미지가 흐릿해지지 않도록 다운로드 설정에서 '품질'을 100%로 설정하세요. Canva의 압축률은 좋지 않습니다.
JPG 대신 WebP를 사용하라는 몇 가지 권장 사항이 표시될 수 있습니다. WebP 파일 형식은 훨씬 작지만 이전 브라우저에서는 렌더링되지 않습니다. WebP를 사용할지 JPG를 사용할지는 귀하에게 달려 있습니다.
3단계: 압축
이미지를 압축하는 것은 파일 크기를 더욱 줄일 수 있는 좋은 방법이며, 올바르게 수행한다면 이미지 품질에 영향을 미치지 않습니다. 당신이 사용할 수있는 tinypng.com 이미지를 웹사이트에 업로드하기 전에 압축하세요.
수축.미디어 단 한 단계로 이미지를 압축하고 크기를 조정하는 데 사용할 수 있습니다.