Home 게시판 커뮤니티 Q&A 이미지 업로드시 노하우 같은게 있을까요? 간단한 질문 드립니다.

10개 답변, 4 voices Last updated by Avatar of Matthew Park Matthew Park 3 월 전
  • Avatar of nileblue14nileblue14
    Participant
    @ojesung
    #52104

    https://jsfiddle.net/ycm7ajpm/8/

    여기 들어가보시면 샘플을 올려놨는데요.

    포토샵에서 600px로 작업된 사진을 1px이라도 엇나가게 width가 지정되면
    사진이 미묘하게 흐려지는데요

    예를들어서 사진을 통채로 배경을 지정했을 때
    background:url(); 또는 img태그로 width:100%;로 CSS를 입력했다고 했을 시
    이런경우는 항상 유동적으로 width가 변경되기 떄문에 무조건 흐려보이는데요.

    혹시 이럴 때 이 뿌옇게 되는 현상을 없앨 수 있는 방법이 있을까요?
    아니면 유동적으로 이미지의 width가 변경되는 경우는 어쩔 수 없는 건가요?

  • Avatar of jimnongjimnong
    Participant
    @jimnong
    #52105

    올리는 사람이 해결하는 것보다, 보는 사람이 본인 디스플레이를 HiDPI 200% 적용할 수 있는 것으로 바꾸는 게
    가장 근본적인 해결책이라고 생각합니다.

    HiDPI 200% 미만은 픽셀매칭 문제로부터 벗어날 수 없어요. 영상이든 이미지든…

    올리는 사람 입장에서는 예상되는 디스플레이 해상도별로 이미지파일 따로 올려서 불러오는 수밖엔;;;
    (무한 삽질…ㅠㅠ)

    Avatar of jimnong
    티스토리 블로그 : http://jimnong.tistory.com
    워드프레스로 구축한 사이트 : https://www.sobi.tips
    • Avatar of Matthew ParkMatthew Park
      Moderator
      @hackya
      #52106

      “본인 디스플레이를 HiDPI 200% 적용할 수 있는 것으로 바꾸는 게 가장 근본적인 해결책이라고 생각합니다.” – 이건 retina display 상황에 해당되는 설명인데요.

      “올리는 사람 입장에서는 예상되는 디스플레이 해상도별로 이미지파일 따로 올려서 불러오는 수밖엔;;;” – 넹?

      add_image_size() 는 폼으로 있나요? ㅎㅎㅎ

      원 질문자 분의 질문:

      “혹시 이럴 때 이 뿌옇게 되는 현상을 없앨 수 있는 방법이 있을까요?”

      워드프레스 4.4 이후 버전은 RESS 기법 중 하나인 srcset 을 사용하기 때문에 각 이미지 별 반응형 대응을 합니다.

      어떤 테마를 사용하시는지 모르지만, 사용하시는 테마가 어떤 이미지 사이즈를 생성하시는지 (테마 제작자들은 : 제대로 된 테마제작자라면) 위 언급한 add_image_size() 함수로 각 device/width 에 적절한 이미지를 생성되도록 해놓았는데, 그 부분을 테마 document 나 function 파일에서 확인하시고 그 스펙에 맞춰서 이미지를 업로드 하시면 됩니다.

      약간의 blur 현상도 용납될 수 없는 경우는 쇼핑카트 제품물건 밖에 없는데…

      그런경우라면 우커머스 테마 사용법 부터 읽어보세요. 제품 이미지 크기/규격을 어떻게 해야 한다고 설명되어 있을겁니다. ㅎㅎㅎ

      p.s. 아, 저는 시판용 테마를 안쓰는 관계로 잊어버리고 있었는데, 예전에 조금 괜찮은 시판용 우커머스 테마를 보면 이 이미지 크기도 테마내에서 조정가능했던거로 기억합니다. 몇년전에 본거니까 지금은 훨씬 더 그 기능이 발전되어 있을 것 같습니다. 암튼 테마 설명서 부터 확인해 보세요.

  • Avatar of jimnongjimnong
    Participant
    @jimnong
    #52108

    레티나 디스플레이는 애플이 갖다 붙인 이름이고, 3840×2160 같은 4K 모니터에 HiDPI 200% 먹여서 FHD처럼 써도 효과는 나올 겁니다. 125%, 175% 같은 어중간한 HiDPI 값은 이미지/텍스트 표현력이 완벽하지 않더군요. 레티나 수준의 픽셀크기면 더 좋긴 하겠네요…

    제가 개념만 대충 전달하느라 표현이 서툴렀네요. 다시 보니 매튜님께서 지적하신 것처럼 보일 수 있겠네요. add_image_size() 함수를 쓰더라도 예상되는 해상도 구간별로 이미지크기를 끊어야 하는 점은 마찬가지라서, width:100% 이렇게 해놓는 바람에 애매하게 가로 599px 처럼 됐을 때 흐리멍텅해지는 것은 커버하기 힘들다고 생각합니다.(그런데 질문자 분께서는 이걸 해결하길 원하시는 것처럼 느껴지는데, 제가 잘못 본 것인가요? ;;;)

    그래서 클라이언트 쪽의 디스플레이 업글만이 근본적인 해결책이라고 생각합니다.

    말씀하신 것처럼 테마가 제시하는 가로폭에 이미지를 맞추는 게 기본이기도 하겠지요?

    매튜님, 세심하게 지적해주셔서 감사합니다.

    Avatar of jimnong
    티스토리 블로그 : http://jimnong.tistory.com
    워드프레스로 구축한 사이트 : https://www.sobi.tips
    • Avatar of Matthew ParkMatthew Park
      Moderator
      @hackya
      #52110

      에고 에고.. 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 로 강제해서 보여준다, 이건 마크업이 잘못되었거나 (테마 제작자가 나쁜사람) 아니면 사용자가 이미지 사이즈를 잘못 올린 것 (사용자가 나쁜사람), 둘중 하나 입니다.

    • Avatar of nileblue14nileblue14
      Participant
      @ojesung
      #52118

      제가 질문을 잘못드린건지
      jimnong 님만 잘 이해하셨네요.
      제가 fiddle에 저렇게 올려놓은게 질문을 오히려 더 어렵게 받아드리게 했나봐요 ㅎ

      예를들어서 가로 1800px 사진을

      로 설정하면 1920모니터에서 본다면 당연히 1800이 최대로 딱맞아 떨어져서 1px도 안엇나가기 때문에 엄청 선명한데,
      1440모니터에서 보면 1800px의 사진이 1440으로 강제조정되기 때문에 사진이 아주 조금 흐려지더라구요.

      예를들어 가로 2200px 세로 2000px짜리 사진을 윈도우에서 사진뷰어로 보면 1920px로 찌글어져 들어가서 안선명한데 100%로 보면 엄청 선명하잖아요 이게 이미지의 고질적인 문제인가보네요.

      제가 이질문을 올렸던 이유는 워드프레스에서 featured image (대표이미지)를 좌우 풀로 꽉차게 세팅을 해두면
      모니터에 따라 width는 계속 변경이 되니까 조금이라도 더 선명하게 보고싶은데 1px이라도 안맞으면 아주미세하게 흐려지는게 너무 싫더라구요. jimnong님과 Matthew Park님의 답변을 봐도 딱히 방법은 없나보네요. 이게 어쩔 수 없는 부분인것같았는데 혹시나해서 궁금증에 올려봤는데 암튼 두분 답변 너무 감사드립니다 ㅎ

      ps. 저번에 어떤사이트 보니깐 좌우 풀로 이미지가 들어가는데 선명하길래, 뭐지하면서 개발자도구로 보니까 하나는 사진을 풀로 들어가게 블러처리된 배경(  background:url(삐리리);  )으로 쓰고 위에 얹은 로고는 logo{width:300px;}이런식으로 이중으로 넣어서 그냥 보기엔 사진 하나같은데 사진 2개로 이런문제를 해결한 것을 봤는데 혹시나 이런것처럼 특이한 방법이 있나 싶어서 질문해봤습니다. 아무튼 다시 한번 두분 답변 감사드립니다. ^^

  • Avatar of BulletproofBulletproof
    Participant
    @veteran
    #52153
    버드와이저?

    버드와이저?

    예를들어 가로 2200px 세로 2000px짜리 사진을 윈도우에서 사진뷰어로 보면 1920px로 찌글어져 들어가서 안선명한데 100%로 보면 엄청 선명하잖아요 이게 이미지의 고질적인 문제인가보네요.

    반대 아닌가요? 카메라로 찍은 사진 원본 크기로 보면 축소한 것보다 덜 선명하게 보이는데, 흐린 게 정상아닌가요?

    ===

    해결책이 될런지 모르겠는데요.

    워드프레스, 크롬 브라우저, 브라우저별 이미지 랜더링 및 CSS 이정도로 생각하여 정리하면…

    [워드프레스와 크롬 브라우저]

    먼저, 크롬 브라우저에서 작업한다면 다음 링크 참고하여 혹시 모르니 확인 필요 있습니다. 아래 링크 참고해주세요.

    크롬 브라우저에서 워드프레스 및 웹사이트에 올린 이미지 질이 떨어지며 흐린 현상

    [브라우저별 이미지 랜더링]

    참고 링크 나열하니 확인해보세요.

    image-rendering

    To anyone coming across this same problem years later, this is how you can fix it

    [CSS 배경이미지]

    CSS 언어 이해의 수심이 얕아 도움되지 않을 수 있는데, 백그라운드 이미지를 다음 속성 정도로 처리하면 혹시 좋은 결과 나오지 않을까요?

    수고하세요.

    Avatar of Bulletproof
    Bulletproof… i wish i was
    • Avatar of Matthew ParkMatthew Park
      Moderator
      @hackya
      #52156

      원 질문자는 Bulletproof 님이 이 위에 제시한 반응형 css 기법으로 이미지를 적용하면 1px 라도 뭉개지니까 이 해결책이 있냐는 겁니다.

      그래서 나온 해결책이 대략 6년전쯤 나온 RESS 기법

      https://hackya.com/us/rwd-vs-ress/

      의 하나인 srcset 를 사용하시라고 말씀드렸는데, srcset 기법을 이해하시지 못하시니 다시 또

      1440모니터에서 보면 1800px의 사진이 1440으로 강제조정되기 때문에 사진이 아주 조금 흐려지더라구요.

      예를들어 가로 2200px 세로 2000px짜리 사진을 윈도우에서 사진뷰어로 보면 1920px로 찌글어져 들어가서 안선명한데 100%로 보면 엄청 선명하잖아요 이게 이미지의 고질적인 문제인가보네요.

      이렇게 댓글을 남기셨더라구요.

      각 접속기기 마다 1px 도 어긋나지 않는 각각의 이미지를 불러와 주면 (그냥 srcset 기법을 쓰면 되는겁니다.) 원질문자분의 문제가 해결됩니다.

      그런데 그런 기술적인 개념을 이해하시지 못하면 제 답변을 이해하기 어렵고, 질답게시판에서 srcset 기법에 대한 튜토리얼 글을 쓰고 있을 수도 없는거고… ㅋㅋㅋㅋ

      그렇습니다. (답답하죠. 답답하니 그냥 댓글도 달지 말고 말을 하질 말아야죠. ㅎㅎㅎ)

      좋은 주말 되세요.

    • Avatar of nileblue14nileblue14
      Participant
      @ojesung
      #52159

      Bulletproof님 완전 감사드립니다.

      링크해주신 랜더링 쪽이네요.

      어찌 방법이 있었네요. 브라우저 지원여부나 사용법, 문제점이나 이런건 직접 찾아봐야겠지만 좋은 거 배워갑니다.
      정말 감사드립니다!

  • Avatar of nileblue14nileblue14
    Participant
    @ojesung
    #52158

    Matthew Park님 왜 이렇게 비꼬시는지 모르겠네요; 정도가 너무하신거 아닌가요?

    ” jimnong님과 Matthew Park님의 답변을 봐도 딱히 방법은 없나보네요.” 위에 댓글에 이렇게 적은 이유는 Matthw님의 글에서 나온 srcset 에 대해 검색을 해봤는데요 해상도별 대응하는 이미지 이길래 제가 최초 질문드렸던 1px이 엇나가는 경우에 대한 흐려짐에 대한 내용이 아니었어요.

    만약 Matthw님이 말씀하신대로

    ” 각 접속기기 마다 1px 도 어긋나지 않는 각각의 이미지를 불러와 주면 (그냥 srcset 기법을 쓰면 되는겁니다.) ” 이렇게 한다고 쳐도 만약 이미지가 좌우로 사이즈 풀이라면 width: 100% 인데 이럴 때 1920px 1919px 1918px 1917px … 300px 299px 298px.. 이런식으로 불러올 순 없잖아요.

    KORESS에 잘하시는 분들도 많으시고 항상 감사히 배워가는데 기분이 많이 안좋네요.

     

    • Avatar of Matthew ParkMatthew Park
      Moderator
      @hackya
      #52161

      비꼬려는 의도 전혀 없고, 의사소통에서 오는 답답함을 표현했을 뿐 입니다.

      불쾌하셨다면 죄송합니다.

      “이렇게 한다고 쳐도 만약 이미지가 좌우로 사이즈 풀이라면 width: 100% 인데 이럴 때 1920px 1919px 1918px 1917px … 300px 299px 298px.. 이런식으로 불러올 순 없잖아요.”

      1920px 1919px 1918px 1917px – 이렇게 하나씩 불러오시는게 왜 불가능하죠?

      1px 라도 뭉크러지는게 용납이 안된다면 다른 방법이 없습니다.

      “그건 불가능 하진 않지만 현실적이지 않은 방법 같습니다” 라고 하신다면 저도 “1px 라도 뭉크러지는걸 용납할 수 없다는 것도 현실적인 expectation 이 아니다.” 라고 밖에 드릴 말씀이 없습니다.

      요구사항에 가장 근접하는 방식을 말씀드렸을 뿐 입니다.

      그리고 “만약 이미지가 좌우로 사이즈 풀이라면” 이런경우 background image 를 overflow 하게 허용해서 이미지가 축소되지 않도록 하고 overflow: hidden 해주면 이미지가 뭉크러지지 않습니다. 하지만 이건 또 이미지가 짤린다고 태클거시면 할말 없구요.

      이유는 모르겠지만, 어떤 방식을 알려드려도 다 아니라고 하고 싶고 마음은 제가 잘 알겠습니다.

      앞으로 댓글 달일 없으니 기분 푸셨으면 좋겠습니다.

4 답변 글타래를 보이고 있습니다
  • 답변은 로그인 후 가능합니다.