자동으로 아트 디렉팅된 반응형 이미지? 여기 있습니다.

많은 프로젝트에서 반응형 이미지는 기술적인 문제가 아니라 전략적 문제 입니다. srcset 및 크기 및 <picture> 요소 및 Picturefill(또는 유사한) 폴리필을 사용하여 다른 화면에 다른 이미지를 전달하는 것이 기술적으로 가능합니다. 그러나 이미지의 이러한 모든 변형은 기존 CMS의 논리로 생성, 조정 및 구워져야 합니다. 그리고 그것은 쉽지 않습니다.

그 위에 반응형 이미지 마크업도 생성되어 HTML에 추가되어야 하며, 새로운 이미지 변형이 어떤 시점(예: WebP 또는 대형 가로/세로 변형과 같은 파일 형식)에서 작동하는 경우 마크업은 업데이트 할. 필요한 추가 작업량으로 인해 종종 문제가 발생합니다. 따라서 완벽한 제품 샷이 있는 경우 모바일 및 세로 및 가로 및 더 큰 보기에 대한 변형을 수동으로 생성하거나 플러그인 및 확장을 빌드하여 어떻게든 프로세스를 자동화해야 합니다.

때로는 해결 방법도 잘 작동합니다. 그 중 하나는 압축 이미지로, 압축 수준이 물리적 크기보다 더 큰 차이를 만든다는 것을 암시하는 영리한 기술입니다. 따라서 Scott Jehl의 말에 따르면 “웹 사이트에 동일한 크기로 표시되는 두 개의 동일한 이미지가 있는 경우, 압축률이 높고 표시되는 것보다 크기가 훨씬 클 경우 하나는 파일 크기에서 다른 것보다 극적으로 작을 수 있습니다. "

SmashingMag에 대한 추가 정보:

• CSS 배경 이미지가 있는 간단한 반응형 이미지
• Mobify.js로 반응형 이미지 자동화
• 반응형 웹 디자인에서 적응형 이미지를 해결하는 방법
• 아트 디렉션이 있는 WordPress의 반응형 이미지
  

따라서 기본적으로 주어진 이미지를 확대하고 Photoshop에서 가능한 최악의 품질로 저장하고 브라우저가 크기를 조정하도록 할 수 있습니다. 평균적으로 네트워크로 전송되는 실제 이미지의 크기 는 더 크지만 파일 크기. 이제 꽤 차이가 납니다. 그리고 실제 프로젝트에서 작동합니다.

단점: 작업을 클라이언트에 오프로드하고 사용자가 이미지를 저장하기로 선택하면 최적이 아닌 버전을 얻게 됩니다. 그리고 그것은 예술적 이미지에도 도움이 되지 않습니다. 그것은 우리가 찾고 있는 아주 깨끗한 해결책이 아닙니다.

악마는 ... 백 엔드에 있습니다!

일반적인 시나리오는 CMS에 일종의 백엔드 로직을 통합하여 콘텐츠 관리자가 이미지를 업로드하고, 주어진 모든 이미지에 대한 초점을 정의하고, 각 이미지의 잘린 변형을 모두 생성할 수 있도록 하는 것입니다.

"자르기" 비트는 까다로운 작업이며 아트 디렉션 없이 이미지 크기를 조정하고 브라우저가 가장 적합하다고 생각하는 이미지를 선택하도록 허용하면 큰 문제가 되지 않습니다. 크기 조정을 위해 ImageMagick 또는 기타 이미지 편집 도구를 사용하거나 CMS 플러그인이 알아서 처리할 수 있습니다. 예: Mobify.js API, WordPress 코어의 반응형 이미지 및 Drupal용 솔루션도 있습니다.

그러나 아트 디렉션 이 중요한 경우(예: 매우 특정한 제품 샷을 다양한 종류의 화면에 보내려는 경우) 고급 옵션을 살펴봐야 합니다. 좁은 뷰포트에 맞게 축소된 넓은 풍경 사진은 특히 도움이 되지 않으며 좁은 이미지도 와이드 스크린에서 전체 뷰포트를 채우기 위해 확대되지 않습니다. 더 우수하고 스마트한 솔루션이 필요한 이유입니다.

그래서 옵션은 무엇입니까?

Photoshop에서 내용 인식 채우기를 통해 일괄 처리를 실행하거나 JavaScript로 내용 인식 이미지 자르기 를 상당히 간단하게 구현한 Smartcrop.js와 같은 도구를 사용할 수 있습니다. 잠재적으로 smartcrop-cli(ImageOptim-CLI와 함께)를 Grunt 및 Gulp 구축 프로세스에 통합하고 즉석에서 이미지를 자릅니다. 자동 관심 지점 자르기와 함께 imgix를 사용할 수도 있습니다. 이미 좋은 시작이지만 모든 변형에 대한 마크업을 수동으로 작성해야 합니다.

좋은 소식: 블록 주변에 새로운 아이가 있습니다. 불과 며칠 전 우리는 이미지의 중단점을 대화식으로 계산할 수 있는 작은 오픈 소스 도구인 반응형 이미지 중단점 생성기에 대해 작성했습니다. 기본적으로 이미지를 업로드할 수 있으며 도구는 적절한 중단점을 감지하고 이미지 크기를 조정하며 HTML에 복사/붙여넣기할 수 있는 반응형 이미지 마크업을 생성 합니다. 더 나아가 도구의 API를 사용하여 직접 반응형 이미지를 자동으로 아트할 수 있습니다.

Eric Portis가 자신의 기사에서 설명했듯이 Cloudinary API를 사용할 때 CSS에서 background-size: cover 를 모방할 수 있는 crop_mode 를 지정할 수 있습니다. 높이와 너비를 제공하는 것 외에도 gravity 매개변수, 확대/축소 비율 및 제공 종횡비를 사용하여 초점을 지정할 수 있어 URL을 좀 더 읽기 쉽게 만들 수 있습니다. 실제로 API는 얼굴 감지를 지원하므로 이미지에 사람의 얼굴이 포함된 경우 아트 디렉션을 자동화할 수 있으며 꽤 괜찮은 크로핑 가능성이 더 높습니다.

이미지의 초점을 명시적으로 정의 하려면 Google Drive 및 Dropbox와 통합할 수 있고 자르기를 변경할 수 있는 브라우저 내 이미지 일괄 처리 도구인 Sizzlepig(무료가 아님)를 살펴볼 수 있습니다. 및 각 이미지에 대한 크기 조정.

요약

이상적으로는 "충분히 스마트한" 크롭을 생성하고 빌드에 반응형 이미지 마크업을 자동으로 연결하거나, 이미지의 초점을 시각적으로 조정하고 "준비된 상태"로 출력하는 하나의 인터페이스를 제공하는 하나의 도구가 있으면 좋겠습니다. 이동" 마크업. 우리는 아직 거기에 이르지 못했지만 곧 있을 것입니다.

한편, 위에 나열된 도구는 수동으로 또는 사용자 정의 CMS 플러그인을 구축하여 이미지의 예술 지향 변형을 생성하는 상당히 어려운 작업을 처리할 때 고려할 수 있는 충분한 옵션이 될 수 있습니다.