웹용 이미지 최적화: 실용 가이드

그들은 사진이 천 마디 말의 가치가 있다고 말합니다. 이것이 전자 상거래에서 이미지가 중요한 이유 중 하나입니다. 고객이 제품을 집어 들고 만지고 검사할 수 없는 상황에서는 제품의 색상, 품질 및 스토리를 이해하기 위해 이미지에 크게 의존합니다.

따라서 이미지가 고해상도와 선명해야 함은 말할 필요도 없습니다. 그러나 이것은 대가를 치르게 됩니다. 대형 고화질 이미지는 파일 크기가 클 수 있습니다. 이 중 몇 가지를 사이트에 설치하면 온라인 상점을 빠르게 탐색하는 경험이 결국 당밀 속을 헤엄치는 것과 같은 느낌이 들 수 있습니다. 이로 인해 방문자가 이탈할 뿐만 아니라 시간이 지나면 Google도 이를 알게 되며 이는 SEO에 영향을 줄 수 있습니다.

전자 상거래에서는 사이트용 이미지를 저장할 때 이미지 품질과 이미지 파일 크기 간의 적절한 균형을 찾는 것이 중요합니다. 이 포스트에서 그 방법을 알려드리겠습니다.

제품 사진을 찍어 매장에 직접 업로드하는 것으로 알려진 경우 이 튜토리얼이 적합합니다. 파일 크기를 염두에 두고 이미지를 저장하는 공식적인 지식이나 프로세스가 없다면 이 튜토리얼이 적합합니다. 사이트에 이미지가 많고 작업 속도가 느리다면 이 튜토리얼이 적합합니다. 아직 온라인 상점 구축을 시작하지 않았다면 이 튜토리얼이 특히 적합합니다.

이미지를 최적화할 준비가 되셨습니까?

이미지 파일 형식 옵션

웹에 최적화된 이미지를 저장하는 데 중점을 두고자 하는 세 가지 주요 파일 형식은 GIF, JPG 및 PNG입니다. 각 파일 유형에는 고유한 강점과 약점이 있으며 이미지를 저장할 때 이를 알고 기억하는 것이 매우 중요합니다.

JPG 작업

JPG(JPEG라고도 함)는 웹에서 가장 많이 사용되는 이미지 파일 형식입니다. JPG는 많은 색상, 그림자, 그라디언트 또는 복잡한 패턴이 포함된 사진이나 복잡한 이미지에 적합합니다. JPG는 작업할 수 있는 거대한 색상 팔레트가 있기 때문에 이러한 유형의 이미지를 잘 처리합니다.

JPG는 또한 고품질, 저품질 또는 그 중간에 저장할 수 있습니다. 이를 통해 품질과 파일 크기의 균형을 맞춰 이미지를 원하는 대로 정확하게 조정하고 저장할 수 있습니다.

PNG 작업

PNG는 온라인에서 인기 있는 또 다른 파일 형식입니다. Adobe Photoshop에는 PNG를 PNG-8 또는 PNG-24로 저장할 수 있는 옵션이 있습니다.

• PNG-8에는 256색의 매우 제한된 색상 팔레트가 있습니다. 이미지 크기는 더 작지만 복잡한 이미지와 사진에는 좋은 옵션이 아닙니다.
• PNG-24는 훨씬 더 높은 품질의 이미지를 제공하지만 파일 크기가 커집니다.

가장 중요한 것은 PNG가 투명도를 처리할 수 있다는 것입니다. 이것은 PNG와 JPEG의 가장 큰 차이점 중 하나입니다.

GIF 작업

GIF는 몇 년 전에 더 인기가 있었지만 여전히 몇 가지 색상만 필요한 작은 이미지 크기의 옵션입니다. PNG-8과 마찬가지로 GIF 파일은 256색으로만 제한됩니다. 이 때문에 제품 사진에 GIF를 사용해서는 안 됩니다.

이미지를 올바르게 저장하기

예상할 수 있듯이 큰 이미지는 로드하는 데 시간이 더 오래 걸립니다. 크다는 것은 이미지의 크기가 아닌 파일 크기, 즉 KB, MB, GB 등의 값을 의미합니다. 사용자의 47%가 웹페이지가 2초 이내에 로드될 것으로 예상하고 40 %는 로드하는 데 3초 이상 걸리는 페이지를 포기합니다. 빠른 사이트를 보장할 수 있을 만큼 이미지가 작아야 합니다.

