모바일 웹에 맞게 이미지를 최적화하는 방법

이미지의 파일 유형과 크기를 선택할 때 특히 여러 플랫폼에서 판매하는 경우 품질, 페이지 로드 시간, 확대/축소 기능 및 시장 요구 사항을 염두에 두십시오. 웹용으로 이미지를 최적화 하는 방법과 향상된 사용자 경험을 위해 모바일을 염두에 두고 파일 형식을 선택하는 방법을 살펴보겠습니다.

올바른 이미지 크기 선택

사용자가 확대할 수 있을 만큼 충분히 큰 이미지와 너무 많은 공간을 차지하지 않고 페이지 로드 시간을 늦추지 않도록 최적 크기 사이의 균형을 유지하는 것이 중요합니다. Shopify에서는 최대 4472 x 4472픽셀의 이미지를 최대 20MB의 파일 크기로 업로드할 수 있습니다. 그러나 웹 사이트 빌더는 일반적으로 정사각형 제품 사진에 2048 x 2048 픽셀을 사용할 것을 권장합니다. 이것은 당신의 상점에 뛰어난 확대/축소 기능으로 전문적이고 균형 잡힌 모습을 제공하는 고해상도 이미지입니다. 확대/축소 기능이 작동하려면 이미지가 800 x 800픽셀 이상이어야 합니다.

마찬가지로 Amazon 및 Etsy는 확대/축소를 활성화하기 위해 1000 x 1000픽셀 이미지 요구 사항이 있습니다.

제품 라인과 컬렉션 페이지에서 균일한 모양을 유지하려면 모든 특징 이미지의 너비와 높이 종횡비를 동일하게 유지해야 합니다(예: 정사각형). 기능 이미지는 홈 페이지, 장바구니 페이지, 체크아웃 페이지 및 다양한 컬렉션 페이지에 매장 전체에 나타날 제품의 첫 번째 이미지입니다. 모든 썸네일도 동일한 크기와 모양으로 유지하여 세련된 매장 모습을 전달하십시오. 많은 고객이 모바일에서도 검색할 것이며 작은 화면에서는 정사각형 이미지의 위치를 ​​변경하기가 더 쉽습니다.

올바른 이미지 형식 선택

제품 사진에 가장 널리 사용되는 파일 형식과 각 형식이 제공하는 내용을 살펴보겠습니다. 제품 사진에 얼마나 자주 사용되는지에 따라 여기에 나열됩니다.

JPG

JPG는 가장 일반적인 디지털 이미지 파일 형식입니다. 널리 지원되며 좋은 색상 범위와 작은 파일 크기를 자랑합니다. 압축을 통해 파일 크기와 이미지 품질 사이의 균형을 맞출 수 있습니다. Shopify는 특히 JPG를 권장합니다. JPG는 제품 사진에 잘 어울리는 비교적 작은 크기와 좋은 품질의 이미지를 전달할 수 있기 때문입니다.

PNG

PNG는 256색 제한을 제거하여 GIF 형식을 개선하기 위해 만들어졌습니다. 널리 사용되며 무손실(품질 저하 없이 파일 크기 감소) 및 투명도(투명 배경의 경우)를 지원합니다. 단점은 무손실 압축으로 인해 PNG 파일 크기가 커질 수 있고 형식이 JPG만큼 보편적으로 호환되지 않는다는 것입니다.

GIF

GIF는 이미지를 256색으로 압축 및 축소하여 작은 파일 크기를 제공합니다. PNG로 널리 대체되었지만 여전히 애니메이션에 사용됩니다. 둘 다 지원하고 브라우저에서 보편적으로 인식되는 유일한 형식이기 때문입니다.

사소한 말다툼

TIFF는 다양한 편집 및 웹 응용 프로그램에서 널리 지원되는 무손실 압축 형식입니다. 고화질 해상도를 제공하며 여러 이미지와 페이지를 하나의 파일에 편리하게 저장할 수 있습니다. 그러나 파일 크기는 큰 경향이 있습니다.

