SharePoint Online에 대한 이미지 최적화

 

마지막으로 수정된 항목: 2014-10-27

요약: 이미지 스프라이트, 압축 및 변환을 비롯한 이미지 최적화 및 압축 기술을 사용하여 SharePoint Online에 대한 페이지 다운로드 속도를 향상시켜 이미지 다운로드 및 렌더링 시간을 가속화하는 방법을 설명합니다.

웹 페이지 로드 속도는 페이지를 렌더링하는 데 필요한 모든 구성 요소의 결합된 크기에 따라 다릅니다. 페이지에 로드되는 대부분의 구성 요소가 텍스트 기반(예: JavaScript, HTML 및 CSS)이므로 일반적으로 이미지보다 작습니다. 이미지는 사이트를 더 매력적이게 만들고 사용자를 끌어오는 좋은 방법입니다. 이미지를 업로드하기 전에 스프라이트와 압축 기능을 활용하고 크기를 조정하는 과정이 반드시 필요합니다. 또한 SharePoint 이미지 변환을 사용하여 아주 큰 이미지를 SharePoint 사이트에 업로드할 때의 효과를 어느 정도 상쇄할 수 있습니다.

스프라이트를 사용하여 SharePoint Online의 이미지 로드 속도 향상

이미지 스프라이트는 작은 이미지를 많이 포함한 이미지입니다. CSS를 사용하면 절대 위치 지정으로 페이지의 특정 부분에 표시할 복합 이미지의 일부를 선택할 수 있습니다. 기본적으로 여러 이미지를 로드 하는 대신 페이지 주위로 단일 이미지를 이동한 후, 스프라이트 이미지의 필수 부분이 최종 사용자에게 표시되는 작은 창을 통해 해당 이미지의 일부가 보이도록 만듭니다. SharePoint Online은 스프라이트를 사용하여 스프라이트 spcommon.png에 다양한 아이콘을 표시합니다.

이러한 방식은 사용자가 여러 개가 아닌 단일 이미지를 다운로드한 후 캐싱하고 다시 사용할 수 있기 때문에 유용합니다. 이미지가 캐시에 남아 있지 않더라도, 이 방법을 사용하면 여러 개가 아닌 단일 이미지를 유지하게 되므로 시간이 가면서 서버에 대한 총 HTTP 요청 수가 줄어들어 페이지 로드 시간도 단축됩니다. 이는 실제로 이미지 묶음 형태를 갖습니다. 이 방법은 위에 제공된 SharePoint 예에 나온 것처럼 이미지가 자주 변경되지 않을 경우(예: 아이콘)에 매우 유용합니다. Microsoft Visual Studio 2013에서 Web Essentials를 사용하여 이 방식을 쉽게 구현할 수 있습니다. 자세한 내용은 SharePoint Online의 축소 및 묶음을 참조하세요.

SharePoint에서 이미지 압축 및 최적화를 사용하여 페이지 로드 속도 향상

이미지 압축 및 최적화는 사이트에서 사용하는 이미지의 파일 크기를 줄이는 방법입니다. 경우에 따라 이미지의 크기를 줄이는 가장 좋은 방법은 이미지를 사이트에서 볼 수 있는 최대 크기로 조정하는 것입니다. 기존의 크기보다 더 크게 이미지를 만들 필요는 없습니다. 이미지 편집기를 사용하여 이미지를 적합한 크기로 유지하는 것이 페이지의 크기를 줄일 수 있는 빠르고 쉬운 방법입니다.

이미지의 크기가 적합해지면 해당 이미지의 압축을 최적화해야 합니다. 사진 갤러리 및 Microsoft Office Picture Manager를 비롯하여 압축 및 최적화를 위해 사용할 수 있는 다양한 도구가 있습니다. 압축에서 핵심은 최종 사용자를 위해 품질은 유지하면서 파일 크기는 최대한으로 줄이는 것입니다. 고화질 디스플레이에서 압축한 파일을 테스트하여 문제가 없는지 확인합니다.

SharePoint 이미지 변환 기능을 사용하여 페이지 다운로드 속도 향상

이미지 변환은 온라인 및 온-프레미스에서 미리 정의된 이미지 크기에 따라 다양한 버전의 이미지를 제공할 수 있도록 하는 SharePoint 2013의 새로운 기능입니다. 이 기능은 사용자가 생성한 이미지 콘텐츠가 있거나 너비 및 높이와 같은 이미지 크기가 사이트의 CSS를 통해 고정되었을 때 특히 유용합니다. CSS에 따라 이미지가 고정되더라도 전체 해상도 이미지가 로드됩니다. 이 경우 이미지 변환 기능을 사용하여 파일 크기를 줄일 수 있습니다.

이미지 변환 기능을 사용하면 정의한 가장 작은 너비 또는 높이를 가져온 다음, 고정된 가로 세로 비율에 따라 다른 크기가 자동으로 조정됩니다. 기본적으로 나머지 크기에 따라 중심으로부터 이미지가 잘립니다. 예를 들어 100px(너비). 50px(높이)인 변환을 정의하며 원래 이미지가 1000px(너비), 800px(높이)인 경우 800px 크기가 50px이 되고, 1000px(현재 62.5px)이 이미지의 중심으로부터 잘립니다.

이러한 단계는 비교적 간단하지만 이미지에서 변환을 사용하려면 이미지를 추가하기 전에 SharePoint 사이트에 변환이 미리 준비되어 있어야 합니다. 또한 SharePoint Server 게시 인프라(사이트 모음 수준) 및 SharePoint Server 게시(사이트 수준) 기능이 설정되어 있어야 합니다.

이미지 변환을 추가하여 페이지 로드 속도를 높이려면

1. 이 절차를 수행하는 사용자 계정에는 적어도 사이트 모음의 최상위 사이트에 대한 디자인 권한이 있어야 합니다.

2. 웹 브라우저에서 게시 사이트 모음의 최상위 사이트로 이동합니다.

3. 설정 아이콘을 선택합니다.

4. 사이트 설정 페이지의 디자인 섹션에 기본 제공 이미지 변환이 표시됩니다.

   기본 변환을 사용하거나 이미지 변환을 선택하여 새로 만들 수 있습니다.

   

5. 이미지 변환 페이지에서 새 항목 추가를 선택합니다.

   

6. 새 이미지 변환 페이지의 이름 상자에 변환의 이름을 입력합니다.

7. 너비 및 높이 텍스트 상자에 변환의 너비 및 높이를 픽셀 단위로 입력한 다음 저장을 선택합니다.

   

SharePoint에서 이미지 변환을 사용한 사용자 지정 자르기

기본적으로 이미지 변환은 이미지의 중심에서 생성됩니다. 사용하려는 이미지 부분을 잘라 개별 이미지에 대한 이미지 변환을 조정할 수 있습니다. 변환에 따라 개별적으로 이미지를 자를 수 있습니다. 이미지를 자르면 SharePoint의 blob 캐시를 통해 변환별로 이미지 버전이 생성되므로 페이지 로드 속도가 빨라집니다. 이 방식은 이미지 크기를 한 번만 조정하면 사용자들이 여러 번 사용할 수 있기 때문에 서버 부하가 줄어듭니다. 이미지 변환을 자르는 방법에 대한 자세한 내용은 이미지 변환 자르기를 참조하세요.