온라인 상점에 맞게 이미지를 적절하게 최적화하기 위해 할 수 있는 3가지가 있습니다.

올바른 치수 저장

Photoshop에서 이미지를 열고 100%로 봐야 합니다. 이렇게 하면 웹용으로 이미지를 저장할 때 컴퓨터 모니터에 표시되는 정확한 크기로 이미지를 볼 수 있습니다.

웹용 이미지 저장

이미지 품질을 크게 낮추지 않고 파일 크기를 줄일 수 있습니다. 이미지 품질을 크게 줄이지 않고 파일 크기를 줄이는 가장 좋아하는 방법은 Photoshop의 "웹용으로 저장" 기능을 사용하는 것입니다. Photoshop에서 이미지를 열고 파일 > 내보내기 > 웹용으로 저장(레거시)…으로 이동합니다. 내보내기 품질을 선택할 수 있는 창이 나타납니다. 파일 크기를 메가바이트 미만으로 낮추고 품질에 눈에 띄는 차이가 없기 때문에 품질 60이 가장 잘 작동한다는 것을 알았습니다.

웹용 이미지 압축

이미지 압축 앱은 이미지의 파일 크기를 줄이는 가장 쉬운 방법입니다. 이러한 유형의 도구는 필요하지 않은 추가 색상 프로필 및 메타데이터(예: 사진을 찍은 위치의 지리적 위치)와 같은 이미지 파일의 숨겨진 데이터를 제거합니다. 이러한 도구는 이미지 품질을 잃지 않고 파일 크기를 줄이는 빠르고 쉬운 방법을 제공합니다.

이미지 압축 앱 및 서비스

• 이미지최적화
• 짧은 픽셀
• 타이니JPG
• 작은PNG
• 압축기.io
• 크라켄
• 이미지 최적화
• 크러쉬 픽스(Shopify 앱)
• 미니파이어(Shopify 앱)

웹용 이미지 저장: 단계별 예제

시작하기 위해 우리가 Stiff Salt(실제로는 친구이자 Shopify 개발자 소유)이고 온라인 스토어의 기능 이미지를 변경하려고 한다고 가정해 보겠습니다.

우리는 장면을 설정하고 우리의 소금을 절대적으로 놀라운 것처럼 보이게 만들고 DSLR 카메라로 사진을 찍습니다. 우리 사진이 있습니다. 어쩜 이렇게 이쁘니!

하지만... 파일 크기가 엄청납니다! 정확히는 14.6MB입니다. 그리고 사진의 크기는 5184 × 3456 픽셀입니다. 이것은 현재 완전히 사용할 수 없습니다. 말 그대로 영화 크기의 포스터를 인쇄할 수 있을 만큼 큽니다. 14.6MB에서 이 이미지는 방문자의 컴퓨터에 로드하는 데 상당한 시간이 걸립니다. 이것은 좋지 않다.

이제 작업을 시작하여 이미지 크기와 파일 크기를 크게 줄여야 합니다.

이미지에 대해 세 가지 작업을 수행할 것임을 기억하십시오.

• 이미지 크기 줄이기: 사진의 크기입니다.
• 파일 크기를 줄이기 위해 적절하게 이미지 저장: 이것은 파일의 크기 와 컴퓨터의 하드 드라이브 및/또는 웹 서버에서 차지하는 공간입니다.
• 이미지 파일 압축: 공간을 차지하는 추가 숨겨진 데이터 제거

이미지 크기 줄이기

사용하기로 결정한 프로그램과 개인 취향에 따라 다음을 수행할 수 있습니다.

• 저장하기 전에 이미지 크기 줄이기
• 이미지를 저장하는 동안 이미지 크기 줄이기
• 이미지를 저장한 다음 이미지 크기를 줄입니다.

일을 단순하게 유지하기 위해 먼저 이미지 크기를 줄입니다. 이를 위해 Photoshop에서 이미지를 열 것입니다(가장 편한 이미지 프로그램을 사용할 수 있음).

크기를 알아보기 위해 테마에서 제안하는 홈페이지 이미지 크기를 살펴보았습니다. 1600 x 800픽셀이었습니다(원본은 5184 x 3456픽셀임을 기억하십시오).

Photoshop에서 이미지 > 이미지 크기를 선택합니다.

