이미지를 모바일에 표시하지만 이미지를로드 중입니까?

디자이너와 함께 이메일을 디자인하고 있습니다. 이 이메일에서는 Gif를 영웅 이미지로 구현하려고합니다. 하지만 모바일에서는 데스크톱과는 다른 GIF를 표시하려고합니다. 거의 모든 모바일 클라이언트가 헤더에서 CSS를 지원하기 때문에 코드에 데스크톱 이미지를 삽입 한 다음 모바일 이미지를 스타일로 삽입했습니다. CSS :이미지를 모바일에 표시하지만 이미지를로드 중입니까?

<style> 
    @media only screen and (max-device-width: 470px) { 
    span[id=mobile] { 
     display:block; 
     background-image: url(mobile.gif) !important; 
     background-repeat: no-repeat !important; 
     background-position: center !important; 
     width: 320px !important; 
     height: 290px !important; 
    } 
    img[id=desktop] {display: none !important;} 
    } 
</style>

내 HTML : 이것은 내 코드입니다

<span id="mobile"> 
    <img id="desktop" src="desktop.gif" alt=""> 
</span>

모든 것이 잘 작동, 내가 가진 유일한 문제는 각 지프의 크기 2백20킬로바이트에 대한 것입니다. 하나만로드되면 모바일에 적합하다고 생각합니다. 지금은 데스크톱 버전을 표시하지 않지만 완전히로드됩니다. 거기에 하나의 해결 방법 만로드 하나? 너무 큰 이미지 파일에서 별도로

출처

2016-12-12 Niqql

모바일 용으로 220mb gif가 _not_입니다. 큰 이미지는 휴대 전화의 대부분의 앱보다 훨씬 큽니다. 인터넷 속도가 12mbps로 올라가면 GIF가 다운로드되기 전에 이메일에있는 내용을 읽고 삭제할 수 있습니다. – Gerrit0

나는 220kb를 의미했다, 미안하다! – Niqql

선택기 (span [id = mobile])는 스타일을 완전히 제거하지 않는 최신 Gmail App에서는 지원되지 않습니다. # Mobile에서 Android Gmail에서 어떤 작업이든 수행하도록 변경하십시오. –

다른 이메일 클라이언트가이를 다르게 처리하지만 HTML 본문에 이미지를 숨기고 미디어 쿼리에 선택적으로 표시해 보았습니까? 기본적으로 이미지가 display:none; 인 경우 HTML을 읽는 이메일 클라이언트가 바로 다운로드하지 않을 수 있습니다.

CSS

<style> 
    @media only screen and (min-device-width: 470px) { 
     img[id=desktop] { 
      display: block !important; 
     } 
    } 
</style> 

<!--[if !mso]> 
<style> 
    @media only screen and (max-device-width: 470px) { 
     span[id=mobile] { 
      display:block; 
      background-image: url(mobile.gif) !important; 
      background-repeat: no-repeat !important; 
      background-position: center !important; 
      width: 320px !important; 
      height: 290px !important; 
     } 
     img[id=desktop] { 
      display: none !important; 
     } 
    } 
</style> 
<![endif]-->

HTML

<span id="mobile"> 
    <img id="desktop" src="desktop.gif" alt="" style="display: none;"> 
</span>

다시 말하지만, 모든 이메일 클라이언트 이렇게 있는지 확실하지 않습니다.

중점을 둔 클라이언트는 무엇인지 모르지만 테스트 할 가치가있는 다른 옵션은 srcset입니까?

<img srcset="small.gif 1x, large.gif 2x" src="small.gif" alt="my gif" border="0">

iOS Mail은 커버리지가 충분하지는 않지만 iOS Mail을 커버해야합니다.

출처

2016-12-12 22:14:49

리트머스를 통해,이 솔루션이 대다수의 이메일 클라이언트에서 작동한다는 산성 및 실제 테스트 이메일을 통해 확인할 수 있습니다. 내가 발견 한 유일한 예외는 아직 스타일 시트 업데이트를받지 못했던 몇 안드로이드 네이티브 클라이언트 (1 % 미만 시장)와 일부 버전의 안드로이드 Gmail 앱 (매우 작은 마진)이었습니다. 또한 모바일 이미지 버전 주위에! mso 조건부를 추가하여 Outlook에서 답장과 전달에 둘 다 표시되지 않도록해야합니다. srcset은 널리 받아 들여지지 않습니다. – Gortonington

@Gortonington 훌륭한 아이디어는''에 관한 것이고, 나는 나의 대답을 업데이트했다! –

Gortonington의 훌륭한 답변과 테스트에 감사드립니다!나는 이것을 구현하고 그것을 테스트 할 것이다. 다른 클라이언트의 이메일 파일 크기를 측정하는 도구가 있는지 알고 있습니까? – Niqql

(220메가바이트 -? ... 어 어) 첫 min-device-width: 471px 것과 같은 미디어 쿼리에 다음 을 모바일에 배경 이미지를 정의하고 같은 당신은 라운드 그것을 다른 방법을 수행해야합니다 데스크톱 용. 그러면 데스크톱 이미지가 모바일 장치에로드되지 않습니다.

출처

2016-12-12 15:34:02 Johannes

예를 들어 Outlook에서 스타일을 사용하지 않기 때문에이 방법을 사용했습니다. 그리고 대부분의 모바일 클라이언트가 있습니다. 또한 나는 220kb를 의미했다, 실수를해서 유감스럽게 생각한다. – Niqql

이미지를 모바일에 표시하지만 이미지를로드 중입니까?

답변

관련 문제