이미지는 괜찮은 웹사이트의 가장 중요한 요소 중 하나입니다. 방문자의 관심을 끌고 콘텐츠를 보다 쉽게 공유할 수 있으며 사용자가 행동(예:제품 구매)을 하도록 유도합니다.
그러나 고해상도 이미지를 추가하거나 파일 크기가 큰 이미지를 추가하면 웹사이트가 느려지고 최종 사용자에게 좋지 않은 사용자 경험을 제공할 수 있습니다. 눈에 띄는 품질 손실 없이 이미지를 압축하고 프로세스를 자동화하는 데 도움이 되는 수많은 도구를 사용하여 열악한 사용자 경험을 제공하는 데는 변명의 여지가 없습니다.
이 기사에서는 웹, 특히 WordPress 웹사이트에서 사용하기 위해 이미지를 최적화하는 다양한 방법을 보여 드리겠습니다.
올바른 파일 형식 선택
JPEG 및 PNG는 웹에서 가장 널리 사용되는 이미지 파일 형식입니다. JPEG는 일반적으로 다양한 색상이 포함된 사진에 사용되는 압축 형식인 반면 PNG는 텍스트, 일러스트레이션, 로고, 스크린샷 및 투명 이미지가 있는 사진에 훨씬 좋습니다. 또 다른 일반적인 형식은 색상이 거의 없는 이미지 또는 동일한 색상의 넓은 영역이 있는 이미지에 가장 적합한 GIF입니다. GIF는 오늘날 웹에서 애니메이션 이미지에 주로 사용됩니다.
대부분의 이미지 편집 소프트웨어를 사용하면 파일을 다양한 형식으로 저장할 수 있습니다. 올바른 형식을 선택하면 웹사이트에서 사용자 경험을 향상시킬 수 있는 가장 선명한 이미지를 얻을 수 있습니다.
적절한 크기와 해상도 사용
사이트에 이미지를 추가할 때 주의해야 합니다. 이미지를 웹사이트에 표시되는 너비와 높이와 품질 저하 없이 가능한 한 가장 작은 파일 크기로 저장하는 것이 가장 좋습니다.
업로드하기 전에 이미지 압축
이미지를 서버에 업로드하기 전에 압축하는 데 도움이 되는 많은 도구가 있습니다. 예를 들어 Photoshop에는 형식 및 품질 설정을 선택할 수 있는 편리한 "웹 및 장치용으로 저장" 기능이 있습니다. 특정 설정을 적용하면 이미지의 파일 크기도 표시됩니다. 김프와 같은 다른 이미지 조작 도구도 비슷한 옵션을 제공합니다.
Picresize, Kraken.io 및 TinyPNG와 같은 온라인 압축 도구도 존재합니다. 여기에서 고해상도 이미지를 업로드하고 최적화하며 웹에서 사용할 압축 형식을 다운로드할 수 있습니다.
업로드 후 이미지 압축
이를 위해 여러 플러그인이 존재하며 가장 인기 있는 플러그인 중 하나는 JPEG, PNG 또는 GIF 형식을 개별적으로 또는 전용 서버를 사용하여 대량으로 최적화하는 데 도움이 되는 WP Smush입니다. 파일에서 메타데이터와 사용하지 않는 색상을 제거하여 파일 크기를 줄입니다. 무료 버전에서는 1MB 이하의 이미지로 제한되지만 최대 5MB를 허용하는 Pro 버전으로 업그레이드하면 이 제한을 없앨 수 있습니다.
유사한 기능을 가진 또 다른 훌륭한 플러그인은 가능한 가장 작은 파일 크기를 생성하는 형식으로 이미지를 변환하는 데 도움을 줄 수 있는 EWWW Image Optimizer입니다.
WordPress 리포지토리에서 사용할 수 있는 다른 항목이 있으므로 자유롭게 탐색하십시오. 그것들은 제가 이전에 사용한 적이 있는 두 가지이며 둘 다 잘 작동하므로 귀하에게도 충분할 것입니다.
이미지에 적절한 태그 지정
이미지 크기를 조정하는 것 외에도 웹사이트에서 좋은 경험을 제공하는 좋은 방법은 이미지에 적절하게 태그를 지정하는 것입니다. 이것은 항상 "alt ” 속성은 이미지를 로드할 수 없는 경우 또는 방문자가 이미지에 대한 텍스트 기반 설명을 볼 수 있도록 하는 스크린 리더용입니다. 또한 검색 엔진이 웹사이트에서 이미지를 더 잘 인덱싱하고 상당한 양의 검색 트래픽을 가져올 수 있습니다.
필요한 곳에 캡션을 추가하는 것은 웹사이트 방문자가 이미지를 더 잘 이해할 수 있도록 돕는 또 다른 좋은 방법입니다. 적절한 설명 제목 태그와 이미지 파일 이름을 사용하는 것도 같은 방식으로 도움이 됩니다. 따라서 이미지를 "FXSCSUYE.jpg로 저장하는 대신 " 주제 및 웹사이트와 관련된 키워드와 함께 설명적인 제목과 이름을 사용하십시오. 이는 SEO 관점에서도 좋습니다.
지연 로딩
Lazy Loading은 사용자가 이미지의 뷰 프레임으로 스크롤할 때만 이미지를 로드하여 대역폭을 절약하기 위해 많은 웹사이트에서 사용하는 기술입니다. 처음 몇 개의 이미지는 즉시 로드되지만 다른 이미지는 로드하기 전에 사용자가 이미지 근처에 있을 때까지 대기합니다. 이 기능을 웹사이트에 추가하면 귀하와 귀하의 사용자를 위한 대역폭이 절약되고 웹페이지 속도가 향상됩니다. BJ Lazy Load는 WordPress 웹사이트에 Lazy Loading을 추가하는 훌륭한 플러그인입니다.
콘텐츠 전송 네트워크 사용
CDN(콘텐츠 전송 네트워크)을 사용하면 서버의 로드가 상당히 줄어들고 웹 사이트의 성능이 향상됩니다. CDN은 요청한 사용자의 위치에서 가장 가까운 서버에서 리소스를 제공합니다. 예를 들어 베이징에서 온 방문자가 이미지를 요청하고 사용 중인 CDN에 서울과 시드니에 서버가 있는 경우 서울에 있는 서버에서 이미지가 제공됩니다.
MaxCDN은 시도할 수 있는 높은 평가를 받은 CDN 중 하나이며 CloudFlare, CDN.net 등과 같은 다른 것들이 있습니다.
요점
웹에서 사용하기 위해 이미지를 최적화하는 것은 웹사이트의 페이지 로드 시간과 전반적인 사용자 경험을 개선하는 가장 큰 방법 중 하나입니다. 공유하고 싶은 다른 최적화 기술이 있으면 아래 의견에 기재해 주세요.