이메일 이미지 관리의 4가지 치명적인 실수

이메일은 빙산과 같습니다. 우리는 종종 CTA, 제목, 복사 품질 과 같은 이메일 의 가장 눈에 띄는 측면에 초점을 맞추면서 최종 사용자에게 즉시 표시되지 않는 다른 많은 부분을 최적화하는 것을 잊어버립니다. 그러나 아아, 이것들은 진정으로 기본 메시지와 전문 메시지 사이의 차이를 만들 수 있습니다.

오늘은 이메일 이미지를 관리 하는 동안 발생할 수 있는 몇 가지 오류를 살펴보겠습니다. 실제로, 이미지 의 그래픽 렌더링 에 모든 주의를 집중하는 경우가 종종 있습니다. 아티스트나 디자이너의 작업 시간, 클릭 한 번으로 이메일 마케팅 플랫폼에 업로드하는 작업 등입니다.

그러나 최적의 성능을 얻으려면 해상도가 좋고 미학적으로 아름다운 이미지를 갖는 것만으로는 충분하지 않습니다 . 최소한 두 가지 추가 단계가 있어야 합니다.

• 그래픽 부서에 대한 정확한 브리핑 을 통해 이메일용 이미지를 생성할 때 이메일 채널의 사양과 요구 사항을 고려해야 합니다.
• 실패 또는 잘못된 이미지 표시 가능성을 최소화하기 위해 플랫폼에서 사후 로드 작업 (예: 곧 논의할 대체 텍스트 포함)

그런 다음 이메일 이미지를 관리할 때 저지르는 가장 일반적인 4가지 오류 를 살펴보겠습니다. 순서는 완전히 무작위입니다.

1. 이미지가 너무 무겁다

모든 사람은 특히 멋지게 정의된 경우 예쁜 그림을 탐구하는 것을 좋아합니다. 그러나 우리는 우리가 사용하는 매체를 항상 염두에 두어야 합니다. 이메일 클라이언트가 이미지를 미리 차단하지 않는다고 가정합니다. 그러면 일반적으로 커뮤니케이션과 함께 첨부 파일로 전송되지 않는 한 이미지가 이메일을 열 때만 다운로드 된다고 가정할 수 있습니다.

이메일이 클라이언트나 브라우저에서 열리면 다운로드하여 표시할 이미지가 저장된 서버에 대한 요청이 시작 됩니다. 분명히 이것은 연결 대역폭이 교환 클라이언트/서버 데이터에 의해 점유 된다는 것을 의미합니다.

이제 대역폭은 무한하지 않습니다. 파일 무게가 이미지를 쉽게 다운로드하고 표시하는 데 방해가 되지 않는다는 것이 얼마나 중요한지 확실히 알 수 있습니다.

모바일에서는 1MB의 이미지가 약 0.3초 만에 다운로드됩니다. 일반적으로 웹 페이지를 열 때까지 기다리는 시간을 생각해 보십시오. Kinsta에 따르면 사용자의 74%는 5초 이내에 로드되지 않는 페이지를 포기합니다. 반면 Soasta의 아래 데이터는 전환율이 시작되는 방식을 보여줍니다. 2초 전에 쓰러집니다.

이러한 제한된 데이터를 통해 로딩 시간을 과도하게 늘리지 않고 이미지를 올바르게 처리 하여 빠르게 다운로드할 수 있을 만큼 가벼우 면서 동시에 거친 효과 를 피하기 위해 해상도를 보호하는 것이 얼마나 중요한지 알 수 있습니다.

다음은 가벼운 무게와 좋은 해상도 사이의 올바른 균형을 보장하기 위한 권장 사항입니다.

• 약 50KB의 최대 가중치 유지
• 이미지 해상도 가 72dpi인지 확인하십시오.
• JPG, GIF 또는 PNG로 이미지를 저장합니다.

2. 이미지가 너무 크거나 너무 작습니다.

너무 유혹적인 연습입니다. 광고 캠페인이나 웹사이트를 위해 찍은 이미지나 사진이 있는 경우 이메일 캠페인에도 사용하면 안 되는 이유는 무엇입니까?

응 해봐. 그러나 적절한 예방 조치 가 없으면 이러한 이미지의 크기(높이 및 너비) 가 메시지에 적합 하지 않거나 제대로 작동 하지 않는다는 점 을 기억하십시오.

좀 더 자세히 알아보자. HTML 태그 img를 사용하면 이미지 의 높이와 너비를 정의할 수 있습니다 . 예를 들어, 다음 코드 줄은 이미지 높이가 123픽셀이고 너비가 456픽셀이 되도록 지정합니다.

