사진 은 어떻게 최적화 하여 사이트 의 성능 을 향상 시 켜 야 합 니까?

개술
그림 은 웹 에서 제공 하 는 가장 기본 적 인 내용 유형 중 하나 입 니 다.그들 은 천 마디 말 보다 한 장의 그림 을 말한다.하지만 조심 하지 않 으 면 그림 크기 가 수 십 조 에 이 를 때 도 있다.
따라서 네트워크 이미 지 는 선명 하고 명쾌 해 야 하지만 사 이 즈 는 압축 을 줄 일 수 있 고 로드 시간 을 사용 하여 받 아들 일 수 있 는 수준 을 유지 할 수 있다.
나의 사이트 에서 나 는 나의 홈 페이지 의 크기 가 1.1MB 를 넘 었 고 그림 은 약 88%를 차지 했다 는 것 을 알 게 되 었 다.나 는 내 가 제공 한 이미지 가 그들 이 필요 로 하 는 것 보다 크다 는 것 을 알 게 되 었 다.분명히 개선 할 공간 이 많다.

나 는 Addy Osmani 의 우수한 Essential Image Optimization 전자 책 을 읽 기 시 작 했 고 내 사이트 에서 그들의 건의 에 따라 사진 의 최 적 화 를 하기 시작 했다.그리고 응답 식 이미지 에 대해 연 구 를 하고 응용 했다.
이것 은 페이지 크기 를 445 kb,약 62%로 줄 였 습 니 다!
그림 압축 이란 무엇 입 니까?
압축 이미 지 는 그림 이 받 아들 일 수 있 는 선명 도 범 위 를 유지 하 는 동시에 파일 크기 를 줄 이 는 것 입 니 다.저 는 imagemin 을 사용 하여 사이트 의 이미 지 를 압축 합 니 다.
imagemin 을 사용 하려 면 Node.js 가 설치 되 어 있 는 지 확인 한 다음 터미널 창 을 열 고 cd 가 항목 에 들 어가 다음 명령 을 실행 하 십시오.

npm install imagemin

그리고 imagemin.js 라 는 새 파일 을 만 들 고 다음 내용 을 기록 합 니 다.

const imagemin = require('imagemin');
const PNGImages = 'assets/images/*.png';
const JPEGImages = 'assets/images/*.jpg';
const output = 'build/images';

프로젝트 구조 에 맞 게 PNGImages,JPEG Images,output 의 값 을 변경 할 수 있 습 니 다.
또한 그림 압축 을 실행 하려 면 압축 할 그림 형식 에 따라 해당 하 는 플러그 인 을 설치 해 야 합 니 다.
JPEG/JPG
JPG 의 장점
JPG 의 가장 큰 특징 은 손실 압축 이다.이런 효율 적 인 압축 알고리즘 은 그것 을 매우 가 벼 운 그림 형식 으로 만 들 었 다.다른 한편,'유 손'압축 이 라 고 불 려 도 JPG 의 압축 방식 은 고 품질의 압축 방식 이다.우리 가 그림 의 부 피 를 원래 부피 의 50%이하 로 압축 할 때 JPG 는 60%의 품질 을 유지 할 수 있다.그 밖 에 JPG 형식 은 24 비트 로 하나의 그림 을 저장 하면 1600 만 가지 색 채 를 나 타 낼 수 있 고 대부분 장면 에서 색채 에 대한 요구 에 대응 할 수 있다 는 점 에서 압축 전후의 품질 손실 이 우리 인류의 육안 으로 쉽게 감지 되 지 않 는 다 는 것 을 결정 한다.전 제 는 업무 장면 을 잘 사용 했다 는 것 이다.
JPG 사용 필드
JPG 는 색채 가 풍부 한 이미 지 를 보 여 주 는 데 적 용 됩 니 다.우리 의 일상적인 개발 에서 JPG 이미 지 는 항상 큰 배경 그림,윤 방 그림 또는 Banner 그림 으로 나타 납 니 다.
JPG 의 결함
위의 글 에서 보 여 준 윤 파 그림 에 손 상 된 압축 은 확실히 마각 을 드 러 내기 어렵 지만 벡터 그래 픽 과 로고 등 선 감 이 강하 고 색채 대비 가 강 한 이미 지 를 처리 할 때 인위적인 압축 으로 인 한 이미지 의 모호 함 이 상당히 뚜렷 하 다.
또한 JPEG 이미 지 는 투명도 처 리 를 지원 하지 않 으 며 투명 이미 지 는 PNG 를 소환 하여 표시 해 야 합 니 다.
MozJPEG 압축 jpeg 사용 하기
Mozilla 의 MozJPEG 도 구 를 사용 합 니 다.이 도 구 는 imagemin-mozjpeg 를 통 해 Imagemin 플러그 인 으로 사용 할 수 있 습 니 다.다음 명령 을 실행 해서 설치 할 수 있 습 니 다.

