Lighthouse에 따르면 이미지 최적화는 웹 사이트 속도 및 성능 저하의 가장 일반적인 문제 중 하나입니다.

최적화되지 않은 이미지로 인해 페이지 로딩 속도가 9초 이상, 경우에 따라 그 이상 느려질 수 있습니다.

느린 페이지는 더 큰 이탈률과 더 낮은 SERP 포지셔닝으로 이어지며, 이는 그 대가로 더 적은 트래픽과 더 적은 비용을 지불하는 고객을 의미합니다.

이미지 최적화에는 무엇이 포함됩니까?

웹사이트의 모든 이미지를 최적화하는 것은 고도로 복잡한 작업으로 전문 지식과 제대로 수행하는 데 몇 시간이 소요됩니다.

플러그인은 시간을 절약하는 데 도움이 될 수 있지만 올바르게 처리되지 않으면 전체 웹사이트 구조를 손상시키고 일부 미디어를 영구적으로 삭제할 수도 있습니다.

이 작업을 복잡한 작업으로 간주하는 이유를 알아보기 위해 Cloudimage가 적절한 이미지 최적화에 필수적이라고 생각하는 항목에 대한 20가지 체크리스트가 있습니다.

1. CDN 전달 통합
2. TTFB 최적화
3. 360도 제품 보기 사용
4. 이미지가 반응형인지 확인
5. 이미지 크기를 올바르게 조정
6. 올바른 이미지 형식 사용
7. 이미지 압축
8. 대체 속성 최적화
9. 사진을 명확하게 캡션
10. 제품 각도를 관리하세요.
11. 색상을 혼합하는 방법을 알고
12. 감성 융합 영상 제작
13. 제품 해당 배경 사용
14. 썸네일 최적화
15. 이미지 사이트맵 사용
16. 크로마 서브샘플링 적용
17. 중요하지 않은 이미지 지연 로드
18. 이미지 스프라이트 배포
19. 이미지 자산 캐싱 시작
20. 중요한 이미지 자산 사전 로드

기술적인 측면에서 위 목록에서 가장 중요한 점은 크기 조정, 형식 최적화, 지연 로드, 이미지 압축, 응답성 및 CDN 전달입니다.

웹사이트에 11,000개의 이미지가 있다고 가정해 보겠습니다.

최적화를 완료하는 데 얼마나 걸립니까?

이제 자동으로 그렇게 할 수 있다고 상상해보십시오!

이것이 Cloudimage가 하는 일입니다.

소프트웨어를 통해 모든 이미지를 일괄 업로드할 수 있으며 자동으로 현금화되어 클라우드에 업로드됩니다.

그 다음은 최적화입니다.

이미지 크기 조정

전 세계 3개 데이터 센터(캐나다, 프랑스, ​​싱가폴)에 위치한 Cloudimage의 크기 조정 서버는 origin_image_url에서 원본 이미지를 다운로드하고 작업 및 필터 매개변수를 기반으로 변환하고 마지막으로 로켓을 통해 웹사이트 또는 모바일 앱에 표시합니다. -빠른 CDN.

웹 서버, Amazon S3 버킷 또는 HTTP를 통해 액세스할 수 있는 기타 스토리지에서 호스팅되는 원본 이미지의 예.

너비와 높이를 모두 지정하면 원본 이미지 비율을 무시하거나 유지할 수 있습니다. 또한 이미지에 패딩을 추가하도록 선택할 수 있습니다. Cloudimage는 다음 크기 조정 모드를 제공합니다.

수확고

정의된 너비와 높이에 맞게 이미지를 자르는 이미지 비율을 유지합니다.

맞다

원하는 치수를 충족시키기 위해 패딩을 추가하여 비율을 유지하면서 이미지 크기를 조정합니다.

경계

비율을 유지하면서 이미지 크기를 조정하려고 합니다. 핏과 비슷하지만 패딩이 없습니다.

씌우다

원본 이미지 비율을 무시하고 지정된 너비와 높이로 이미지 크기를 조정합니다.

회전

시계 반대 방향으로 지정된 각도만큼 이미지를 회전합니다.

손질

이미지 주위의 단색 프레임을 제거합니다.

이미지 압축

압축 필터를 사용하여 이미지의 압축(출력 형식 및 품질)을 변경할 수 있습니다.

