웹용으로 이미지를 최적화하는 방법: 사이트 성능 향상을 위한 단계별 가이드

이미지가 월드 와이드 웹의 귀중한 자산이라는 데는 의심의 여지가 없습니다. 데이터 시각화에서 텍스트 단락 분할, 포트폴리오 작업 표시에 이르기까지 사진과 그래픽은 대부분의 웹사이트 디자인에서 중요한 부분을 차지하며 사용자가 훌륭한 온라인 경험을 할 수 있도록 도와줍니다.

그러나 뛰어난 비주얼을 갖추면 웹사이트에 큰 타격을 줄 수 있습니다. 해상도가 높을수록 파일 크기가 커지므로 로딩 시간도 느려집니다. AKA, 이미지는 종종 사이트 성능 저하의 원인입니다. 그리고 웹사이트에 이미지를 추가하는 요점은 사용자에게 더 나은 경험을 제공하는 것(또는 판매 및 전환을 늘리기 위한 것일 수도 있습니다!)이라는 점을 기억하십시오. 이는 느린 사이트에서는 어려운 일입니다.

그렇다면 사이트 성능과 시각적 디자인의 균형을 어떻게 맞추겠습니까?

이미지를 최적화하여.

특히 웹 사이트를 염두에 두고 파일 크기를 최적화하기 위해 이미지 생성 프로세스 전반에 걸쳐 할 수 있는 작은 일이 많이 있습니다.

이미지 최적화에 대한 이 단계별 가이드에서는 다음 내용을 다룹니다.

• 이미지 최적화란?
• 이미지 최적화가 중요한 이유는 무엇입니까?
• 웹용 이미지를 최적화하는 7가지 방법

이미지 최적화란?

일반적으로 이미지 최적화는 품질 저하 없이 파일 크기를 줄이는 작업입니다. 생성 단계에서(Photoshop에서 올바른 "내보내기" 옵션 사용) 또는 웹사이트에서 직접(레이지 로드를 사용하여 사이트에 미디어 표시) 이미지를 최적화할 수 있습니다. 목표는 사용자가 다운로드해야 하는 데이터의 양을 줄여서 품질 저하 없이 원하는 콘텐츠를 더 빨리 얻을 수 있도록 하는 것입니다.

이미지 최적화가 중요한 이유는 무엇입니까?

사람들은 웹에 대해 집중하는 시간이 짧기 때문에 웹사이트를 2초 이내에 로드하는 것이 중요합니다. 사이트 속도를 저하시키는 가장 일반적인 요인 중 하나는 이미지입니다. (웹 사이트가 관리형 WordPress 호스트와 같이 최상의 서버에서 실행되더라도 이미지는 성능 저하의 원인이 될 수 있습니다.)

이미지 최적화 모범 사례를 활용하면 파일 크기를 작게 유지하고 로드 시간을 빠르게 하여 사이트 방문자에게 더 나은 경험을 제공할 수 있습니다.

이미지 최적화가 중요한 또 다른 이유가 있지만 비즈니스의 수익과 직접적으로 연결되어 있습니다. 웹 사이트 속도를 늦추는 것 외에도 이미지는 사이트에 전원을 공급하는 서버의 디스크 공간을 차지합니다. 대부분의 호스팅 제공업체는 계획당 대역폭 제한을 적용합니다. 즉, 리소스가 무제한이 아니며 이미지가 해당 공간을 빠르게 차지합니다.

한도를 초과해도 세상이 끝나는 것은 아니지만 초과 요금이 부과되거나 더 심한 경우 웹사이트가 폐쇄될 수 있습니다.

이미지를 최적화하면 사이트 저장소를 최대한 활용하고 대역폭 제한을 피할 수 있습니다.

이제 이미지 최적화가 얼마나 중요한지 알았으니 그 방법에 대해 이야기해 봅시다! 이 단계별 가이드는 Photoshop 팁부터 개발 사례까지 모든 것을 다룹니다.

웹용으로 이미지를 최적화하는 방법

이 단계별 가이드는 Photoshop에서 시작하여 사이트에서 끝나는 이미지를 최적화하기 위해 수행할 수 있는 모든 작업을 다룹니다.

더 나은 사이트 성능을 위해 이미지를 최적화하려면 다음 단계를 따르십시오.

