이메일 코드 102: 이미지 작업

게시 됨: 2020-05-01

코드가 쏟아져 나오는 것을 보는 것은 믿을 수 없을 정도로 위협적이고 때로는 좌절감을 느낄 수 있습니다. 마케터부터 마케터까지, 보이는 것보다 훨씬 쉽다는 것을 약속드립니다. 또한 이메일 HTML을 탐색할 수 있다는 것은 매우 귀중한 기술입니다. 이메일 코드 기본 시리즈에서는 이메일 코드에 익숙해지기 위해 알아야 할 이메일 HTML 기본 사항을 알려드립니다.

지난 게시물에서 이메일 코드 를 탐색하여 링크를 업데이트하거나 복사를 빠르게 변경하는 방법에 대해 알아보았습니다. 그러나 이미지는 어떻습니까?

이미지는 많은 고성능 이메일의 중추입니다. 그러나 복잡성이 계속 증가하고 다양한 파일 형식, 크기, 액세스 가능성 및 고려해야 할 로드 시간으로 인해 가장 숙련된 마케터조차 압도할 수 있습니다.

이 기사에서는 이메일에 이미지를 추가하는 가장 일반적인 몇 가지 방법에 대해 설명하고 구독자가 좋은 경험을 할 수 있도록 기본 사항을 살펴봅니다. 이미지에 대해 자세히 알아보려면 다음 가이드를 확인하세요.

이메일의 배경 이미지에 대한 궁극적인 가이드
이메일의 애니메이션 GIF 가이드
HTML 이메일에서 이미지 사용

이 가이드에서 다루는 주제를 쉽게 따라갈 수 있으므로 Litmus Builder에서 이메일을 열면 시작하겠습니다!

이미지 준비

이메일에 이미지를 추가하기 전에 이미지가 성공적으로 설정되었는지 확인하십시오. 먼저 사용 중인 이미지가 이메일에 적합한 파일 형식과 크기 인지 확인합니다 . 파일 크기가 크면 로드 시간이 느려져 전체 전환 및 참여가 감소하므로 빠르게 로드되는 가벼운 이미지를 사용하고 있는지 확인하십시오.

이미지 삽입

코드에서 이미지를 추가할 위치를 찾습니다. Litmus Builder를 사용하는 경우 그리드 보기를 켜서 이미지를 표시할 위치를 클릭한 다음 코드 보기를 클릭합니다. 완벽한 지점을 찾았으면 <img> 태그를 사용하여 이미지를 추가하되 여기에서 URL을 이미지에 대한 직접 링크로 바꾸십시오.

직접 링크가 무엇인지 확실하지 않은 경우 파일 이름의 끝을 찾으십시오. ".png", ".jpg" 또는 ".gif"와 같은 이미지 파일 형식으로 끝나야 합니다. 폴더 또는 HTML에 대한 링크는 여기에서 작동하지 않습니다. 이메일에 추가하는 이미지를 직접 가리켜야 합니다.

 <img src="img-url.jpg" />

그게 다야! 태그를 추가하면 Litmus Builder에 있는 경우 이미지가 미리보기 창에 표시됩니다.

이미지를 호스팅할 수 있는 위치가 궁금하십니까? 대부분의 ESP에는 이미지를 업로드하고 이메일의 이미지 소스에 해당 공개 URL을 사용할 수 있는 파일 호스팅 시스템이 있으므로 먼저 ESP를 확인해야 합니다. ESP가 이미지 파일 호스팅을 제공하지 않는 경우 이미지 호스팅을 위해 Amazon의 AWS 또는 자체 웹사이트의 FTP 서버를 사용하는 것을 고려하십시오.

올바른 치수 찾기

이미지를 삽입하려는 공간의 두 배 크기의 이미지를 사용하는 것이 가장 좋습니다. 그래야 모든 모니터에서 잘 보이고 픽셀화나 흐릿함이 없습니다. 이전 단계에서 빌드한 <img> 태그에 수정자를 추가하여 이미지의 너비와 높이를 조정합니다. 다음과 같이 보일 것입니다.

 <img src="img-url.jpg" width="400" height="100" />

이메일에 적합한 항목에 따라 너비와 높이 값을 조정합니다. 이러한 값을 사용하여 변경한 다음 Builder의 미리보기 창을 클릭하여 업데이트된 값을 확인하여 값이 어떻게 보이는지 확인할 수 있습니다.