npm install imagemin-mozjpeg

그리고 다음 내용 을 imagemin.js 에 추가 합 니 다.

const imageminMozjpeg = require('imagemin-mozjpeg');
const optimiseJPEGImages = () =>
  imagemin([JPEGImages], output, {
    plugins: [
      imageminMozjpeg({
        quality: 70,
      }),
    ]
  });
optimiseJPEGImages()
  .catch(error => console.log(error));

터미널 에서 node imagemin.js 를 실행 하여 스 크 립 트 를 실행 할 수 있 습 니 다.모든 JPEG 그림 을 처리 하고 최적화 된 버 전 을 build/images 폴 더 에 넣 습 니 다.
퀄 리 티 를 70 으로 설정 하면 대부분의 상황 에서 선명 한 이미 지 를 만 들 수 있 지만 프로젝트 의 수요 가 다 를 수 있 고 적당 한 값 을 스스로 설정 할 수 있 습 니 다.
기본적으로 MozJPEG 는 점진 적 jpeg 를 생 성하 여 그림 이 완전히 불 러 올 때 까지 낮은 해상도 에서 높 은 해상도 로 불 러 옵 니 다.인 코딩 방식 때문에 원본 jpeg 보다 약간 작 습 니 다.
Sindre Sorhus 가 제공 하 는 이 명령 행 도 구 를 사용 하여 JPEG 그림 이 점진 적 인지 확인 할 수 있 습 니 다.
Addy Osmani 는 점진 적 jpeg 를 사용 하 는 장단 점 을 잘 정리 했다.나 에 게 있어 서,나 는 이익 이 폐단 보다 크다 고 생각 하기 때문에,나 는 기본 설정 을 꾸준히 사용한다.
원본 jpeg 를 더 좋아한다 면 options 대상 에서 progressive 를 false 로 설정 할 수 있 습 니 다.또한,imagemin-mozjpeg 버 전의 변 화 를 확인 하 십시오.해당 문 서 를 다시 보십시오.
PNG(PNG-8 과 PNG-24)
PNG 의 장단 점
PNG(이식 가능 한 네트워크 그래 픽 형식)는 무 손실 압축 의 하이파이 어 이미지 형식 이다.8 과 24,여 기 는 모두 이 진수 의 자릿수 이다.우리 의 선행 지식 에서 언급 한 대응 관계 에 따 르 면 8 비트 의 PNG 는 최대 256 가지 색상 을 지원 하고 24 비트 는 약 1600 만 가지 색상 을 나 타 낼 수 있다.
PNG 이미 지 는 JPG 보다 강 한 색채 표 현 력 을 가지 고 라인 처리 가 더욱 섬세 하 며 투명도 에 좋 은 지 지 를 가지 고 있 습 니 다.그것 은 앞에서 우리 가 언급 한 JPG 의 한 계 를 보완 하 였 는데,유일한 단점 은 부피 가 너무 크다 는 것 이다.
PNG 응용 필드
앞에서 언급 했 듯 이 복잡 하고 색채 가 풍부 한 그림 을 PNG 로 처리 하면 원가 가 비교적 높 을 것 이다.우 리 는 보통 JPG 에 맡 겨 저장 할 것 이다.
PNG 가 라인 과 색상 대비 도 를 처리 하 는 데 있어 장점 을 고려 하여 우 리 는 주로 작은 로고,색상 이 간단 하고 대비 가 강 한 그림 이나 배경 등 을 보 여 줍 니 다.
png quant 를 사용 하여 PNG 이미지 최적화
png quant 는 내 가 PNG 이미 지 를 최적화 하 는 가장 좋 은 도구 입 니 다.imagemin-png quant 를 통 해 사용 할 수 있 습 니 다.