1. 현재 사이트 속도를 벤치마킹하십시오.
2. 최상의 이미지 파일 형식을 선택하는 방법을 알아두십시오.
3. 내보내기 전에 이미지 크기를 조정하십시오.
4. 이미지를 압축하여 파일 크기를 줄입니다.
5. WordPress 플러그인으로 이미지 최적화를 자동화하십시오.
6. 낮은 품질의 이미지를 먼저 로드하려면 "흐리게" 기술을 사용하십시오.
7. 지연 로딩을 사용하십시오.

1. 현재 사이트 속도 벤치마킹

이미지를 최적화하기 위해 이 모든 작업을 수행하기 전에 먼저 사이트에서 속도 테스트를 실행하세요! 마지막에는 자신이 만든 영향을 확인할 수 있습니다(추가 찬사를 위해 팀이나 상사와 공유할 수도 있음). 일부 인기 있는 속도 테스트 도구는 다음과 같습니다.

• Google PageSpeed ​​통계
• 핑덤 도구
• 지티메트릭스
• 웹페이지 테스트

이러한 브라우저 기반 도구는 모두 서로 매우 유사하게 작동합니다. 링크를 연 다음 URL을 입력하면 사이트 속도 및 성능에 대한 빠른 보고서를 볼 수 있습니다.

2. 최상의 이미지 파일 형식을 선택하는 방법을 알아두십시오.

이미지 생성을 완료하면(카메라에서 저장하거나 Photoshop과 같은 도구에서 내보내기) 파일 형식을 지정할 수 있습니다. 웹에서 사용하는 가장 일반적인 파일 형식은 JPEG, PNG 및 GIF입니다. 짐작할 수 있듯이 웹 사이트에 게시할 때 모두 고유한 장단점 및 모범 사례가 있습니다.

JPEG

JPEG 이미지는 더 작은 파일 크기로 더 높은 품질의 이미지를 제공하므로 사이트에서 복잡한 컬러 사진을 표시하는 데 가장 적합합니다. 이 파일 형식은 사이트에서 사용하려는 대부분의 이미지에 사용할 수 있지만 한 가지 주요 예외는 배경이 투명한 이미지입니다. (이에 대해서는 PNG에 대한 다음 섹션을 참조하십시오!)

웹사이트에 JPEG 이미지를 사용하는 경우 "프로그레시브"로 내보내는 것을 고려하십시오. 이를 통해 브라우저는 전체 해상도를 사이트에 완전히 로드하기 전에 이미지의 간단한 버전을 즉시 로드할 수 있습니다.

Photoshop에서 작업하는 경우 "웹용으로 저장"으로 내보낼 때 이 설정을 찾을 수 있습니다.

PNG

이미지에 색상이 많지 않거나(평평한 그림이나 아이콘 등) 배경이 투명하도록 하려면 PNG로 내보내는 것이 좋습니다. 이미지 크기가 올바른지 확인하고 PNG-24(또는 품질 손실이 없는 경우 8)로 저장하는 옵션을 찾으십시오.

GIF

웹에서 세 번째로 많이 사용되는 이미지 형식은 GIF입니다. 256색만 지원하므로 이 파일 유형을 선택해야 합니다!

웹사이트에 맞게 GIF를 최적화하려면 지속 시간, 루프가 필요한 경우, 지정된 페이지나 사이트에 실제로 필요한 GIF 수에 대해 비판적으로 생각하세요.

3. 업로드하기 전에 이미지 크기 조정

웹용으로 이미지를 최적화하는 가장 쉬운 방법 중 하나는 이미지를 사이트에 업로드하기 전에 크기를 조정하는 것입니다. 특히 DSLR 카메라의 원시 이미지로 작업하는 경우 크기가 실제로 필요한 것보다 훨씬 큰 경우가 많습니다.

예를 들어 사이트의 블로그 기사에 이미지를 추가한다고 가정해 보겠습니다. WordPress 테마에 이미지가 500 x 500으로 표시되지만 해상도가 1024 x 1024인 이미지를 업로드하는 경우 이러한 모든 추가 픽셀은 실제 이점을 제공하지 않고 파일 크기를 늘리고 사이트 속도를 감소시킬 뿐입니다.

업로드하기 전에 이미지를 자르거나 크기를 조정하면 파일 크기가 줄어들어 사이트 로드 속도가 조금 더 빨라지고 디스크 공간을 절약하여 더 많은 이미지를 저장할 수 있습니다.

이미지 크기를 조정하려면 선택한 이미지 편집 소프트웨어를 열기만 하면 됩니다. Photoshop이 잘 작동하거나 미리 보기(Mac용), 그림판(Windows용) 또는 Canva(브라우저 도구)와 같은 더 간단한 도구를 사용할 수도 있습니다.