대체 텍스트 추가

ALT 텍스트는 이미지를 설명하므로 이메일 클라이언트에서 이미지가 비활성화되어 있거나 스크린 리더에 의존하는 사람들이 쉽게 이메일을 읽을 수 있습니다. 예를 들어, 20% 할인을 제공하는 판촉 이미지가 있는 경우 제안을 설명하는 일부 ALT 텍스트를 추가하면 어떤 이유로든 이미지를 볼 수 없는 경우에도 독자가 제안을 알 수 있습니다.

 <img src=”img-url.jpg” width=”400” height=”100” alt=”20% off all seeds” />

최고의 ALT 텍스트는 설명적이고 간결하며 이미지와 동일한 의도를 가지고 있습니다. 보내기 전에 Litmus Checklist를 통해 이메일을 실행하면 누락된 ALT 텍스트에 플래그를 지정하여 쉽게 들어가서 업데이트할 수 있습니다. 이제 개발자에게 확인하지 않아도 됩니다!

이미지 교체

한 이미지에 마음이 바뀌셨나요? 두 가지 옵션이 있습니다.

1. 새 이미지를 생성하는 것과 마찬가지로 이미지를 가리키는 URL을 새 이미지로 바꿀 수 있습니다. 이렇게 하면 모든 치수, ALT 텍스트 또는 이미지 스타일을 지정하는 데 도움이 될 수 있는 모든 것이 유지되고 이미지 콘텐츠 자체만 업데이트됩니다.

현재 이미지 태그를 가져와 파일 경로를 찾습니다.

 <img src=”img-url.jpg” width=”400” height=”100” alt=”20% off all seeds” />

경로를 새 이미지 경로로 바꿉니다.

 <img src=”updatedimg-url.jpg” width=”400” height=”100” alt=”20% off all seeds” />

2. 이미지가 호스팅되는 위치에 따라 정확히 같은 이름 을 가진 새 이미지를 같은 위치에 업로드할 수도 있습니다. 그렇게 하면 이메일 이미지를 업데이트하기 위해 코드를 전혀 건드릴 필요가 없습니다.

완벽한 이메일

이제 이미지를 업데이트하고 수정할 수 있는 권한이 있으므로 해당 권한을 현명하게 사용하세요! 이메일의 이미지는 빠르게 잘못될 수 있습니다. 로드하는 데 시간이 오래 걸리는 대용량 파일, 전체 이메일에 이미지를 사용하거나 디자인을 위해 앞서 말한 접근성은 가입자 환경을 지저분하게 만들 수 있습니다.

다음은 이미지 라이브러리를 구축할 때 염두에 두어야 할 몇 가지 빠른 모범 사례입니다.

파일을 가볍고 부드럽게 유지하십시오. 1MB 미만이 가장 좋고 작을수록 좋습니다(Litmus Checklist는 로드 시간을 확인하므로 모든 단일 이미지 크기를 모르는 경우 걱정하지 마십시오.)
이미지가 보이지 않는 경우에도 이메일을 읽을 수 있고 액세스할 수 있도록 대체 텍스트 를 추가 합니다.
이미지 전용 이메일을 보내 확인 이메일 라이브 텍스트가하지 마십시오. 이미지를 사용하여 전체 이메일을 디자인하고 싶을 수 있지만 이미지가 비활성화된 사용자에게는 긴 로드 시간과 열악한 경험으로 참여도와 전환율이 저하될 수 있습니다.

특정 초보자 코드 질문에 대한 도움이 필요하십니까? 이 시리즈에서 다음에 보고 싶은 내용을 알려주십시오. 너무 기본적인 질문은 없습니다!

_____________________________________

이메일의 이미지에 대해 자세히 알아보기:

이미지 전용 이메일을 보내면 안 되는 이유
이메일의 애니메이션 GIF 가이드
HTML 이메일의 Retina 이미지 이해하기
PNG, GIF 또는 JPEG? 이메일에 가장 적합한 이미지 형식은 무엇입니까?
이메일의 애니메이션 GIF: 파일 크기를 작게 유지하기 위한 10가지 팁
이메일의 배경 이미지에 대한 궁극적인 가이드
이메일의 애니메이션 PNG: GIF의 대안?