BMP

BMP는 Windows 생태계에서 일반적으로 사용됩니다. 데이터 압축, 알파 채널(Photoshop에서 투명 배경 추가와 같이 이미지의 일부를 조작하는 데 사용할 수 있는 추가 정보를 저장하는 데 사용) 및 거의 보편적인 호환성을 지원합니다. 압축되지 않은 완벽한 이미지를 제공하지만 파일 크기도 매우 클 수 있습니다.

전반적으로 JPG는 작은 크기와 적절한 품질을 결합할 때 확실히 가장 편리합니다. PNG는 더 높은 품질의 무손실 압축을 제공하지만 더 큰 파일 크기가 필요합니다. GIF는 360도 샷을 제공하고 가벼운 파일을 원하는 경우에 유용합니다. 그에 비해 BMP와 TIFF는 훌륭한 품질을 제공할 수 있지만 실물 크기는 일반적으로 다소 무겁고 비실용적입니다.

모바일용 이미지 크기 조정

Shopify는 더 작은 화면에 맞게 이미지 크기를 자동으로 조정하지만 특정 이미지는 수동 편집이 필요할 수 있습니다. 데스크탑과 모바일 화면은 크기가 다를 뿐만 아니라 방향도 반대입니다. Shopify는 부드러운 자르기로 이를 수용하려고 하지만 이미지가 정사각형이고 제품이 수직 및 수평 중앙에 있는 것이 가장 좋습니다.

또한 지나치게 큰 해상도(예: Shopify의 최대 4000 x 4000 픽셀)를 가진 이미지는 모바일용으로 크기를 조정할 때 흐리게 나타날 수 있습니다. 따라서 모바일을 염두에 두고 관리하기 쉬운 크기와 모양으로 이미지를 줄이면 모든 기기에서 매장을 더 잘 보이게 할 수 있습니다. 파일이 크면 사이트 로딩 시간도 느려집니다. 그리고 전자 상거래, 특히 모바일에서는 매초가 중요하므로 이미지 최적화가 우선 순위가 되어야 합니다.

따라서 무손실 압축은 최고 품질의 이미지를 제공할 수 있지만 종종 업로드하는 데 시간이 오래 걸리는 대용량 파일(특히 대량)이 생성되고 페이지 로딩 시간이 느려져 방문자가 상점을 떠나게 만들 수 있습니다. 이것은 인터넷 속도가 느려질 수 있고 이미지가 마침내 나타날 때까지 기다리는 모바일에서 특히 사실입니다. 쇼핑객을 좌절시킵니다.

Shopify의 반응형 디자인과 알고리즘은 여러 장치에서 이미지의 크기를 조정하고 표시하는 데 능숙하지만 파일 크기를 신중하게 고려하면 더욱 원활한 쇼핑 경험을 얻을 수 있습니다.

저자 소개

Holly Cardew는 전자 상거래 매장이 제품 사진을 편집하고 최적화하여 판매를 늘릴 수 있도록 지원하는 플랫폼인 Pixc의 설립자입니다. Pixc는 24시간 이내에 배경을 편집하고 제거하여 평범한 제품 이미지를 아름다운 이미지로 바꿉니다. 십대에 시작하여 eBay에서 판매하고 자신의 온라인 마켓플레이스를 만든 Holly는 전자 상거래, 온라인 마케팅, 그래픽 디자인 및 분산 팀 구축에 대한 배경 지식을 가지고 있습니다. 그녀는 또한 Shopify 매장을 구축 및 운영하고 대규모 소셜 미디어 팔로워를 늘리는 데 경험이 있습니다. 2016년에 Holly는 소매 및 전자 상거래 Forbes의 30세 미만 30인 목록에 포함되었습니다. Holly는 샌프란시스코, 브리즈번, 시드니를 오가며 시간을 보냅니다. Holly가 일을 하지 않을 때 그녀는 여행, 새로운 장소 탐험, 아름다운 디자인, 타이포그래피, 새로운 비즈니스 아이디어 구상을 좋아합니다.