화질

화질은 픽셀 기반 이미지의 크기를 나타냅니다. 화질이 높다는 것은 이미지가 선명하거나 선명하게 나타난다는 것을 의미합니다. 반대로 화질이 낮다는 것은 이미지가 좋지 않거나 거칠게 보인다는 것을 의미합니다.

카메라로 촬영한 이미지나 시각 예술가가 제작한 이미지는 대부분 아래 이미지처럼 고품질로 보존됩니다.

적절한 치수

이미지가 화면의 전체 너비를 채우도록 하려면 먼저 이미지 크기가 정확한지 확인하세요.

이미지 크기가 충분하지 않습니다.

200 x 150 품질의 사진은 너비가 100픽셀, 높이가 75픽셀인 공간에 맞습니다. 그러나 너비 800픽셀, 높이 600픽셀의 화면을 덮도록 늘리면 흐릿하고 픽셀화되어 보입니다. 이 경우 품질이 부족합니다.

이미지 크기가 너무 큽니다.

57600 x 38400 품질의 사진은 800 x 600 화면에 맞게 축소하면 적절하게 표시됩니다. 반대로 품질이 훨씬 낮은 이미지(예: 1000 x 800)가 적합하며 과도한 데이터가 없습니다. 품질이 지나치게 높은 사진은 효과가 없으며 업로드 및/또는 다운로드에 더 오랜 시간이 소요됩니다. 이로 인해 웹페이지 속도도 느려질 수 있습니다.

화질 지침

웹사이트에 사진을 추가하기 전에 다음을 확인하세요.

• 적절한 그림 형식을 선택하십시오.
• 사진 향상

업로드에 가장 적합한 그림 파일 형식은 PNG, JPEG, SVG 및 WebP입니다. 웹에서 사용되는 가장 일반적인 사진 파일 형식에 대해 자세히 알아보세요..

Webflow의 사진 활용

다음 두 가지 방법을 사용하여 Webflow 사이트에 사진을 통합할 수 있습니다. 

• 삽입된 이미지로
• 배경 사진으로

삽입된 이미지

삽입된 이미지가 사이트에 포함되면 Webflow는 자동으로 이 이미지의 다양한 버전을 다양한 품질로 향상하고 생성합니다.

사용자가 포함된 이미지가 포함된 페이지를 열면 브라우저는 해당 사용자의 화면 품질을 기준으로 가장 좋은 이미지를 제공합니다. 반응형 이미지에 대해 자세히 알아보기. 

배경 사진

부품이나 컨테이너 등의 요소에 배경화면 이미지를 설정하면 원본 이미지가 적용됩니다. Webflow는 배경화면 이미지에 대한 반응형 버전을 생성하지 않습니다. 이는 적절한 품질로 향상된 이미지를 업로드해야 함을 의미합니다.

사진을 향상시키는 최적의 기술은 일상적이고 실용적인 디스플레이를 계획하고 웹사이트 방문자에 대해 생각하는 것입니다.

예를 들어, 15인치 MacBook Pro의 품질은 2880 x 1800입니다. 이 디스플레이에는 너비가 3000픽셀인 이미지가 이상적입니다. 더 큰 디스플레이에서는 이미지가 확대되어 여전히 인상적으로 보일 수 있습니다.

그럼에도 불구하고 모바일 장치의 사이트 사용자는 더 큰 중단점에서 사용되는 것과 동일한 큰 배경 이미지를 다운로드하게 되므로 이는 이상적이지 않습니다. 배경 이미지의 변형을 업로드하고 각 중단점에 새로운 배경 이미지 버전을 도입할 수 있습니다. 이렇게 하면 더 넓거나 더 좁은 중단점에 맞게 배경화면 이미지가 최적화됩니다.

그림 압축 수정

Photoshop과 같은 사진 편집기를 사용하여 사진 형식의 품질을 수정할 수 있습니다. 사진 편집기는 사진을 압축하고 파일 크기를 줄일 수 있습니다.