SharePoint Online 성능을 위한 이미지 최적화

참고:  사용자 언어로 가능한 한 빨리 가장 최신의 도움말 콘텐츠를 제공하고자 합니다. 이 페이지는 자동화를 통해 번역되었으며 문법 오류나 부정확한 설명을 포함할 수 있습니다. 이 목적은 콘텐츠가 사용자에게 유용하다는 것입니다. 이 페이지 하단의 정보가 도움이 되었다면 알려주세요. 쉽게 참조할 수 있는 영어 문서 가 여기 있습니다.

웹 페이지 로드 속도 이미지, HTML, JavaScript 및 CSS를 포함 하 여 페이지를 렌더링 하는 데 필요한 모든 구성 요소가의 전체 크기에 따라 달라 집니다. 이미지에서는 사이트를 더 매력적 좋은 방법 있지만 크기로 성능에 영향을 줄 수 있습니다. 압축 및 크기 조정, 및 스프라이트를 사용 하 여 사용 하 여 이미지를 최적화 하 여 매우 큰 이미지의 효과 오프셋 수 있습니다. 이미지 변환 SharePoint를 사용 하 여 단일 큰 이미지를 업로드 수 있으며 다시 로드 하지 않고 다시 사용할 수 있도록 이미지의 섹션을 표시할 수도 있습니다.

스프라이트 기능을 사용하여 이미지를 SharePoint Online에 더 빨리 로드

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

어떤은 설명 합니다.

  • 이미지 압축

  • 이미지 최적화

  • SharePoint 이미지 변환

spcommon 스크린샷

이렇게 되므로 여러 대신 하나의 이미지를 다운로드 한 다음 캐시 및 해당 이미지를 다시 사용 성능이 향상 됩니다. 단일 이미지 여러 이미지 대신 하 여 이미지를 캐시를 유지 되지 않는다는, 경우에이 방법은 페이지 로딩 시간을 줄일 수 있는 서버에 HTTP 요청의 총 수를 줄입니다. 이미지 묶음형태의 없나요입니다. 이 매우 유용한 기술 이미지를 변경 하지 자주, 예를 들어, 아이콘, 위에 제공 되는 SharePoint 예제와 같이 합니다. 웹 필수 요소, Microsoft Visual Studio에서 쉽게 실행할 제 3 자, 원본 열기, 커뮤니티 기반 프로젝트를 사용 하는 방법 할 수 있습니다. 자세한 내용은 축소 및 SharePoint Online에서 묶음참조 합니다.

이미지 압축 및 최적화 기능을 사용하여 SharePoint의 페이지 로드 속도 증가

이미지 압축 및 최적화 기능은 사이트에서 사용하는 이미지 파일 크기를 줄이는 것과 관련 있습니다. 흔히 이미지 크기를 줄이는 가장 좋은 방법은 이미지를 사이트에 표시되는 최대 크기로 조정하는 것입니다. 이미지는 표시되는 크기보다 클 필요가 없습니다. 이미지 편집기를 사용하여 이미지 크기를 정확하게 하는 것이 페이지 크기를 줄이는 쉽고 빠른 방법입니다.

이미지 크기가 적합하면 다음 단계는 이미지 압축을 최적화하는 것입니다. 압축 및 최적화하는 데는 사진 갤러리, 타사 도구 등 다양한 도구를 사용할 수 있습니다. 압축의 핵심은 최종 사용자가 인식할 수 있을 정도로 품질을 떨어뜨리지 않으면서 파일 크기를 가능한 한 최대로 줄이는 것입니다. 압축한 뒤에는 압축 파일을 고해상도 디스플레이에서 테스트하여 여전히 품질이 좋은지 확인해야 합니다.

SharePoint 이미지 변환을 사용하여 페이지 다운로드 속도 증가

이미지 변환은 서로 다른 버전의 미리 정의 된 이미지 크기에 따라 이미지를 참조할 수 있도록 SharePoint Online 의 기능입니다. 이 사용자가 생성 이미지 콘텐츠 또는 이미지 크기 너비와 높이 같은 사이트의 CSS에 의해 수정 된 경우에 특히 중요 합니다. 이미지를 CSS 하 여 수정 하는 경우에 전체 해상도 이미지는 여전히 로드 됩니다. 이 경우 이미지 변환을 사용 하 여 파일 크기를 줄일 수 있습니다.

참고: 변환은 게시가 사용하도록 설정된 경우에만 SharePoint에 사용할 수 있습니다. 설정 > 사이트 설정 > 사이트 기능 관리 > SharePoint Server 게시에서 게시를 사용하도록 설정할 수 있습니다. 이렇게 설정하지 않으면 이 옵션이 표시되지 않습니다.

이미지 변환 기능의 크기 조정 방식은 너비와 높이 중 사용자가 정의한 가장 작은 크기로 이미지 크기를 조정하는 것입니다. 그러면 다른 크기는 고정된 가로 세로 비율에 따라 자동으로 조정됩니다. 기본적으로 이 기능은 가운데를 중심으로 남은 크기만큼 이미지를 자릅니다. 예를 들어 원래 이미지 너비와 높이가 각각 1000px와 800px인데 변환 너비와 높이를 각각 100px와 50px로 정의하면 이미지 크기가 조정되어 800px는 이제 50px가 되고 1000px(이제는 62.5px)는 이미지 가운데서부터 잘립니다.

과정은 비교적 단순하지만 이미지에 변환 기능을 사용하려면 이미지를 추가하기 전에 SharePoint 사이트에서 변환 기능을 설정해야 합니다. 또한 SharePoint Server 게시 인프라(사이트 모음 수준) 및 SharePoint Server 게시(사이트 수준) 기능도 설정해야 합니다.

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

  1. 이 절차를 수행하는 사용자 계정에 사이트 모음의 최상위 사이트에 대한 디자인 권한 이상이 있는지와 해당 사이트가 웹 페이지에 게시되는지 확인합니다.

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

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

  4. 사이트 설정 페이지의 모양과 느낌 섹션에 기본 제공 이미지 변환이 보입니다.

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

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

    새 항목 추가 스크린샷
  6. 새 이미지 변환 페이지의 이름 상자에 변환 이름을 입력합니다.

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

    이미지 변환 이름 스크린샷

SharePoint에서 이미지 변환으로 자르기 사용자 지정

기본적으로 이미지의 중앙에서 이미지 변환을 생성 됩니다. 개별 이미지에 대 한 이미지 변환을 사용 하 여 원하는 이미지 부분 자르기으로 조정할 수 있습니다. 이미지 변환 당를 개별적으로 자를 수 있습니다. 이미지 자르기 페이지 로드 각 변환에 대 한 이미지의 버전을 만들 SharePoint의 blob 캐시를 사용 하 여 보다 빠르게 수행 됩니다. 이미지 한 번 조정만 여러 번 최종 사용자에 게 제공할 준비가 다음 이기 때문에이 방법으로 서버 로드 감소 합니다. 이미지 변환 자르기 하는 방법에 대 한 자세한 내용은 이미지 변환을 자르기참조 합니다.

Office 기술 확장
교육 살펴보기
새로운 기능 우선 가져오기
Office Insider 참여

이 정보가 유용한가요?

의견 주셔서 감사합니다!

피드백을 주셔서 감사합니다. Office 지원 에이전트와 연락하는 것이 도움이 될 것 같습니다.

×