<img src="[ImagePath]" 높이="123" 너비="456">

실제 크기에 관계없이 하나 또는 두 매개변수를 모두 설정하면 브라우저 에 지정된 너비와 높이의 이미지 가 표시 됩니다. 즉, 서버에 있는 이미지의 크기가 태그에 설정된 것보다 작으면 확대되고 , 크면 축소됩니다.

따라서 이메일에 최적화되지 않은 크기 의 이미지를 사용하는 경우 두 가지 가능한 결과가 발생할 수 있으며 어느 쪽이든 나쁜 결과를 초래할 수 있습니다.

1. 필요한 것보다 큰 이미지 : 더 큰 무게와 낭비되는 대역폭, 섹션 1의 경우 차질이 있음
2. 필요보다 작은 이미지 : 강제 확대, 품질 손실 및 거친 효과

망막 또는 일반 화면?

Apple이 2010년에 도입한 Retina 화면에 대한 별도의 논의가 있습니다. Retinal 기술은 단위 면적당 더 높은 픽셀 밀도에 의존하므로 Cupertino에 따르면 인간의 눈이 개별 픽셀을 인식할 수 있습니다. 그러면 이미지가 더 균일하고 보기가 더 즐겁고 눈이 덜 피로해 집니다.

Retina 화면당 픽셀 밀도는 일반 화면의 약 2배이므로 거친 효과를 방지 하려면 이미지 크기 를 두 배로 늘려야 합니다. 예를 들어 이메일의 이미지 크기가 250×145픽셀(예: <img height=”250″ width=”145″)인 경우 500×290픽셀의 이미지를 사용해야 합니다.

우리의 팁

• 이메일 크기에 맞게 이미지 자르기
• 모든 이미지를 동일한 폴더에 저장 하여 편집 시 동일한 소스와 더 많은 제어 권한을 갖습니다.
• 이미지의 크기를 설정 하지 말고 이미지가 있는 프레임 내부에서 유동적으로 유지하여 커뮤니케이션 구조가 이미지를 "모양"할 수 있도록 합니다.

3. 애니메이션 GIF가 최적화되지 않았습니다.

(GIF와 같은) 애니메이션을 커뮤니케이션에 추가하면 메시지가 확실히 부각됩니다. 이것은 특히 그래픽 디자인이 신중하게 만들어지고 독창적인 경우 관심을 끌 수 있는 매우 효과적인 방법 입니다.

애니메이션 GIF를 이메일에 삽입하는 것은 쉽지만 일반적인 정적 이미지보다 조금 더 주의를 기울여야 합니다.

이메일에 애니메이션 GIF를 삽입하는 방법 알아보기 >

일부 역사: GIF( Graphics Interchange Format의 약자) 는 1987년에 태어났습니다 . 기본 아이디어는 압축하는 동안 이미지 품질의 손실을 방지할 수 있도록 이미지를 구성하는 데이터와 함께 포함할 기본 색상 세트를 정의하는 것이었습니다.

1989년부터 형식은 두 가지 중요한 혁신을 받았습니다. 투명도와 무엇보다도 애니메이션으로 가는 길을 닦은 여러 이미지입니다.

그 이후로 전 세계의 디자이너들은 상상력을 자극 하여 웹에 넘쳐나는 역사적인 GIF를 만들었습니다. 현재까지 GIF의 상태는 매우 우수합니다 . 우리는 매일 이메일에 포함되는 방식뿐 아니라 giphy.com과 같은 사이트의 운에 대해서도 생각하고 있습니다.

그러나 모든 경우와 마찬가지로 이 경우에도 사용 중인 미디어에 주의를 기울여야 합니다. 우선, KB 단위의 애니메이션 GIF의 가중치는 애니메이션 의 프레임 수와 크기에 따라 빠르게 증가 한다는 점을 고려해야 합니다. 따라서 처음부터 만들 애니메이션 유형에 대해 신중하게 생각하는 것이 좋습니다.

둘째, 일부 클라이언트는 애니메이션을 전혀 표시하지 않는다는 점을 고려해야 합니다 . 기본 클라이언트 중 하나(Outlook 2007-2013)는 다음 예와 같이 첫 번째 프레임만 표시합니다.

우리의 팁