크기 조정 작업 및 이미지 필터와 함께 압축 필터를 사용할 수 있습니다.

기본적으로 Cloudimage는 이미지를 WebP로 제공합니다. 형식이 클라이언트 브라우저에서 지원되지 않으면 JPEG 또는 PNG로 대체됩니다.

Optipress – 머신 러닝 기반 이미지 압축

JPEG 압축의 주요 과제는 각각의 다른 이미지에 대해 가장 최적의 압축 계수를 찾는 것입니다.

동일한 압축 매개변수로 압축된 다른 이미지는 다른 인식 품질을 초래할 수 있습니다.

더욱이, 크기가 다른 동일한 이미지는 가시적인 품질 손실 없이 최대 크기 이득을 달성하기 위해 다른 압축 전략이 필요할 수 있습니다.

이를 극복하기 위해 Optipress JPEG 압축 알고리즘을 개발했습니다.

Optipress는 특정 이미지 기능과 현재 압축 매개변수를 분석하여 최상의 JPG 압축 방식을 찾습니다.

기계 학습 모델은 이 이미지에 대한 최상의 압축 전략을 결정합니다.

그런 다음 지각 품질 저하 없이 최적의 압축을 달성하기 위해 인간 시각 시스템의 시뮬레이션 모델을 기반으로 품질을 평가합니다.

변형 사전 설정

여러 이미지에 동일한 변형을 적용하려면 사전 설정을 정의하고 사전 설정 이름(X)만 사용하여 변형을 적용할 수 있습니다.

p=X

크기 조정 변환 또는 이미지 필터는 워터마크 및 이미지 압축 매개변수뿐만 아니라 사전 설정에 포함될 수 있습니다.

이는 이미지 최적화 시간의 50% 이상을 절약하고 관련된 모든 사람이 쉽게 수행할 수 있는 대량 최적화 프로세스를 가능하게 합니다.

반응형 이미지가 쉬워졌습니다

반응형 이미지는 최종 사용자의 화면 크기에 따라 이미지 크기를 조정하므로 웹사이트 또는 모바일 앱이 다양한 화면 크기에서 더 빠르게 로드될 수 있습니다.

Cloudimage 팀은 모든 것을 자동화하는 JS 플러그인을 개발했습니다.

Cloudimage JS 라이브러리는 모든 URL을 자동으로 조정하고 내장된 반응형 디자인, 지연 로딩 및 더 많은 기능을 제공하여 웹사이트를 반응형으로 빠르게 만들고 이미지에 멋진 로딩 효과를 추가합니다.

Lazy Loading 및 캐시 활성화를 사용하면 웹사이트 로딩 시간이 최소 40% 향상될 것이라고 확신할 수 있습니다. 거기에 CDN을 추가하면 백분율이 최대 60%까지 올라갑니다.

콘텐츠 전송 네트워크

Cloudimage는 콘텐츠 전송 네트워크를 활용하여 전 세계적으로 이미지 전송을 가속화합니다. 우리는 여러 CDN 제공업체와 협력하여 이미지 전달을 최적화하고 탁월한 안정성을 제공합니다.

이미지를 가속화하는 것 외에도 CDN은 DDoS(분산 서비스 거부) 보호 기능을 제공하여 서버를 보호하고 가동 중지 시간을 방지합니다.

CDN은 일반적으로 최종 사용자가 이미지를 요청하는 동안 이미지를 캐시합니다.

몇 분 안에 구현

Cloudimage를 매우 독특하게 만드는 것은 서비스를 매우 빠르게 구현할 수 있다는 것입니다.

웹사이트에서 트래픽이 최고조에 달하면 언제든지 cloudimage에 연락하여 이미지를 최적화하고 이러한 최고치를 즉시 흡수할 수 있습니다.

이를 통해 다양한 장치에서 완벽한 성능과 빠른 페이지 로딩 속도를 얻을 수 있습니다.

또한 구현이 매우 간편하여 팀(콘텐츠 제작에서 게시 및 모니터링까지 웹사이트를 담당하는 팀) 간의 협업 프로세스를 간단하고 효율적으로 만듭니다.

이것은 우리 대부분이 다음 기간에 재택 사무실을 사용해야 할 때 특히 중요합니다.
Cloudimage 서비스 작동 방식에 대한 자세한 내용은 cloudimage.io를 방문하십시오.