npm install imagemin-pngquant

다음 내용 을 imagemin.js 파일 에 추가 합 니 다.

const imageminPngquant = require('imagemin-pngquant');
const optimisePNGImages = () =>
  imagemin([PNGImages], output, {
    plugins: [
      imageminPngquant({ quality: '65-80' })
    ],
  });
optimiseJPEGImages()
  .then(() => optimisePNGImages())
  .catch(error => console.log(error));

퀄 리 티 를 65-80 으로 설정 하면 파일 크기 와 이미지 품질 사이 에서 좋 은 절충 방안 을 발견 할 수 있 습 니 다.
이런 설정 이 있 으 면 저 는 화면 캡 처 를 받 을 수 있 습 니 다.제 사 이 트 는 913 kb 에서 187 kb 까지 뚜렷 한 시각 적 손실 이 없고 놀 라 운 79%의 하락폭 이 없습니다!
WebP
WebP 의 장점
WebP 는 JPEG 처럼 디 테 일이 풍부 한 그림 을 손 가 는 대로 집어 PNG 처럼 투명 을 지원 하고 GIF 처럼 동적 그림 을 표시 할 수 있 습 니 다.다양한 그림 파일 형식의 장점 을 한 몸 에 모 았 습 니 다.
WebP 의 공식 소 개 는 이 점 에 대해 더욱 권위 있 게 논술 하고 있다.
PNG 에 비해 WebP 무 손상 이미지 의 사 이 즈 는 26%축소 됐다.같은 효 과 를 가 진 SSIM 질량 지수 에서 WebP 의 손실 이미 지 는 같은 JPEG 이미지 보다 25-34%작다.무 손실 WebP 는 투명도(알파 채널 이 라 고도 함)를 지원 하 며 22%의 추가 바이트 만 필요 합 니 다.손실 RGB 압축 이 받 아들 일 수 있 는 경우 에 도 손실 WebP 는 투명도 가 지원 되 며 PNG 에 비해 보통 3 배의 파일 크기 를 제공한다.
웹 P 그림 을 지원 하 는 브 라 우 저 에 제공 합 니 다.
WebP 는 구 글 이 도입 한 상대 적 으로 새로운 형식 으로 무 손실 과 유 손 된 형식 으로 이미지 인 코딩 을 통 해 더 작은 파일 크기 를 제공 하여 JPEG 와 PNG 의 좋 은 대안 으로 만 드 는 것 이 목표 이다.
WebP 이미지 의 선명 도 는 보통 JPEG 와 PNG 와 비교 할 수 있 고 파일 크기 가 훨씬 작다.예 를 들 어 화면 캡 처 를 위 에서 WebP 로 바 꿀 때 저 는 88kb 파일 을 얻 었 습 니 다.그 품질 은 913 kb 의 원본 이미지 와 비슷 하고 90%감소 합 니 다!
개인 적 으로 저 는 시각 적 효 과 를 비교 할 수 있 고 절약 한 크기 는 무시 할 수 없다 고 생각 합 니 다.
가능 한 한 WebP 형식 을 사용 하 는 것 이 가치 가 있다 는 것 을 깨 달 았 으 니 중요 한 것 은 JPEG 와 PNG 를 완전히 대체 할 수 없다 는 것 이다.브 라 우 저가 WebP 에 대한 지원 이 보편적 이지 않 기 때문이다.
이 글 을 작성 할 때 Firefox,Safari,Edge 는 WebP 를 지원 하지 않 는 브 라 우 저 입 니 다.