좋습니다. 이미지의 크기(크기)를 테마 개발자가 더 적절하고 권장하는 크기로 줄였습니다.

이미지를 적절하게 저장(웹용으로 저장)

Photoshop에는 온라인 표시를 위해 이미지 파일을 최적화하는 "웹용으로 저장"이라는 특정 명령이 있습니다. 이것은 일반 "저장" 명령이 "웹용으로 저장" 명령보다 2-3배 더 큰 파일 크기를 생성할 수 있기 때문에 중요합니다.

"웹용으로 저장" 상자에서 몇 가지를 선택해야 합니다.

• 이미지 유형: 파일 유형은 출력 파일의 품질과 크기에 영향을 미칩니다.
• 이미지 품질: 이것은 중요하며 최종 파일 크기에 큰 영향을 미칠 수 있습니다.
• 치수: 첫 번째 단계에서 이미 이 작업을 수행했으므로 다시 수행할 필요가 없지만 첫 번째 단계에서 이 작업을 수행하지 않으면 여기에서 이미지의 치수를 변경할 수 있습니다.

이 게시물의 시작 부분에서 배운 내용을 기반으로 JPEG가 사진이나 색상과 복잡성이 많은 이미지에 가장 적합한 파일 형식이라는 것을 알고 있습니다. JPEG를 선택하겠습니다.

이미지 품질의 경우 최대에서 낮음 범위의 5가지 사전 설정으로 선택할 수 있는 척도가 있습니다. 각 품질 수준의 최종 출력 파일 크기를 살펴보겠습니다(이 정보는 이미지 저장 창의 하단 모서리에 표시됨).

• 최대: 1.38MB
• 매우 높음: 611KB
• 높음: 339KB
• 매체: 152KB
• 낮음: 86k

품질 수준을 낮출 때마다 이미지 크기가 거의 절반으로 감소하는 것을 볼 수 있습니다. 일반적으로 높음이 대부분의 이미지에 가장 적합한 설정입니다. 이 수준에서는 사람의 눈으로 이미지 품질 저하를 확인하는 것이 거의 불가능하며 파일 크기는 최대값을 선택한 경우보다 거의 4배 작습니다.

이미지가 디테일이 많이 포함된 매우 중요한 이미지인 경우 더 높은 수준을 선택하고 매우 높음으로 저장하는 것이 좋습니다.

기본적으로 웹용으로 저장하는 것은 균형을 유지하는 작업입니다. 개인 요구에 맞게 그래픽 품질과 미디어 파일 크기의 균형을 맞춰야 합니다.

웹용 이미지 압축

Adobe Photoshop을 사용했다면 이미 이미지 크기를 줄이는 데 정말 큰 역할을 했을 것이지만 ImageOptim 및/또는 ShortPixel과 같은 압축 앱을 사용하여 이미지 크기를 5-10% 더 줄일 수 있습니다.

ImageOptim은 또한 Photoshop만큼 좋지 않은 이미지를 저장하기 위해 다른 프로그램을 사용한 경우 이미지 파일 크기를 빠르게 줄이는 가장 쉬운 방법입니다.

이전 단계의 각 파일을 ImageOptim에 드롭하여 이미지 크기를 5% 더 줄일 수 있었습니다. 크지는 않지만 이미 Photoshop으로 최적화되어 있습니다. 어쨌든 모든 KB가 중요합니다.

결론

요약하자면, 우리 사진은 우리가 시작할 때 엄청나게 거대했지만 몇 가지 간단한 단계를 거쳐 우리 홈페이지에 완벽하게 맞도록 사진 크기를 5184 × 3456에서 1600 × 800으로 줄였습니다. 컴퓨터 충돌 14.4MB에서 훨씬 더 합리적인 336KB로 감소했습니다.

웹용으로 적절하게 이미지를 저장하는 것은 일찍 배우고 종교적으로 구현하는 중요한 단계입니다. 각 이미지에 대해 10-20%만 절약하더라도 시간이 지남에 따라 매장과 웹사이트가 성장함에 따라 모든 작은 KB는 방문자, 고객 및 웹사이트 전반에 걸쳐 훨씬 더 즐거운 경험으로 이어질 상당한 절감액을 추가할 수 있습니다. Google.

웹용 이미지를 최적화하는 방법: 비디오 둘러보기