• 이미지의 총 무게에 주의 하십시오(섹션 1에서 말한 내용을 기억하십시오!)
• 이메일당 하나 이상의 애니메이션을 사용하지 마십시오.
• 너무 많은 프레임을 사용하지 마십시오 . GIF는 비디오가 아닙니다!
• 전체 어셈블리를 손상시킬 수 있는 지나치게 복잡한 애니메이션 방지
• 첫 번째 프레임이 통신에 대한 완전한 아이디어를 제공 하는지 확인 하고 어떤 경우에도 비어 있지 않은지 확인하십시오.
• 애니메이션의 전체 무게를 줄이기 위해 촬영 기법, 예를 들어,을 활용

4. 대체 텍스트 가 부족합니다.

이미지 없이 생성된 이메일은 요즘 점점 더 희귀해지고 있습니다. 그러나 일부 이메일 클라이언트는 기본적으로 이미지를 표시하지 않으며 여러 가지 이유로 일부 사용자는 이미지를 비활성화하는 것을 선호합니다. 이러한 경우 이메일에 메시지를 전달할 수 있는 대체 방법이 없으면 커뮤니케이션은 절망적으로 타협했다 .

따라서 <img> 태그의 alt 및 title 속성을 사용하여 HTML을 활용하여 이 중요한 문제를 효과적으로 해결하는 방법을 살펴보겠습니다.

구체적으로 특별히:

• 제목 은 마우스 포인터가 이미지 영역 위에 있을 때 콘텐츠 표시를 허용합니다.
• alt 는 이미지 로드에 실패한 경우 표시할 텍스트를 정의합니다(Alt Text).

따라서 전략적으로 고려 하는 이미지 (예: 브랜드 로고, 비주얼, 제품 등) 에 이 두 속성 을 항상 추가하고 이미지 에 포함된 내용에 대한 설명과 함께 값을 부여하는 것이 매우 중요합니다.

제목 속성

속성 제목이 어떻게 작동하는지 봅시다. 그림에서 코드에 입력된 텍스트와 함께 커서 아래에 작은 창이 나타난 것을 볼 수 있습니다. 따라서 이 부분을 활용하여 이미지에 있는 내용을 보완하는 추가 정보를 추가할 수 있습니다.

Alt 속성

이제 확실히 더 많은 작업 공간이 있는 alt 속성의 동작을 분석해 보겠습니다.

아래 스크린샷은 이미지 업로드 를 제외 하는 이메일 클라이언트에 대해 뉴스레터가 어떻게 표시되는지 보여줍니다. 링크 및 이전에 방문한 링크의 존재를 각각 표시하는 클래식 파란색 및 보라색 링크 를 볼 수 있습니다.

분명히 이메일 마케팅을 하는 사람은 이 정도에 만족하지 않습니다. 좋습니다. 이미지가 표시되지 않을 때 링크가 있는 텍스트가 나타납니다. 그러나 확실히 이 보기는 시각적으로 눈에 거슬리고 읽기가 너무 어렵습니다.

이 상황을 개선할 수 있습니까? 여기에 CSS가 도움이 됩니다. 텍스트처럼 이미지에 인라인 스타일을 적용하여 색상(소셜 미디어 블록 참고)뿐만 아니라 크기, 글꼴 및 밑줄도 정의할 수 있습니다.

전체 코드를 보자. alt 및 title 속성 외에도 이미지에는 크기 (16px), 글꼴 유형(Helvetica, Arial, …) 및 텍스트 색상(#ffffff) 을 정의하는 인라인 스타일 이 있습니다. 짐을 실은.

이렇게 하면 이미지가 제대로 표시되지 않더라도 최소한 정보가 완전히 손실되지는 않습니다 . 이 기술을 적용하면 멋진 형식의 텍스트를 통해 여전히 정보를 얻을 수 있으며 클릭할 수 있는 링크가 있음을 강조 표시합니다.

우리의 팁

• 반드시 가장 중요한 이미지는 고도와 제목 속성에 대해 항상 값이 있는지 확인;
• 입력한 텍스트를 초과 하지 마십시오. 너무 길어서 통신에서 여러 페이지를 생성하거나(alt의 경우) 사용하기 어려울 수 있습니다(제목의 경우).
• 대체 텍스트 색상이 크기와 색상 면에서 모두 쉽게 읽을 수 있는지 확인하십시오 . 특히 배경색이 있는 경우에는 더욱 그렇습니다.
• 바람직하게는 , 링크가 있는 대체 텍스트에 밑줄을 남겨서 커뮤니케이션 내에서 그 기능을 쉽게 인식할 수 있도록 합니다.

이메일의 이미지에 대한 경험은 어떻습니까? 아래 의견 섹션에서 알려주십시오!