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

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

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

그렇다면 사이트 성능과 시각 디자인의 균형을 어떻게 맞추나요?

이미지를 최적화합니다.

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

이미지 최적화에 대한 이 단계별 가이드에서는 다음을 다룰 것입니다.

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

이미지 최적화란 무엇입니까?

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

이미지 최적화가 왜 중요한가요?

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

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

그 한도를 초과하면 세상의 끝은 아니지만 초과 요금이 부과되거나 더 심한 경우 웹 사이트가 종료될 수 있습니다.

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

이미지 최적화가 얼마나 중요한지 알았으니 이제 수행 방법에 대해 이야기하겠습니다! 이 단계별 가이드에서는 Photoshop 팁에서 개발 사례에 이르기까지 모든 것을 다룹니다.

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

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

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

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

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

이미지를 최적화하기 위해 이 모든 작업을 수행하기 전에 먼저 사이트에서 속도 테스트를 실행하십시오! 마지막으로, 당신은 당신이 만든 영향을 볼 수 있을 것입니다(또한 당신은 그것을 당신의 팀이나 상사와 공유할 수 있습니다.

Flywheel 지원 팀의 일원으로서 저는 몇 가지 속도 테스트에 익숙하지만 이 다섯 가지가 제가 가장 좋아하는 테스트입니다.

• Google PageSpeed ​​인사이트
• Pingdom 도구
• GTMetrix
• 웹페이지 테스트
• Flywheel의 Performance Insights 애드온

처음 네 가지 브라우저 기반 도구는 서로 매우 유사하게 작동합니다. 링크를 연 다음 URL을 입력하면 사이트 속도와 성능에 대한 빠른 보고서가 표시됩니다.

Flywheel의 호스팅 플랫폼에 대한 추가 기능인 Performance Insights는 호스트만이 제공할 수 있는 통찰력을 포함하여 사이트에 대한 실행 가능한 권장 사항을 제공하기 위해 기본을 넘어선 것입니다.

또한 대시보드에서 시간 경과에 따른 메트릭을 추적할 수 있으므로 이미지 최적화와 같은 작업을 수행할 때 변경 사항의 영향을 쉽게 확인할 수 있습니다. 여기에서 자세히 알아보세요.

이러한 도구는 사이트 속도와 성능을 향상시키기 위해 취할 수 있는 몇 가지 단계를 권장하지만 이 튜토리얼의 목적을 위해 지금은 점수에 초점을 맞춥니다. 이것은 당신이 어디에서 시작하는지 알 수 있도록 훌륭한 벤치마크를 제공합니다.

2. 최상의 이미지 파일 형식을 선택하는 방법을 알고 있습니다.

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

JPEG

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

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

다음은 비프로그레시브 이미지가 로드되는 방법에 대한 아이디어입니다.

프로그레시브 이미지가 로드되는 방법은 다음과 같습니다.

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

PNG

이미지에 색상이 많지 않거나(예: 평면 일러스트레이션 또는 아이콘) 투명하게 하려면 PNG로 내보내는 것이 좋습니다. 이미지 크기가 올바른지 확인하고 PNG-24(또는 품질 손실이 없는 경우 8)로 저장하는 옵션을 찾습니다.

GIF

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

웹사이트에 맞게 GIF를 최적화하려면 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: 로컬용 무료 애드온.

작은PNG

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

이미지최적화

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

JPEG미니

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

폭동

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

로컬용 무료 애드온인 Image Optimizer

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

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

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

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

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

• EWWW 이미지 최적화 클라우드
• JPEG 및 PNG 이미지 압축
• 크라켄.io
• 상상하다

EWWW 이미지 최적화 클라우드

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

JPEG 및 PNG 이미지 압축

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

크라켄.io

Kracken.io 플러그인은 WordPress 사이트의 새 이미지와 기존 이미지를 모두 최적화할 수 있습니다. 또한 무손실 및 손실 압축 모드를 모두 지원하여 최종 결과를 제어할 수 있습니다.

상상하다

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

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

6. "blur up" 기술을 사용하여 먼저 낮은 품질의 이미지를 로드합니다.

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

이것이 다음 두 단계의 전부입니다. 즉, 이미지를 더 빠르게 로드하는 것처럼 보이도록 하여 파일이 로드되는 동안 사용자가 빈 페이지를 응시하지 않도록 합니다.

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

이것을 하는 대중적인 방법은 CSS-Tricks에 대한 이 튜토리얼을 통해 구현하는 방법을 배울 수 있는 "흐리게 하기" 기술입니다.

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

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

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

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

이것으로 이미지를 최적화하여 사이트 성능을 향상시키기 위한 단계별 가이드를 마칩니다! 이것이 사이트에 미친 영향을 확인하려면 다른 속도 테스트를 실행하세요. 어떻게 지냈어?

최적화된 워크플로와 올바른 이미지 최적화 도구 사이에서 최적화된 이미지에서 더 나은 사이트 성능을 즉시 확인할 수 있습니다!

이미지 그 이상: 초고속 성능을 위해 사이트 속도를 개선하는 방법 알아보기

Flywheel의 관리형 WordPress 호스팅 플랫폼은 WordPress 사이트를 빠르게 만드는 데 최적화되어 있지만 서버는 퍼즐의 일부일 뿐입니다. 성능 개선 도우미 애드온을 사용하면 시간 경과에 따른 측정항목을 추적하여 언제, 개선해야 하는지, 어떻게 개선해야 하는지 확인할 수 있는 동시에 사이트의 성능을 심층적으로 살펴볼 수 있습니다. 모든것은 변한다.

더 알아보기

이 가이드는 Flywheel의 행복 엔지니어 Tyler Stokes가 작성했습니다. 우리는 광고 소재가 번개처럼 빠른 성능을 위해 매일 웹사이트를 최적화할 수 있도록 돕습니다.

Flywheel의 관리형 WordPress 호스팅 플랫폼에 대해 자세히 알아보려면 여기를 클릭하십시오 !