영카트 상품 가장 적절한 이미지 사이즈는 어떻게 되나요?
본문
영카트 상품 가장 적절한 이미지 사이즈는 어떻게 되나요?
현재 230픽셀 * 230픽셀 디폴트 값이네요.
감사합니다.
답변 3
※ 기본값인 230픽셀 × 230픽셀을 사용하면서 ~
사이트의 특성과 디자인 요구사항에 따라 이미지 크기를 조정.
> 크라이언트 디바이스를 고려하여 PC와 모바일에 맞는 이미지 크기를 각각 설정.
★ """ 가장 적절한 이미지 사이즈 """라는 조건이 없는 표현은 애매하여, 부적절 함 ~
♠ 방법은 다양할 것이나, 염두할 점은 ~
- 고해상도디스플레이
- 모바일용 이미지
- 상품 갤러리 형식에 따른 비율
- list_page와 제품 상세 페이지에 따른 비율
♠ 방법으로는 ~ 다양하나, 몇가지만 예시를 들자면 ~ 관리자_Customizing
- 반응형 이미지
<img src="small.jpg" srcset="medium.jpg 768w, large.jpg 1200w" alt="구매해 주세요 ~">
- CSS로 크라이언트의 디스플레이에 따른 ~
.product-image {
width: 100px;
}
@media (min-width: 768px) {
.product-image {
width: 150px;
}
}
@media (min-width: 1200px) {
.product-image {
width: 230px;
}
}
- JS로 크라이언트 감지>이미지를 동적으로 변경.
const imgElement = document.getElementById("product-image");
if (window.innerWidth > 1200) {
imgElement.src = "large.jpg";
} else if (window.innerWidth > 768) {
imgElement.src = "medium.jpg";
} else {
imgElement.src = "small.jpg";
}
- 또 다른 방법이 있을 것임.
답변 감사합니다.
~/_
썸네일의 사이즈는 사용할 사이즈와 동일하거나 보다 살짝 크게 잡으시면 됩니다.
원본의경우 가장 크게 출력 할 이미지 사이즈 기준으로 설계합니다.
답변을 작성하시기 전에 로그인 해주세요.