4. 이미지를 압축하여 파일 크기 줄이기

최종 이미지를 올바른 형식으로 저장하고 적절한 크기로 자른 후에는 사이트에 업로드하기 전에 이미지를 최적화하기 위해 수행할 수 있는 또 다른 단계가 있습니다. 바로 압축입니다.

이 프로세스는 눈에 띄는 이미지 품질 손실 없이 파일 크기를 줄이는 데 도움이 됩니다. 압축에는 손실 압축과 무손실 압축의 두 가지 주요 유형이 있습니다.

무손실 압축은 압축 전후에 동일한 수준의 품질을 유지합니다. 손실 압축은 사진의 일부 요소를 삭제하지만 일반적으로 육안으로는 알아차리지 못하는 방식입니다. 이러한 압축 유형에 대해 자세히 알아보려면 Imagify의 이 가이드를 추천합니다.

사이트에서 특정 이미지가 로드되고 천천히 표시되는 경우 압축, 크기 조정 또는 둘 다 필요하다는 신호일 수 있습니다.

이미지를 압축하려면 이미지 압축 도구만 있으면 됩니다. 내가 가장 좋아하는 것은 다음과 같습니다.

• TinyPNG: PNG 및 JPEG 이미지를 압축하기 위한 무료 브라우저 기반 도구입니다.
• ImageOptim: 이미지 압축을 위한 무료 오픈 소스 앱입니다.
• JPEGmini: Mac 및 Windows용 사진 재압축 앱.
• RIOT: 이미지 최적화를 위한 무료 Windows 앱입니다.
• Image Optimizer: 로컬용 무료 애드온.

TinyPNG

이 브라우저 기반 도구는 스마트 손실 압축을 사용하여 이미지를 최적화하고 사용되는 색상 수를 줄여 파일 크기를 줄입니다. (하지만 걱정하지 마세요. 눈치채지도 못할 것입니다!) 무료이며 PNG 및 JPEG에 빠르게 사용할 수 있습니다.

이미지옵팀

이것은 가능한 한 많은 이미지 품질을 유지하면서 불필요한 부풀림을 제거하여 이미지를 압축하는 무료 Mac 앱입니다.

JPEGmini

JPEGmini는 품질과 형식을 모두 유지하면서 파일 크기를 줄이는 데 도움이 되는 강력한 유료 옵션입니다. 무료 평가판이 있으므로 구매하기 전에 테스트 실행을 할 수 있습니다.

폭동

RIOT(Radical Image Optimization Tool)는 이미지 파일 크기를 줄이기 위한 무료 Windows 앱입니다. 나란히 보기 기능이 있어 압축 전과 후의 이미지 품질을 비교할 수 있습니다.

Image Optimizer, 로컬용 무료 애드온

Local을 로컬 개발 환경으로 사용하는 경우 Image Optimizer 추가 기능을 사용하여 이미지를 오프라인에서 자동으로 압축할 수 있습니다. 사이트에서 모든 이미지 파일을 검색하여 개별적으로 압축하는 시간을 절약하고 프로세스에서 사이트 속도를 높입니다.

5. WordPress 플러그인으로 이미지 최적화 자동화

이 시점에서 이미지 최적화가 많은 작업이라고 생각하기 시작할 수 있습니다. 그럴 수도 있습니다! 그러나 이러한 몇 가지 단계를 간소화하는 쉬운 방법도 있습니다. WordPress 사이트에 이미지 최적화 플러그인을 설치하는 것입니다.

몇 가지 권장 사항이 있으며 각각 고유한 기능이 있습니다. 그러나 일반적으로 이미지 최적화 플러그인은 WordPress 사이트에 업로드할 때 이미지를 압축하고 크기를 조정합니다. 즉, 이러한 단계를 수동으로 수행하는 대신 건너뛸 수 있으므로 시간이 크게 절약됩니다.

이 방법은 클라이언트용 사이트를 구축하는 경우에도 유용합니다. 최종 사용자와 콘텐츠 제작자는 이미지 최적화 프로세스의 모든 단계를 기억해야 한다는 부담감이 큽니다. 대부분의 작업을 대신해 주는 플러그인을 설치하면 구축한 사이트를 전달한 후 속도와 성능을 보장하는 데 도움이 됩니다.

WordPress 사이트에서 이미지를 최적화하려면 다음 플러그인을 권장합니다.

