https://jsfiddle.net/ycm7ajpm/8/
여기 들어가보시면 샘플을 올려놨는데요.
포토샵에서 600px로 작업된 사진을 1px이라도 엇나가게 width가 지정되면
사진이 미묘하게 흐려지는데요
예를들어서 사진을 통채로 배경을 지정했을 때
background:url(); 또는 img태그로 width:100%;로 CSS를 입력했다고 했을 시
이런경우는 항상 유동적으로 width가 변경되기 떄문에 무조건 흐려보이는데요.
혹시 이럴 때 이 뿌옇게 되는 현상을 없앨 수 있는 방법이 있을까요?
아니면 유동적으로 이미지의 width가 변경되는 경우는 어쩔 수 없는 건가요?
올리는 사람이 해결하는 것보다, 보는 사람이 본인 디스플레이를 HiDPI 200% 적용할 수 있는 것으로 바꾸는 게
가장 근본적인 해결책이라고 생각합니다.
HiDPI 200% 미만은 픽셀매칭 문제로부터 벗어날 수 없어요. 영상이든 이미지든…
올리는 사람 입장에서는 예상되는 디스플레이 해상도별로 이미지파일 따로 올려서 불러오는 수밖엔;;;
(무한 삽질…ㅠㅠ)
“본인 디스플레이를 HiDPI 200% 적용할 수 있는 것으로 바꾸는 게 가장 근본적인 해결책이라고 생각합니다.” – 이건 retina display 상황에 해당되는 설명인데요.
“올리는 사람 입장에서는 예상되는 디스플레이 해상도별로 이미지파일 따로 올려서 불러오는 수밖엔;;;” – 넹?
add_image_size() 는 폼으로 있나요? ㅎㅎㅎ
원 질문자 분의 질문:
“혹시 이럴 때 이 뿌옇게 되는 현상을 없앨 수 있는 방법이 있을까요?”
워드프레스 4.4 이후 버전은 RESS 기법 중 하나인 srcset 을 사용하기 때문에 각 이미지 별 반응형 대응을 합니다.
어떤 테마를 사용하시는지 모르지만, 사용하시는 테마가 어떤 이미지 사이즈를 생성하시는지 (테마 제작자들은 : 제대로 된 테마제작자라면) 위 언급한 add_image_size() 함수로 각 device/width 에 적절한 이미지를 생성되도록 해놓았는데, 그 부분을 테마 document 나 function 파일에서 확인하시고 그 스펙에 맞춰서 이미지를 업로드 하시면 됩니다.
약간의 blur 현상도 용납될 수 없는 경우는 쇼핑카트 제품물건 밖에 없는데…
그런경우라면 우커머스 테마 사용법 부터 읽어보세요. 제품 이미지 크기/규격을 어떻게 해야 한다고 설명되어 있을겁니다. ㅎㅎㅎ
p.s. 아, 저는 시판용 테마를 안쓰는 관계로 잊어버리고 있었는데, 예전에 조금 괜찮은 시판용 우커머스 테마를 보면 이 이미지 크기도 테마내에서 조정가능했던거로 기억합니다. 몇년전에 본거니까 지금은 훨씬 더 그 기능이 발전되어 있을 것 같습니다. 암튼 테마 설명서 부터 확인해 보세요.
레티나 디스플레이는 애플이 갖다 붙인 이름이고, 3840×2160 같은 4K 모니터에 HiDPI 200% 먹여서 FHD처럼 써도 효과는 나올 겁니다. 125%, 175% 같은 어중간한 HiDPI 값은 이미지/텍스트 표현력이 완벽하지 않더군요. 레티나 수준의 픽셀크기면 더 좋긴 하겠네요…
제가 개념만 대충 전달하느라 표현이 서툴렀네요. 다시 보니 매튜님께서 지적하신 것처럼 보일 수 있겠네요. add_image_size() 함수를 쓰더라도 예상되는 해상도 구간별로 이미지크기를 끊어야 하는 점은 마찬가지라서, width:100% 이렇게 해놓는 바람에 애매하게 가로 599px 처럼 됐을 때 흐리멍텅해지는 것은 커버하기 힘들다고 생각합니다.(그런데 질문자 분께서는 이걸 해결하길 원하시는 것처럼 느껴지는데, 제가 잘못 본 것인가요? ;;;)
그래서 클라이언트 쪽의 디스플레이 업글만이 근본적인 해결책이라고 생각합니다.
말씀하신 것처럼 테마가 제시하는 가로폭에 이미지를 맞추는 게 기본이기도 하겠지요?
매튜님, 세심하게 지적해주셔서 감사합니다.
에고 에고.. jimnong 님 하고 원 질문자 분, 두분 모두에게 죄송.
fiddle 올려놓으신것 만 보고 질문글을 제대로 안 읽었었네요. 질문은 “background image 를 깨지지 않게 보여주는 방식을 알려달라.” 인데, fiddle 에 올려놓은 마크업은 이미지를 올려놓으셔서, 그것만 보고, 제가 아…. 우커머스 제품 이미지 깨지는게 문제구나 하고 넘겨짚었었습니다. 켁.
반응형이면서 background image 픽셀 안 깨지게 하는거는, 이렇게 하시면 됩니다.
https://jsfiddle.net/mspsys/8vhtm47e/
이미지 (img 태그) 를 반응형으로 만드는거는 그냥 width 를 100% 주시고, height: auto 하면 그게 끝이거든요. 이렇게
https://jsfiddle.net/mspsys/fgedpzq3/
그래서 솔직히 지금 다시 질문글을 읽어봐도 무슨 질문을 하신건지 모르겠네요. ㅎㅎㅎㅎ
우커머스 제품이미지 처럼 이미지 width 를, 예를 들어 600px 로 지정하면서도 반응형 페이지에서 제대로 보이고 또 이미지가 blur 되지 않아야 한다면, 제가 처음 드린 답변을 따르시면 됩니다.
이미지 width가 600px 인데 그걸 590px 로 강제해서 보여준다, 이건 마크업이 잘못되었거나 (테마 제작자가 나쁜사람) 아니면 사용자가 이미지 사이즈를 잘못 올린 것 (사용자가 나쁜사람), 둘중 하나 입니다.