웹 이미지로 대처할 수없는 경우 [비디오]

게시 됨: 2020-12-22

대처할 수없는 웹 이미지 비디오 웹 기반 시각적 콘텐츠에 대해 전략적으로 생각하려면 사용할 이미지를 선택하는 것 이상을해야합니다. 또한 이러한 이미지가 크고 작은 화면에서 작동하는지 확인해야합니다.

이미지가 모든 화면 크기에서 작동한다면 좋습니다. 하나의 파일을 업로드하면 (이미지를 단일 소스로) 사용할 수 있습니다.

모든 이미지가 당신의 삶을 그렇게 쉽게 만드는 것은 아닙니다. 때로는 모든 장치의 이미지에서 필요한 것을 사람들에게 제공하기 위해 여러 버전의 이미지를 제공하는 것이 좋습니다.

The Medicines Company의 콘텐츠 전략 선임 이사 인 Buddy Scalera는 말합니다. 지능형 콘텐츠 컨퍼런스 강연에서 확장 가능한 시각적 콘텐츠 전략의 생성 및 실행에서 Buddy는 그가 그렇지 않은 경우를 제외하고는 모두 단일 소싱을위한 것이라고 말했습니다. 그는 특히 이미지와 관련하여 자신과 다른 사람들이 "주로 COPE"(COPE-M)라고 부르는 것을 옹호합니다.

COPE는 "한 번만 만들고 모든 곳에 게시"를 의미합니다. COPE 콘텐츠는 단일 소스 콘텐츠입니다. 여러면에서 COPE 콘텐츠가 이상적입니다. 제품 설명, 사양, 정의, 이미지와 같은 콘텐츠 청크를 한 번 생성하면 시스템이 해당 청크를 여러 결과물로 끌어 올 수 있습니다 (붙여 넣기가 아님). 소스를 업데이트하면 업데이트가 저장소를 통해 파급됩니다. COPE 콘텐츠는 우아합니다. 효율적입니다. 논리적입니다. 번역 비용에서 수백만 달러를 절약 할 수 있습니다. 그것은 그들이 당혹스럽고 미친 짓을하고 소송을 일으키는 불일치를 피하는 데 도움이됩니다. COPE는 텍스트, 오디오 및 비디오 (YouTube를 사용하는 경우)에서 잘 작동합니다.

그래도 때때로 COPE는 잘못된 길입니다. 최신 브라우저는 텍스트를 리플 로우하지만 이미지는 장치에 맞게 축소됩니다. 데스크톱에서 멋지게 보이는 이미지는 스마트 폰에서 인식되지 않을 수 있습니다. (안녕하세요, 핀치 앤 줌.)

이것이 COPE-M의 M이 등장하는 곳입니다.“다 채널 재사용을 위해 콘텐츠를 준비하는 것이 좋은 목표이지만 모든 콘텐츠가 COPE 모델에서 효과적으로 확장되는 것은 아닙니다.”라고 Buddy는 말합니다.

COPE (Create Once, Publish Everywhere)는 종종 이미지를 사용하는 잘못된 방법이라고 @BuddyScalera는 말합니다. #intelcontent 트윗하려면 클릭

이 기사에서는 ICC 강연에서 Buddy의 조언을 요약합니다. 이 게시물의 모든 이미지는 그의 슬라이드에서 가져온 것이며, 달리 언급되지 않는 한 모든 인용문은 그의 강연과 그와의 후속 대화에서 나온 것입니다.

직접 선택한 관련 콘텐츠 :
킬러 콘텐츠로 소셜 씬을 지배하는 11 가지 방법

일부 이미지로 대처하기 어려운 이유

버디는 이미지에 대해 "진실 폭탄"이라고 부르는 것을 떨어 뜨립니다. 이미지는 텍스트와 동일하지 않습니다.

