적응 가능한 시각적 요소

웹사이트에 영상을 업로드하면 Webflow는 업로드된 영상의 변형을 생성하여 모든 가젯에 원활하게 적응하고 신속하게 로드되도록 합니다. 이를 통해 모바일 페이지 로딩 속도를 최대 10배까지 향상시킬 수 있습니다.

시각적인 내용을 적응 가능하게 만들기 위해 브라우저는 페이지의 크기와 화면 해상도에 따라 시각적인 크기가 다른 버전을 제공합니다. srcset 그리고 크기 당신의 속성 <img> 강요). 다양한 크기의 시각적 버전에 대한 브라우저 액세스 권한을 부여하기 위해 Webflow는 각 시각적 사후 업로드에 대한 변형 세트를 만든 다음 각 변형을 제공할 시기를 결정하기 위해 브라우저에 대한 인코딩 지침을 제공합니다.

중대한: 초기 영상이 적절하게 압축된 경우 Webflow는 원본 영상을 사용합니다.

사이트 전체에 적용 가능한 시각적 개체를 수동으로 만들기 위한 지침

Webflow는 사이트 페이지에 참여할 때 시각적 요소를 평가하고 적응 가능한 변형을 생성합니다. 그럼에도 불구하고 다른 페이지의 시각적 요소에 영향을 미치는 수정 사항(예: 구성 요소 또는 category 편집)을 도입할 수 있습니다. 모든 시각적 요소를 적응 가능한 상태로 유지하려면 영향을 받은 페이지로 이동하거나 키보드 단축키를 사용할 수 있습니다. 명령 + 옮기다 + 나 (Mac의 경우) 또는 제어 + 옮기다 + 나 (Windows의 경우) Designer가 모든 페이지를 분석하고 재조정합니다.

2016년 9월 이전에 설립된 사이트에 대한 적응형 시각적 생성 지침

사이트가 2016년 9월 14일 이전에 생성된 경우 사이트에 적응형 시각적 요소를 생성하려면 간단한 절차를 거쳐야 합니다. 다음에 Designer에 액세스하면 마이그레이션 프로세스를 시작하라는 대화 상자가 표시됩니다. 

이 프로세스는 사이트 크기에 따라 몇 분 정도 걸릴 수 있습니다. 이 작업을 나중에 수행하려는 경우 언제든지 다음에서 프로세스를 트리거할 수 있습니다. 자산 패널 또는 키보드 단축키를 사용하여 명령 + 옮기다 + 나 (Mac의 경우) 또는 제어 + 옮기다 + 나 (윈도우즈에서).

적응형 시각적 요소에 대한 결정

특정 시각적 개체에 대해 이 기능을 비활성화하려면(예: 브라우저가 원래 시각적 크기를 활용하도록 강제하려는 경우):

1. 캔버스에서 시각적 개체 선택
2. 입장 설정 패널 > 이미지 설정
3. 선택 취소 이미지는 적응 가능합니다. checkbox

상호 작용을 통해 적응형 시각적 개체 제어

Webflow는 시각적 크기를 조정할 수 있는 호버 상태나 상호 작용이 아닌 일반 상태에서 적응 가능한 시각적 개체를 파생합니다. 마우스 오버 상태 스타일이나 상호 작용을 삽입한 후에는 게시하기 전에 사이트를 철저히 조사하는 것이 좋습니다.

특정 시나리오에서는 시각적 요소 크기에 대한 크기 특성의 영향을 재정의하기 위해 보완 디자인을 통합해야 할 수도 있습니다. 예를 들어 해당 컨테이너를 차지하려면 시각적 개체의 너비를 100%로 지정해야 할 수도 있습니다. 

자주 묻는 질문

어떤 종류의 영상이 지원되나요?

이 기능은 서식 있는 텍스트 요소를 통해 통합된 것을 제외하고 모든 인라인 JPG, PNG 및 WebP 시각적 개체에 대해 적응 가능한 변형을 공식화합니다. 게다가 배경 영상까지 확장되지 않습니다. 무손실 압축이 가능하므로 복잡하거나 벡터 기반의 시각적 개체에는 SVG 및 PNG를 사용하는 것이 좋습니다.

시각적 개체당 몇 개의 변형이 생성됩니까?

Webflow에서 생성된 변형 수는 원본 시각적 개체의 크기에 따라 달라집니다. 너비가 3200px을 초과하면 Webflow는 3200px, 2600px, 2000px, 1600px, 1080px, 800px 및 500px의 7가지 변형을 생성합니다.

영상은 어떤 크기로 업로드해야 하나요?

4MB 제한을 벗어나지 않는 한 모든 크기의 영상을 업로드할 수 있습니다. 귀하의 브라우저는 장치 크기와 해상도에 따라 최적의 변형을 제공합니다. 예를 들어 너비가 4000px인 원본 시각적 개체를 업로드했지만 모바일에서는 너비가 300px로만 표시되는 경우 브라우저는 500px Webflow에서 생성된 변형을 렌더링합니다.

적응형 변형을 내보내나요?

긍정적이고 적응 가능한 시각적 개체는 내보낸 사이트의 srcset 및 크기 속성을 특징으로 하며 변형은 원본 시각적 개체와 함께 .zip 파일의 /images 디렉터리에 저장됩니다.

Webflow 블로그에서 적응형 시각적 요소에 대한 추가 통찰력을 얻으십시오.. 적응형 시각 기술에 대해 더 깊이 탐구하는 데 관심이 있는 개인을 위해 A List Apart의 Eric Portis' 기사 또한 유익한 것으로 판명될 수도 있습니다.