학습서: 이미지 최적화 사용

개발자 포털 사이트에서 이미지 최적화를 사용하여 이미지 사용을 개선할 수 있습니다.

최적화된 이미지는 웹사이트를 오버로드하지 않고 원래 이미지 사용과 비교하여 성능을 현저하게 증가시킵니다. 사용자의 고객 만족도와 브랜드 명성은 고속 로딩 및 다듬어진 시각적인 자산으로 향상됩니다. 자동 최적화는 시간과 노력을 편집과 컨텐츠 운영에 저장할 수 있습니다.

시작하기 전에

개발자 포털 이 사용으로 설정되어 있어야 하며 이 학습서를 완료하려면 관리자 액세스 권한이 있어야 합니다. 포털 작성 학습서에서는 아직 수행하지 않은 경우 포털을 사용 가능하게 하는 방법에 대해 설명합니다.

이 학습서에 대한 정보

이 태스크에서는 User picture라는 이미지 스타일을 작성하고 배율 및 자르기 효과를 제공합니다. 그런 다음 User picture 를 사용자 계정의 Picture 필드로 사용하십시오.

본 학습서는 다음 단계를 안내합니다.
  1. 이미지 스타일 작성 User picture.
  2. 이미지 스타일 편집 User picture.
  3. User picture 를 Account settings의 picture 옵션에 지정하십시오..

이미지 스타일 User picture 작성

  1. 개발자 포털 에 관리자로 로그인하십시오.
  2. 구성 > 미디어 > 이미지 스타일으로 이동합니다.
  3. +이미지 스타일 추가를 클릭하십시오.
  4. User picture 필드에 Image style name를 입력합니다. 새 스타일 작성 을 클릭하십시오.

    이미지 스타일 이름 입력

User picture이미지 스타일을 작성했습니다. 필요에 따라 User picture를 편집할 수 있습니다. 자세한 내용은 이미지 스타일 사용자 사진 편집하기를 참조하세요.

이미지 스타일 편집 User picture

이 스타일을 편집할 때 너비와 높이 설정을 선택합니다. 크롭 동안 유지할 그림의 파트(예: 중앙)도 선택합니다.
  1. 구성 > 미디어 > 이미지 스타일으로 이동합니다.
  2. User picture 스타일 이름에서 편집 을 클릭하십시오.

    스타일 사용자 사진 편집 화면

  3. Effect 아래 목록에서 Scale and crop를 선택하고 추가를 클릭합니다.
  4. Width 및 Height 상자에 300 를 입력하십시오. Anchor를 중앙 설정으로 두십시오.
  5. 효과 추가를 클릭합니다.

    배율 및 자르기 옵션

  6. 저장을 클릭하여 변경 사항을 저장합니다.
이미지 스타일 User picture을 편집했습니다.

User picture 을 Account settings 의 picture 옵션에 지정하십시오.

  1. 구성 > 사람 > 계정 설정으로 이동하여 표시 관리 탭을 클릭합니다.
  2. 컴팩트 탭을 클릭합니다.

    디스플레이 설정을 표시하는 디스플레이 페이지 관리

  3. ' Picture 행에서 ' 톱니 아이콘'를 클릭합니다.
  4. User picture 목록에서 Image style를 선택합니다.
  5. 업데이트를 클릭합니다
  6. 저장을 클릭하여 변경 사항을 저장합니다.

모든 계정에 대해 User picture 이미지 스타일을 설정합니다.

이 학습서에서 수행한 작업

사용자가 사진을 표시하는 경우 이미지 스타일 User picture의 한계 내에 있도록 계정 설정을 변경했습니다.

사용자가 사용하는 사진을 확인하려면 사람으로 이동하여 사용자를 클릭한 다음 프로필 페이지에서 해당 사용자의 사진을 확인합니다. 이미지를 마우스 오른쪽 버튼으로 클릭한 다음 View image info를 클릭하면 치수의 크기가 조정된 것을 확인할 수 있습니다.

이미지 차원