[CSS] 이미지 최적화 코드 추가(chrome)

 

유난히 크롬과 아이폰에서 이미지 해상도 문제가 생겨서 이미지 해상도 최적화를 위해 몇가지 방법을 찾았다.

해당 코드를 background: url()을 통해 넣은 CSS 코드에 함께 넣어주면 된다.

 

1. image-rendering: -webkit-optimize-contrast;

이미지의 랜더링 방식을 선명하게 하도록 설정

 

2. backface-visibility: hidden;

이미지의 뒷면을 숨김으로서 입체감 방지

 

div {
 background: url(../이미지경로) no-repeat 0 0;
 background-size: contain;
 
 /* 밑의 내용 추가 */
 image-rendering: -webkit-optimize-contrast;
 backface-visibility: hidden;
}