그러나 caniuse.com 에 따 르 면 전 세계 70%가 넘 는 사용자 가 WebP 를 지원 하 는 브 라 우 저 를 사용 하고 있다.이 는 WebP 이미 지 를 사용 하면 약 70%의 고객 에 게 더 빠 른 웹 페이지 와 더 좋 은 체험 을 제공 할 수 있다 는 뜻 이다.
설치 하고 다음 명령 을 실행 합 니 다:

npm install imagemin-webp

다음 내용 을 imagemin.js 파일 에 추가 합 니 다.

const imageminWebp = require('imagemin-webp');
const convertPNGToWebp = () =>
  imagemin([PNGImages], output, {
    use: [
      imageminWebp({
        quality: 85,
      }),
    ]
  });
const convertJPGToWebp = () =>
  imagemin([JPGImages], output, {
    use: [
      imageminWebp({
        quality: 75,
      }),
    ]
  });
optimiseJPEGImages()
  .then(() => optimisePNGImages())
  .then(() => convertPNGToWebp())
  .then(() => convertJPGToWebp())
  .catch(error => console.log(error));

퀄 리 티 를 85 로 설정 하면 PNG 와 비슷 하지만 훨씬 작은 WebP 이미지 가 생 성 된다 는 것 을 알 게 되 었 습 니 다.jpeg 에 대해 저 는 quality 를 75 로 설정 하면 시각 과 파일 크기 사이 에 좋 은 균형 을 이 룰 수 있다 는 것 을 알 게 되 었 습 니 다.
html 형식의 WebP 그림 제공
WebP 이미지 가 있 으 면 다음 표 시 를 사용 하여 브 라 우 저 에 제공 할 수 있 으 며,WebP 를 호 환 하지 않 는 브 라 우 저 에 png 또는 jpeg 를 사용 할 수 있 습 니 다.

<picture>
    <source srcset="sample_image.webp" type="image/webp">
    <source srcset="sample_image.jpg" type="image/jpg">
    <img src="sample_image.jpg" alt="">
</picture>

이 표 시 를 사용 하면 image/webp 미디어 형식 을 이해 하 는 브 라 우 저 는 Webp 그림 을 다운로드 하여 표시 하고 다른 브 라 우 저 는 JPEG 그림 을 다운로드 합 니 다.
를 지원 하지 않 는 브 라 우 저 는 모든 source 탭 을 건 너 뛰 고 아래쪽 img 탭 을 불 러 옵 니 다.따라서 우 리 는 모든 브 라 우 저 류 에 대한 지원 을 제공 함으로써 페이지 를 점차적으로 강화 했다.

모든 상황 에서 img 표 시 는 실제 페이지 에 보 여 주 는 내용 이기 때문에 문법 에 필수 적 인 부분 입 니 다.img 표 시 를 생략 하면 그림 을 과장 하지 않 습 니 다.
브 라 우 저가 사용 할 그림 의 경 로 를 선택 할 수 있 도록태그 와 정 의 된 모든 source 가 거기에 있 습 니 다.원본 그림 을 선택 하면 URL 이 img 태그 에 전 달 됩 니 다.이것 이 표 시 된 내용 입 니 다.
이것 은 브 라 우 저가 이 표 시 를 과장 하지 않 기 때문에이나 source 태그 의 스타일 을 설정 할 필요 가 없다 는 것 을 의미한다.따라서 이전 처럼 img 탭 을 사용 하여 스타일 설정 을 계속 할 수 있 습 니 다.
이상 은 바로 사진 을 어떻게 최적화 시 켜 사이트 의 성능 을 향상 시 켜 야 하 는 지 에 대한 상세 한 내용 입 니 다.사진 을 최적화 시 켜 사이트 의 성능 을 향상 시 키 는 자 료 는 우리 의 다른 관련 글 에 관심 을 가 져 주 십시오!