텍스트는 모양과 분리 될 수 있으므로 단일 소싱에 적합합니다. 계단식 스타일 시트를 사용하면 기본 텍스트 소스를 변경하지 않고도 텍스트의 모양이 인스턴스마다 다를 수 있습니다. "텍스트는 디지털 세계에서 훌륭하게 작동하는 훌륭하고 유연하며 흐름과 재사용이 가능한 채널에 구애받지 않는 자산입니다."라고 그는 말합니다.

이미지는 그렇지 않습니다. 그들은 외모와 분리 될 수 없습니다. 이미지의 경우 하나의 크기가 항상 모든 것에 맞지는 않습니다.

Justyn Hornor가 몇 년 전에 말했듯이 반응 형 웹 디자인의 "방 안의 코끼리"는 "이미지 처리 방법"입니다. 작은 이미지는 휴대폰에서는 선명하게 보이고 고해상도 모니터에서는 엄청나게 작게 보일 수 있습니다. 큰 이미지는 작은 이미지로도 충분한 작은 장치에서 렌더링하는 데 오랜 시간이 걸릴 수 있습니다.

반응 형 웹 디자인의 경우 이미지를 처리 ​​할 때 하나의 크기로 모든 것이 맞지는 않습니다. #intelcontent 트윗하려면 클릭

멀티 소싱 이미지에 대해 생각하는 방법

하나의 이미지가 모든 장치에서 작동 할 것으로 기대하는 대신, 여러 이미지를 업로드 한 다음 시스템에 각각을 사용할 중단 점을 알려주는 것이 적어도 가끔은 가치가 있음을 알 수 있습니다.

여러 이미지를 업로드하고 각 이미지를 사용할 중단 점을 시스템에 알립니다. @BuddyScalera #intelcontent 트윗하려면 클릭하세요

다중 소싱 이미지 중단 점

중단 점은 시스템이 하나의 이미지 가져 오기를 중지하고 대신 다른 이미지를 가져 오는 지점입니다. 장치의 해상도에 따라 더 크거나 더 작은 이미지입니다. 이 그림은 세 가지 가능한 중단 점 (휴대폰의 경우 320 픽셀, 태블릿 또는 대형 휴대폰의 경우 720 픽셀, 랩톱의 경우 1,024 픽셀)을 보여줍니다.

중단 점은 무한한 수직 스크롤 가능성이 있지만 너비가 제한되어 있기 때문에 장치 너비에 따라 정의됩니다.

Buddy는 자신의 회사 콘텐츠 팀 중 한 명이 특정 제품에 대한 의사의 질문에 답하는 그래프가 포함 된 브로셔를 인쇄 한시기를 설명합니다.

그래프는 인쇄에서 멋지게 보였습니다. 그리고 그들은 그것을 웹 사이트에 올렸고, 그것은 더 작아졌습니다. 스마트 폰에서 볼 때 차트를 읽을 수 없습니다. 병원에서 스마트 폰으로 무언가를 찾는 사람들은 시급합니다. 그들은 답이 필요합니다. 집거나 확대 / 축소 할 필요가 없습니다.

대부분의 경우 웹 사이트에 하나의 큰 이미지를 업로드하고 (즉, 이미지를 단일 소스로) 브라우저에서 크기를 조정할 수 있습니다. 다른 경우에는 이미지를 작은 창이나 화면에 넣으면 거의 읽을 수 없게됩니다. 이 점을 설명하기 위해 Buddy는 브라우저가 800 픽셀 너비의 딸 사진을 조정할 때 어떤 일이 발생하는지 보여줍니다.

브라우저 규모의 예

이것은 COPE 예입니다. 안타깝게도 브라우저가이 이미지를 좁은 창이나 화면에 맞게 조정하면 소녀의 얼굴을보기가 어렵습니다. 이 이미지가 차트 또는 인포 그래픽 인 경우 작은 화면의 텍스트를 읽을 수 없게 될 수 있습니다.

브랜드 내러티브에 중요한 시각적 요소의 경우 여러 이미지를 사용하기 위해 추가 노력을 기울일 수 있습니다. Buddy가 "반응 형 아트 디렉션"이라고 부르는이 접근 방식은 사람들이 모든 화면에서 중요한 세부 사항을 만들 수있는 더 나은 기회를 제공합니다.

