Magento 2의 이미지 최적화: 모범 사례

성능은 수익에 직접적인 영향을 미치며 이미지는 웹에서 가장 자주 요청되는 리소스 유형이므로 이미지 최적화는 Magento 매장의 전환율을 개선할 때 가장 먼저 생각해야 할 단계입니다.

이 튜토리얼에서는 Magento 스토어에서 이미지를 최적화하는 방법을 보여줍니다.

만능 제품 이미지

/media/catalog/product/ 의 이미지 파일에 대한 압축을 실행하여 제품 이미지를 대량으로 최적화할 수 있습니다 .

다음은 사용해야 하는 몇 가지 도구입니다: GIFSicle , JPEGTran , OptiPNG . 이 명령줄은 파일 이름을 변경하지 않고 현재 이미지를 최적화된 버전으로 다시 작성합니다. 캐시를 새로 고칠 필요가 없는 동안 모든 캐시된 이미지도 최적화됩니다.

• PNG 이미지: OptiPNG 사용

   optipng -o7 - 모든 미디어/카탈로그/제품/*.png 제거

• JPEG 이미지: JPEGTran 사용

   미디어/카탈로그/제품/ -이름 "*.jpg" 찾기 -유형 f -exec jpegtran -복사 없음 -최적화 -아웃파일 {} {} \;

• GIF 이미지: GIFSicle 사용

   gifsicle --batch --optimize=3 미디어/카탈로그/제품/*.gif

올바른 이미지 형식 사용

올바른 이미지 형식을 사용하면 이미지의 파일 크기를 줄이는 데도 도움이 됩니다. 예를 들어 JPEG 및 PNG와 같은 일부 이미지 형식은 사진 및 웹 이미지에 가장 적합하지만 GIF ​​및 BMP와 같은 제한된(256) 색상의 이미지 형식은 로고, 버튼, 아이콘과 같은 작은 해상도 파일에 더 적합합니다.

이미지에 어떤 이미지 형식을 사용해야 하는지 더 잘 이해하려면 아래 차트를 참조하십시오.

GIF를 비디오로 교체

GIF는 콘텐츠를 더욱 흥미롭게 만드는 멋진 방법이지만 페이지 로드 속도를 최적화하려는 경우 최선의 선택이 아닐 수 있습니다. 그렇다면 대체 방법은 무엇입니까?

동영상으로!

GIF를 MP4 또는 WebM 비디오로 변환할 수 있습니다. 그러나 Google의 Lighthouse를 사용하여 그렇게 할 수 있는지 확인해야 합니다. 변환할 수 있는 GIF가 있는 경우 "애니메이션 콘텐츠에 비디오 형식 사용"에 대한 제안이 표시되어야 합니다.

다음 단계는 GIF를 변환하는 것입니다. MP4 비디오를 얻으려면 FFmpeg를 사용하는 것이 좋습니다. 콘솔에서 다음 명령을 실행합니다.

ffmpeg -i my-animation.gif -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p my-animation.mp4

이것은 FFmpeg에게 -i 플래그로 표시되는 my-animation.gif my-animation.mp4 비디오로 변환하도록 지시합니다.

GIF의 크기가 이상한 경우 아래와 같은 자르기 필터를 포함하십시오.

ffmpeg -i my-animation.gif -vf "crop=trunc(iw/2)*2:trunc(ih/2)*2" -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p my-animation.mp4

WebM 비디오의 경우 콘솔에서 다음 명령을 실행합니다.

ffmpeg -i my-animation.gif -c vp9 -b:v 0 -crf 41 my-animation.webm

* 참고 : WebM 동영상은 MP4 동영상보다 작지만 비교적 최근에 나온 형식이기 때문에 모든 브라우저에서 지원하는 것은 아닙니다.

이미지를 WebP로 변환

WebP는 뛰어난 이미지 품질 대 파일 크기 비율을 제공하는 차세대 이미지 형식입니다. JPG 및 PNG에 비해 WebP 이미지는 평균 25~35% 더 작으며 이미지 품질 손실은 거의 없습니다.

그러나 이미지 형식이 아직 비교적 새롭기 때문에 Magento 2에서는 지원되지 않으며 Safari와 같은 브라우저에서는 제한된 지원을 받습니다. Magento 스토어에서 WebP를 사용하려면 Magento 2 이미지를 WebP로 변환과 같은 확장 프로그램을 사용하여 모든 이미지를 WebP로 자동 변환해야 합니다.

반응형 이미지 사용

최상의 페이지 성능을 원한다면 '모든 경우에 적용되는' 접근 방식으로 안주하지 마십시오. 대신 기기마다 다른 이미지 크기를 제공하세요.

작업에 도움이 될 수 있는 여러 도구가 있지만 날카로운 npm 패키지와 ImageMagick CLI 도구가 가장 널리 사용됩니다.

샤프 (자동 크기 조정용)

샤프를 노드 스크립트로 사용하려면 이 코드를 프로젝트에 별도의 스크립트로 저장한 다음 실행하여 이미지를 변환합니다.

 const sharp = require('sharp'); const fs = require('fs'); const directory = './images'; fs.readdirSync(directory).forEach(file => { sharp(`${directory}/${file}`) .resize(200, 100) // width, height .toFile(`${directory}/${file}-small.jpg`); });

ImageMagick (일회성 이미지 크기 조정용)

이미지 크기를 원래 크기의 54%로 조정하려면 터미널에서 다음 명령을 실행합니다.

변환 -크기 조정 54% picture.jpg picture-small.jpg

너비 500픽셀 x 높이 300픽셀에 맞게 이미지 크기를 조정하려면 다음 명령을 실행합니다.

 # macOS/Linux convert picture.jpg -resize 500x300 picture-small.jpg # Windows magick convert picture.jpg -resize 500x300 picture-small.jpg

* 참고 : 권장 이미지 사이즈는 3~5장입니다. 물론 더 많은 크기를 만들수록 장치에 더 잘 표시되지만 서버에서 더 많은 공간을 차지할 수 있습니다.

CDN 사용

CDN은 원본 이미지를 변경하지 않고도 즉석에서 이미지를 최적화하는 또 다른 방법입니다. Magento의 경우 공식 권장 사항은 Magento와 긴밀하게 통합되고 전체 페이지 캐싱 솔루션과 함께 추가 보안 이점을 제공하기 때문에 Fastly입니다.

타사 확장 통합

이미지를 최적화하는 또 다른 방법은 Magento 확장을 사용하는 것입니다. 확장 프로그램은 이미지가 페이지 로드 속도를 늦추지 않도록 하는 작업을 수행합니다.

다음은 귀하의 Magento 스토어에 적합할 수 있는 몇 가지 유용한 확장입니다.

Mageplaza의 Magento 2용 이미지 최적화 도구

이 확장은 상점 관리자가 PNG, JPG, GIF, TIF 및 BMP를 포함한 다양한 유형의 이미지를 압축할 수 있도록 지원하고 압축 수준을 설정할 수도 있습니다. 또한 압축을 자주 활성화할 수 있으므로 걱정할 필요가 없습니다.

Amasty의 Magento 2용 지연 로드

Lazy Load 확장을 사용하면 사용자가 페이지를 아래로 스크롤할 때만 제품 정보가 채워지므로 초기 페이지 렌더링 속도가 빨라집니다. 또한 최상의 페이지 성능을 제공하기 위한 이미지 압축 및 코드 구조 최적화와 같은 추가 최적화 도구가 있습니다.

도움이 되었기를 바랍니다!