• EWWW 이미지 최적화 클라우드
• TinyPNG
• 크라켄.io
• 상상하다

EWWW 이미지 최적화 클라우드

이 WordPress 플러그인은 이미지를 사이트에 업로드할 때 자동으로 이미지를 최적화하거나 과거에 업로드한 이미지를 최적화할 수도 있습니다. 이것은 최적화되지 않은 이미지가 있는 기존 사이트로 작업하는 경우 매우 유용합니다.

TinyPNG

TinyPNG 팀의 이 WordPress 플러그인은 업로드 시 JPEG 및 PNG 이미지를 최적화할 수 있습니다. 브라우저 기반 도구의 팬이라면 무료 플러그인으로 프로세스를 간소화하세요!

크라켄.io

Kracken.io 플러그인은 WordPress 사이트에서 새 이미지와 기존 이미지를 모두 최적화할 수 있습니다. 또한 무손실 압축 모드와 손실 압축 모드를 모두 지원하므로 최종 결과에 대한 많은 제어가 가능합니다.

상상하다

이 WordPress 플러그인은 품질 저하 없이 이미지를 최적화하는 데 도움이 됩니다. 해당 플러그인을 사용하는 경우 WooCommerce 및 NextGen Gallery와도 호환됩니다.

참고: 플러그인을 선택하기 전에 작동 방식을 확인하십시오. 일부는 사이트에 문제를 일으킬 수 있는 서버 과세 작업을 사용하고 다른 일부는 FTP 옵션을 사용하여 웹 서버의 부하를 학습합니다.

6. "Blur Up" 기술을 사용하여 낮은 품질의 이미지를 먼저 로드

이전의 모든 최적화 단계를 거친 후에도 페이지에서 큰 파일 크기 또는 많은 이미지로 작업하여 사이트 속도가 느려지는 경우가 있습니다. 이러한 경우에는 이미지를 최적화하는 것뿐만 아니라 로드 환경을 최적화하여 사이트 방문자가 미디어 파일이 실제보다 더 빠르게 로드되고 있다고 생각하도록 하는 것이 때때로 도움이 됩니다.

이것이 바로 다음 두 단계에 관한 것입니다. 이미지 로딩 속도가 빨라지므로 파일이 로드되는 동안 사용자가 빈 페이지만 쳐다보는 일이 없습니다.

이를 수행하는 한 가지 방법은 낮은 품질 이미지(LQI)를 먼저 로드하는 것입니다. 전체 크기를 로드하기 전에 더 작은 버전의 이미지를 로드함으로써 사용자가 모든 세부 정보를 기다리는 동안 볼 수 있는 항목을 제공합니다. 이렇게 하면 기술적으로 모든 것이 동일한 속도로 로드되는 경우에도 더 빠른 로드 시간을 인식할 수 있습니다.

이를 수행하는 인기 있는 방법은 "블러업" 기법으로, CSS-Tricks에 대한 이 자습서를 통해 구현 방법을 배울 수 있습니다.

7. 사이트 이미지 지연 로드

"흐리게" 기법과 유사하게 더 빠른 로딩 이미지를 제공하는 데 도움이 되는 트릭이 하나 더 있습니다. 지연 로딩입니다.

누군가 귀하의 사이트를 방문하면 페이지 상단에서 시작합니다. 특히 참여 중인 경우 전체 페이지를 스크롤하는 데 시간이 걸릴 수 있습니다. 한 번에 모든 이미지를 로드하려고 시도하는 대신 지연 로드는 사용자가 볼 수 있는 콘텐츠에 가장 관심이 있다는 가정하에 작동합니다. 따라서 사용자가 페이지의 해당 섹션으로 스크롤할 때까지 브라우저 보기 내의 이미지가 먼저 완전히 로드되고 다른 이미지는 자리 표시자를 먼저 로드합니다.

레이지 로딩은 그 자체로 훌륭한 기술이며 나머지 이미지 최적화 팁과 함께 사용하면 더욱 강력해집니다! 그리고 Smush 플러그인 덕분에 WordPress 사이트에서 매우 쉽게 할 수 있습니다.

이것으로 이미지를 최적화하여 더 나은 사이트 성능을 위한 단계별 가이드를 마칩니다! 이것이 귀하의 사이트에 미친 영향을 확인하려면 또 다른 속도 테스트를 실행하십시오. 어떻게 지냈어?

올바른 이미지 최적화 도구를 사용하면 더 나은 사이트 속도와 성능을 즉시 확인할 수 있습니다!