브랜드 내러티브에 중요한 # 시각적 요소의 경우 반응 형 아트 디렉션을 사용하세요. @BuddyScalera는 말합니다. 트윗하려면 클릭

반응 형 ARRT 방향

Buddy는 이미지 너비를 800에서 400, 200 픽셀로 변경함에 따라 이미지 구성도 변경합니다. 이것은 COPE가 아닙니다. 이미지 기획입니다. 800 픽셀 너비의 사진은 3 와이드 가로 사진에서 소녀와 개를 나란히 보여줍니다. 400 픽셀 너비의 사진은 소녀들을 더 단단하게 묶고 2 개의 너비 세로 사진을 위해 개를 앞쪽으로 집어 넣습니다. 200 픽셀 폭의 샷은 세 인물을 모두 토템폴 배열로 압축합니다.

Buddy의 예제 페이지를 브라우저에서보고 창을 늘리고 좁힌 경우 HTML 코드에 지정된 중단 점 중 하나에 도달 할 때마다 이미지가 변경됩니다. 사용자 경험을 이해하려면 다음 6 초 동영상을 재생하세요.

자신의 브라우저에서이 동작을 경험하려면 창 너비를 변경할 수있는 장치에서 Buddy의 예제 페이지를 방문하십시오.

이 게시물은 이러한 종류의 코드를 작성하는 방법에 대한 자습서는 아니지만이 코드가 어떻게 생겼는지 확인하는 것이 유용 할 수 있습니다.

중단 점 코드 예제

주목해야 할 주요 사항 ( "picture"태그 사이를 봅니다)은 Buddy가 세 가지 소스 이미지를 지정했다는 것입니다.

  • GirlsDog_200w.jpg
  • GirlsDog_400w.jpg
  • GirlsDog_800w.jpg

각 JPG 파일은 중단 점에 할당됩니다.

  • 최대 너비 : 499px
  • 최대 너비 : 799px
  • 최소 너비 : 800px

얼마나 많은 중단 점을 만들어야합니까? 최대 및 최소 너비를 어떻게 결정합니까? 규칙이 없습니다. Buddy가 지적하는 훌륭한 기사에서 Jason Grigsby는 "이미지 중단 점을 선택하는 것은 모든 사람이 직면하게 될 일이며 솔직히 여러분에게 좋은 답변이 없습니다."라고 말합니다.

웹 사이트의 모든 이미지에 대해 여러 이미지를 만들지는 않을 것입니다. 고객에게 정말로 중요한 이미지를 결정하십시오. 이미지 (예 : 그래프, 차트, 제품 사진)가 사용자에게 정말 중요하다는 것을 알고 있다면 해당 이미지를 렌더링하는 방법을 결정하기 위해 웹 브라우저에 맡기지 마십시오. 제어하십시오.

DAM (디지털 자산 관리) 시스템 중 일부는 다양한 크기와 비율로 단일 이미지의 여러 출력을 생성 할 수 있다는 점에 주목할 가치가 있습니다. Buddy가 별도의 사진으로 한 작업을 복제하지는 않지만 소프트웨어 시스템이 제공하는 것을 탐색해야합니다.

제가 제안 할 수있는 유일한 규칙은 다른 콘텐츠에 대한 전략적 결정을 내리는 것과 동일한 방식으로 이미지에 대한 전략적 결정을 내리는 것 입니다. 시청자에게 무엇이 필요하고 왜 필요한지 자문 해보세요. 다양한 이미지와 중단 점으로 실험하십시오. 반복.

청중이 무엇을 필요로하고 왜 그런지 물어보십시오. 다양한 이미지 및 중단 점으로 실험하십시오. 반복. @BuddyScalera 트윗하려면 클릭하세요

Buddy가 시각적 콘텐츠를위한 확장 가능한 전략을 만들고 실행하는 방법에 대한 자세한 내용은 주석이 달린 ICC 프레젠테이션을 참조하세요.

직접 선택한 관련 콘텐츠 :
모바일 청중을위한 비주얼 콘텐츠 제작 방법

이미지를 멀티 소싱해야하는 경우

모든 이미지에 대해 여러 소스 파일을 만드는 문제를 겪고 싶지는 않지만 전환 페이지의 기본 이미지와 같이 가장 영향력이 큰 이미지를 멀티 소싱하는 것이 좋습니다. 버디가 말했듯이 :

웹 사이트에 지출 된 모든 비용을 생각해보십시오. 기계가 모든 이미지를 처리하는 방법을 결정하게하고 사람들이 때때로 핵심 이미지를 볼 수 없다면 기회를 놓치고있는 것입니다.

@BuddyScalera는 전환 페이지의 주요 이미지를 멀티 소싱합니다. #intelcontent 트윗하려면 클릭

웹 사이트의 중요한 페이지와 이미지를 알고 있습니다. 분석 소프트웨어에 이미 태그가있을 것입니다. Buddy는 "디자이너가 콘텐츠를 만드는 데 사용한 멋진 와이드 스크린 모니터뿐만 아니라"모바일 장치에서 이러한 페이지를 테스트하는 것이 특히 중요합니다.

또한 대부분의 사람들이 소형 장치에서 보는 다른 페이지의 멀티 소싱 이미지도 고려하십시오. “스마트 폰 장치에서 얼마나 많은 트래픽이 발생하는지보십시오. 우리와 같다면 65 %가 당신의 청중입니다. 그들에게 음식을 제공해야합니다.”라고 Buddy는 말합니다. 스마트 폰 사용자가 핀치 및 확대 / 축소없이 이미지를 읽을 수없는 경우 작은 화면에 맞게 이미지를 사용자 지정할 수 있습니다.

멀티 소싱 할 이미지를 파악하는 가장 좋은 방법은 여러 장치에서 웹 페이지테스트하는 것 입니다. 콘텐츠 전략, 디자인, 콘텐츠 엔지니어링 및 사용자 경험의 동료를 포함한 모든 콘텐츠 팀은 웹 사이트의 이미지가 스마트 폰에로드되는 방식을 알아야합니다. 장치 스택과 디자이너, 콘텐츠 전략가 또는 UX 담당자를 확보하십시오. 고객이 원하는 방식으로 콘텐츠를로드합니다. Buddy는“웹 사이트에로드 한 이미지가 약간 찌그러져 보이면 브라우저가 이미지 자산을 확장하는 방법을 고려하고 그에 따라 계획을 세웁니다.

직접 선택한 관련 콘텐츠 :
귀하의 콘텐츠는 모바일 인수를위한 준비가되어 있습니까?

결론

콘텐츠 시스템이 모든 장치에서 각 이미지에 대한 이상적인 경험을 사람들에게 자동으로 제공 할 수있을만큼 스마트해질 때까지 COPE를해야 할 때와 이미지를 사용하지 않을 때를 고려하십시오. 추가 노력을 기울이고 특정 이미지를 멀티 소싱하는 데 비용이들 수 있습니다.

당신의 팀은 어떻습니까? 다양한 화면 크기를 수용하기 위해 중요한 이미지의 여러 버전을 만드는 경우가 있습니까? 여러 장치에서 이미지를 테스트하여 무엇을 배웠습니까? 의견을 통해 알려주십시오.

다음은 Buddy의 강연에서 발췌 한 내용입니다.

CMI 최고 콘텐츠 고문 Robert Rose의 독점적 인 이야기와 통찰력을 제공하는 마케팅 담당자를위한 주간 콘텐츠 전략 e- 뉴스 레터 에 등록하십시오. 우리가 만나는 다른 많은 마케터와 같으면 매주 토요일에 그의 생각을 읽을 수 있기를 고대하게 될 것입니다.

표지 이미지 : Joseph Kalinowski / Content Marketing Institute