이미지 최적화의 모든 것, 최고의 완벽 가이드

이미지 최적화의 모든 것, 최고의 완벽 가이드 - 1부

Design News/Design Trend

by 김현욱 a.k.a. 마루 2021. 7. 29. 05:25

이미지 압축 및 최적화의 역사는 인터넷 자체만큼이나 길다고 할 수 있습니다. 웹 사이트가 처음 온라인에 등장한 이후로 웹 디자이너들은 더 나은 성능을 위해 이미지 파일을 압축하는 방법을 모색해 왔습니다.

그러나 오늘날에는 이미지 최적화 환경은 복잡합니다. 온라인 또는 오프라인에서 이미지 크기를 조정하는 데 사용할 수 있는 도구가 많이 있습니다. 예를 들어, Web Acceleration Suite에는 강력한 이미지 최적화 기능이 내장되어 있습니다. 하지만 이미지가 최적화되는 다양한 방법, 사용 가능한 도구 및 실제로 수행하는 방법에 대해 자세히 알아보려고 한다면 이 글을 통해 알려 드리겠습니다.

이미지 최적화란 주제는 매우 중요하므로 다음과 같은 몇 가지 부제로 나누어 설명하도록 하겠습니다.

이미지 최적화가 중요한 이유
웹용 이미지를 최적화하는 방법 : 파일 크기 및 이미지 크기
이미지 파일 크기 최적화 이해
이미지 최적화를 위한 파일 형식
이미지 변환 및 최적화 도구

이미지 최적화가 중요한 이유

사용자 경험은 핵심 격전지입니다.

'허술하고 볼품없는' 디자인이 나올 경우 웹 사이트 방문을 중단하겠다고 응답한 사용자는 38%에 이릅니다. 이것은 이미지와 같은 중요한 시각적 요소가 시각적으로 인상적이고 전문적인 웹 사이트를 만드는 데 도움이 된다는 것을 보여줍니다. 그러나 페이지 로딩 시간과 같은 사용자 경험의 다른 측면을 희생시켜서는 안 됩니다.

페이지 로딩 시간은 온라인으로 운영되는 모든 비즈니스에서 매우 중요한 고려 사항입니다. 웹사이트 로드 시간이 100밀리 초 지연되더라도 전환율이 7% 감소할 수 있습니다. 페이지 로딩과 관련하여 매초가 중요하므로 사용자의 브라우저에서 신속한 디스플레이를 지원하기 위해 이미지를 최적화해야 합니다.

최적화된 이미지는 국제적인 범위를 제공합니다.

인터넷 연결은 보편적이지 않습니다. 속도와 품질 면에서 매우 다양합니다. 2021년 4월 기준, 싱가포르는 고정(유선) 광대역 다운로드 속도에서 평균 245.5 Mbps를 달성하여 세계 1위로 2위 한국을 앞서고 있습니다.

이에 비해 미국은 191.97 Mbps로 11위, 영국은 92.63 Mbps로 세계 평균인 102.12 Mbps보다 낮은 47위입니다. 쿠바, 예멘, 투르크메니스탄은 모두 6 Mbps 미만을 달성했습니다.

전 세계 평균 53.38 Mbps에 비해 다운로드 속도가 평균 190.87 Mbps로 모바일 인터넷 분야에서 UAE가 선두를 달리고 있습니다. 영국은 이 평균을 훌쩍 뛰어넘는 반면 아일랜드는 그렇지 않아 평균 47.62 Mbps에 불과합니다. 베네수엘라는 7.73 Mbps로 최하위를 기록했습니다.

국제적인 범위를 가진 모든 비즈니스는 이를 인지해야 합니다. 그들은 이미지 파일이 포함된 웹사이트가 싱가포르와 한국에서 잘 작동할 수 있지만 전 세계의 많은 주요 신흥 시장에서는 거의 액세스 하지 못할 수 있음을 알아야 합니다. 이미지 최적화는 글로벌 수준에서 웹 사이트의 영역을 확장하는 데 매우 중요합니다.

사용자 기기가 점점 다양해지고 있습니다.

인터넷 사용 기술은 최근 몇 년 동안 급속도로 발전하여 인터넷에 액세스 할 수 있는 다양한 기기를 제공하고 있습니다. 2020년 영국의 설문 응답자 중 60%가 스마트폰을 인터넷 액세스의 주요 기기로 꼽았고 노트북(16%), 태블릿 기기(12%), 데스크톱 PC(8%), TV 세트(1%)가 뒤를 이었습니다.

이러한 수치들이 스마트폰을 훨씬 앞서고 있지만 이제는 사용자들이 여러 대의 기기를 동시에 사용하여 인터넷에 액세스하는 경우가 많다는 점에 주목할 필요가 있습니다. 그렇기 때문에 이미지를 최적화하여 모든 기기에서 원활한 환경과 일관된 수준의 성능을 제공해야 합니다.

환경(environment)

인터넷은 많은 에너지를 사용하므로 지구 온난화의 원인이기도 합니다. 이미지는 다운로드 시 서버 공간을 차지하고 대역폭을 증가시킵니다. HTTP 아카이브의 2021년 수치에 따르면 이미지는 평균적으로 페이지 전체 비중의 46%를 차지합니다. 텍스트와 코드에 비해 에너지 소모가 많습니다.

파일 크기를 줄이면 웹사이트의 탄소 배출량을 줄이는 데 도움이 됩니다. 나중에 알게 되겠지만 이미지 품질을 손상시키지 않고 이 작업을 수행할 수 있습니다.

검색 엔진은 효율적이고 민첩한 페이지를 선호합니다.

이 요소는 위의 모든 요소를 효과적으로 조합한 것입니다. Google과 같은 검색엔진은 점점 더 정교한 알고리즘을 사용해 웹사이트에 순위를 매기고 있습니다. 이러한 알고리즘은 고성능 페이지로 갈수록 가중되고 있습니다.

Google의 모바일 우선 인덱싱은 웹사이트가 노트북이나 데스크톱 브라우징뿐만 아니라 모바일 기기에 맞게 최적화 되어야 함을 의미합니다.
사용자 경험과 참여 요인은 Google의 알고리즘에 영향을 미치는 것으로 보입니다. 예를 들어, 페이지 로딩 시간이 좋지 않아 사용자가 웹사이트에 참여하지 않는 경우 이는 페이지의 SEO 성능에 반영될 수 있습니다.
특정 지리적 위치에 제품이나 서비스를 제공하고 있고 로딩 시간으로 인해 웹사이트를 해당 지역에 효과적으로 표시할 수 없는 경우 부정적인 영향을 미칠 수 있습니다. 예를 들어 아일랜드 시장에 맞게 검색어를 최적화했는데 아일랜드에서 페이지 실적이 좋지 않으면 키워드 조사와 SEO 이니셔티브가 낭비됩니다.

웹용 이미지를 최적화하는 방법 : 파일 크기 및 이미지 크기

이미지를 최적화할 때 취할 수 있는 두 가지 방법이 있습니다. 실제 이미지 크기(사이트의 이미지에 표시되는 픽셀 수) 자체를 줄일 수 있습니다. 또는 서버에서 호스팅 되는 이미지 파일의 크기를 줄일 수 있습니다.

두 가지 방식 모두 동일한 목적을 달성합니다. 즉, 이미지 크기가 줄어들고 페이지를 더 빨리 로드할 수 있습니다. 그러나 두 가지 방법은 서로 바꿔 사용할 수 없습니다.

이미지 크기 줄이기(Reducing the image size)

실제 이미지 크기를 줄이면 이미지가 사용자에게 더 작은 크기로 표시됩니다. 예를 들어 큰 3000픽셀 x 1500픽셀 배너 이미지를 호스팅 하는 대신 이미지가 훨씬 작은 1000픽셀 x 500픽셀로 제한할 수 있습니다.

사람들이 작은 화면을 사용한다면 차이를 느끼지 못할 것입니다. 웹사이트에서 배포할 수 있도록 이미지 크기를 조정하는 데 사용할 수 있는 다양한 무료 도구가 있습니다.

이미지를 원래 크기로 다시 늘릴 수 있지만 품질(이미지 화질)이 크게 저하되어 사용자 경험에 해를 끼칩니다. 웹사이트에서 고품질의 시각적 프레젠테이션을 수행해야 하며 그렇지 않으면 사용자가 다른 곳으로 이동할 수 있습니다.

파일 크기 줄이기(Reducing the file size)

파일 크기를 효과적으로 줄인다는 것은 이미지 파일을 웹 더 적합하게 압축한다는 것을 의미합니다. 이 전략에서는 '무손실 이미지 압축'을 목표로 합니다. 즉, 품질을 잃지 않고 이미지의 크기를 줄이는 것입니다. 단순히 이미지의 해상도를 픽셀 단위로 줄이는 경우에는 불가능합니다.

이미지 파일에는 일반적으로 이미지 자체보다 더 많은 데이터가 포함됩니다. 예를 들어 JPEG 및 PNG 파일에는 브라우저에서 이미지를 로드하기 전에 읽어야 하는 메타데이터 또는 기타 정보가 포함될 수 있습니다. 따라서 PNG 또는 JPEG 이미지를 압축하려면 이 추가 데이터를 제거하거나 최소화하기만 하면 됩니다.

그러나 이것은 이미지 압축 및 파일 크기 조정의 표면만 긁는 것일 뿐입니다. 파일 크기를 줄이고 웹 페이지가 가장 중요한 이미지 품질을 잃지 않고 성능을 향상시킬 수 있는 다른 기회도 있습니다.

이미지 파일 크기 최적화 이해(Understanding image file size optimisation)

지금까지 이미지 최적화를 위한 두 가지 매우 기본적인 기술인 이미지 해상도 자체를 줄이는 것과 파일 크기를 줄이는 올바른 방법을 살펴보았습니다. 하지만 우리는 이 두 번째 기술에 대해 아주 간략하게만 다루었습니다.

실제로 파일 크기를 줄이는 것은 여러 가지 고려 사항이 있는 다양한 주제입니다. 다음은 게시 준비가 된 최적화된 이미지를 대상으로 할 때 알아야 할 몇 가지 사항입니다.

압축률(Compression rate)

파일을 압축한다고 해서 반드시 필요한 화질을 유지할 수 있는 것은 아니라는 점을 기억하는 것이 중요합니다. 압축률을 알아야 합니다. 이미지 파일이 압축되는 정도를 나타냅니다.

예를 들어, 약 2.0MB 정도의 매우 큰 이미지 JPEG 파일이 있는 경우 이 파일을 상당히 압축해야 합니다. 이것은 전체 이상적인 페이지 파일 무게의 100% 이상을 차지하며 경우에 따라 200% 이상이 될 수 있습니다. 웹 페이지에 가장 적합한 전체 이미지 크기는 1MB에서 2MB 사이이므로 이미지 파일을 작게 만들수록 좋습니다.

낮은 압축률을 선택하는 경우 약 500kb의 파일이 남아 있을 수 있으며 여전히 너무 클 수 있습니다. 높은 압축률은 약 60kb의 파일이 남아 있을 수 있습니다. 파일에 일부 추가 데이터가 포함되지만 이 데이터가 제거되면 이미지 자체에 추가 압축이 적용되므로 이 이미지의 화질이 저하될 수 있습니다.

대신에 약 150kb의 JPEG 파일로 끝나는 중간 압축률이 만족스러운 매체가 될 가능성이 높습니다.

손실 vs 무손실(Lossy vs. lossless)

이미지 파일에서 불필요한 데이터를 추출한다는 이 아이디어는 손실 압축 대 무손실 압축으로 이어집니다. 불필요한 추가 데이터가 제거되면 크기가 더 줄어들어 이미지 자체의 데이터가 손실될 수 있습니다.

간단히 말해서, 무손실 압축은 이미지를 표시하는 데 필요하지 않은 추가 데이터만 제거합니다. 손실 압축은 이보다 더 나아가 페이지에 이미지를 표시하는 데 사용되는 데이터를 제거합니다.

예상대로 무손실 압축은 원본과 일관된 이미지 품질을 제공하지만 손실 압축은 품질을 떨어뜨립니다. 비록 압축률이 떨어지더라도 차이를 보기 위해서는 전문가적인 눈이나 아주 큰 화면이 있어야 할 수도 있습니다.

대부분의 경우 무손실 압축은 되돌릴 수 있지만 손실 압축은 되돌릴 수 없습니다.

변환 코딩(Transform coding)

효과적인 파일 크기 감소는 먼저 최적화를 위한 기회를 식별하는 데 달려 있습니다. 예를 들어, 파일의 어떤 부분을 다시 포맷하거나 제거하여 보다 효율적이고 가벼운 파일을 만들 수 있습니까?

물론 이미지 메타데이터를 제거할 수 있지만 이미지 최적화는 이보다 훨씬 더 많은 작업이 필요할 수 있습니다. 변환 코딩을 사용하면 이미지 자체의 코드가 변경되어 더 작은 파일을 얻을 수 있습니다.

영상의 화질과 무결성이 일부 손실되기 때문에 손실 압축으로 분류됩니다. 하지만 이것은 사람의 눈으로 볼 수 없을지도 모릅니다. 더 많은 기술적인 이미지 압축 앱과 툴이 자동 변환 코딩을 사용할 것입니다. 이로 인해 코딩 및 파일 수정에 대한 경험이 없는 사용자가 고도의 기술 기능을 이용할 수 있습니다.

크로마 서브샘플링(Chroma subsampling)

최신 덥스텝(dubstep) 기술이 아닙니다.

Chroma subsampling은 사람 눈의 색상 구별 기능을 기반으로 하는 또 다른 고도로 기술적인 형태의 이미지 최적화 형식입니다.

기본적으로 인간의 눈은 이미지 색상의 세부 사항보다 이미지의 휘도에 훨씬 더 민감합니다. 휘도는 이미지의 흑백 콘텐츠를 말하므로 휘도 또는 루마를 이미지의 밝기로 생각할 수 있으며 채도는 이미지의 색상 구성입니다.

크로마 서브샘플링을 사용하면 이미지의 색상 또는 크로마와 관련된 일부 데이터가 제거되고 폐기되는 반면 밝기 또는 루마는 크게 변경되지 않은 상태로 유지됩니다. 이로 인해 원본 이미지와 최적화된 이미지 사이에 색상 차이가 발생하지만 이러한 색상 변화는 일반 보기에서 사람의 눈으로 인식하기 어렵습니다. 품질에 눈에 띄는 변화 없이 파일 크기가 줄어듭니다.

허프만 코딩(Huffman coding)

허프만(Huffman) 코딩은 알고리즘을 사용하여 무손실 이미지 파일 크기 축소 및 최적화를 수행합니다.

이 기법은 이미지 코드 내 서로 다른 문자의 빈도를 기반으로 합니다. 파일의 복잡성을 줄이기 위해 짧고 간단한 코드로 더 자주 문자를 표시하는 반면, 덜 자주 발생하는 문자는 더 복잡한 코드로 표시합니다.

Huffman 이미지 압축이 적용하면 파일의 코드 구성이 간소화되어 비효율적인 코드로 인한 초과 파일 크기가 제거됩니다. 이 방법을 사용하면 파일 데이터가 완전히 제거되지 않고 다시 포맷되기 때문에 이미지 품질이 저하되지 않습니다.

이미지 최적화를 위한 파일 형식(File types for image optimisation)

우리는 이미지 압축의 좀 더 기술적인 측면에 대해 설명했지만 파일 형식을 변경하는 것만으로 이미지 파일을 다른 형식으로 변환함으로써 보다 효율적인 이미지를 얻을 수 있습니다.

이미지를 최적화할 때 파일 형식을 선택하는 방법은 무엇입니까? 최적화하려는 이미지 유형과 이 이미지를 사용하려는 방법에 따라 다릅니다. 사용 가능한 다양한 파일 유형을 살펴보기 전에 먼저 래스터 및 벡터 이미지 파일을 살펴봐야 합니다.

래스터 이미지(Raster images)

래스터 이미지 파일은 이미지를 비트맵 또는 전체적으로 볼 때 완전한 이미지를 만드는 작은 픽셀 격자(그리드)로 저장하고 표시합니다.

래스터 이미지에는 각 픽셀의 경계를 이루는 미세한 선 외에 정의된 선이 없습니다. 대신, 픽셀 색상의 변화는 음영을 만들거나 한 색상에서 다른 색상으로 이동하는 느낌을 만듭니다. 예를 들어 인간의 눈으로 감지할 수 없는 변화를 포착할 수 있는 줌을 사용하여 가까이서 볼 때 이러한 픽셀 그라데이션이 위와 같이 표시됩니다.

래스터 이미지는 일반적으로 인치당 도트 수 또는 dpi로 알려진 특정 해상도로 표시됩니다. dpi 수준이 매우 높으면 인치당 픽셀 수가 더 많아지고 이미지가 더 정확해집니다. 이미지 파일도 커집니다. dpi 레벨이 상대적으로 낮으면 디스플레이의 각 인치 내에 더 적은 도트가 있고 이미지 품질이 저하됩니다.

화면 제조업체가 여러분이 원하는 생각에도 불구하고 인간의 눈은 일정 수준 이상의 다른 dpi 비율을 구별할 수 없습니다. 따라서 dpi를 줄이면 이미지 품질에 지각할 수 있는 차이 없이 손실 압축을 달성할 수 있습니다.

사진과 스캔한 그림 또는 기타 예술 작품은 래스터 파일 형식에 가장 적합합니다. 매우 상세한 그래픽 이미지도 적합할 수 있습니다. 필요한 경우 래스터 이미지를 벡터로 변환할 수 있습니다.

벡터 이미지(Vector images)

벡터 이미지는 비트맵을 기반으로 하지 않고 대신 수학 공식을 사용합니다. 이러한 공식은 다각형 또는 정의된 원곡선과 같이 명확하게 정의된 선으로 모양과 형태를 나타냅니다. 색상 값은 균일하게 표현되며 래스터 이미지에서 볼 수 있는 픽셀 간의 변화 및 그라데이션은 찾아볼 수 없습니다.

따라서 벡터 파일은 그래프 및 차트, 단순한 선 이미지 또는 아이콘과 같은 매우 특정한 이미지 유형에 이상적입니다. 명확한 선 정의는 로고, 배너 및 글꼴에도 적합합니다.

한편, 이미지를 더 단순하게 구성하면 왜곡되거나 확대될 픽셀 블록이 없기 때문에 품질의 변화 없이 이미지를 확대하거나 축소할 수 있습니다. 이는 수학일 뿐입니다.

벡터 이미지 예SVG 벡터 이미지: 원하는 대로 확대/축소하면 선명하게 유지됩니다.

그 결과 벡터 이미지 파일은 적절한 디테일이나 그라데이션이 표시되지 않아 사진이나 매우 상세한 아트웍에 적합하지 않을 수 있습니다.

래스터 이미지 파일 형식(Raster Image File Types)

PNG

PNG(Portable Network Graphic) 파일은 웹 사이트의 79%가 사용하는 가장 인기 있는 이미지 파일 형식입니다. 이러한 이미지 파일은 고화질이지만 결과적으로 크기가 큰 경향이 있습니다.

손실 없는 영상 압축 및 변환도 가능하지만 무손실 이미지 압축 및 변환을 용이하게 하도록 설계되었습니다. 상대적인 파일 크기로 인해 PNG 파일은 단순한 이미지를 표시하는 데에만 적합할 수 있습니다. 아이콘의 경우 JPG보다 선호되며 배경이 투명할 수 있습니다.

APNG

애니메이션 PNG 파일은 일반적으로 볼 수 있는 GIF 파일과 마찬가지로 여러 PNG 프레임을 사용하여 짧은 애니메이션을 표시하는 데 사용할 수 있습니다.

JPEG

JPEG는 일반적으로 접하는 또 다른 이미지 파일 형식이며 73%의 사이트에서 사용됩니다. 이러한 파일은 일반적으로 PNG에 해당하는 파일보다 작습니다.

색상이 풍부한 이미지를 표시하는 데 더 적합합니다. JPEG 파일은 손실 및 무손실 최적화에 사용할 수 있으며 사용자는 최상의 결과를 얻기 위해 품질 수준을 수동으로 조정할 수 있습니다.

JPG

JPEG 및 JPG 파일 형식에 대한 참조는 종종 같은 의미로 사용됩니다. 두 형식은 거의 동일하며 둘 다 정확히 같은 방식으로 이미지를 저장하고 나타냅니다.

유일한 차이점은 파일 확장자입니다. 초기 Windows 운영 체제에서는 파일 확장자를 세 글자로 제한을 두었습니다. 따라서 OS 업데이트로 JPEG 확장이 가능해질 때까지 JPG가 사용되었습니다. JPEG 파일을 개발한 공동 사진 전문가 그룹은 이 기회를 이용하여 파일 확장자에 자신의 이름을 보다 정확하게 표현했습니다.

JPEG 2000

JPEG 2000은 이전 파일 형식을 사용할 때 발생할 수 있는 일부 오류를 완화하도록 설계된 JPEG의 업데이트된 버전입니다. 예를 들어, 래스터 이미지 내에서 부정확성을 유발할 수 있는 비트 오류에 더 강합니다.

또한, 무손실 및 손실 압축이 단일 아키텍처 내에서 이루어지며 두 측면 모두 단일 이미지 파일 내에서 구현될 수 있기 때문에 압축은 더욱 유연하고 안정적입니다. 단점은 JPEG 2000은 아직 브라우저에서 보편적으로 지원되지 않으며 기존 JPEG 이미지 압축 알고리즘과 호환되지 않습니다.

JPEG XR

자동차의 고급스러운 모델처럼 들리는 JPEG XR은 JPEG 이미지 파일의 "확장 범위" 버전입니다. 고화질 이미지에 고품질 압축 기능을 제공하도록 설계되었습니다.

큰 파일 크기에 의존하지 않고 원본 이미지 품질을 상당 부분 유지합니다. 표준 JPEG와 마찬가지로 JPEG XR도 손실 및 무손실 변환을 모두 지원합니다.

JPEG XL

JPEG XL은 오늘날의 다양한 브라우저 장치 환경에 필수적인 반응형 이미지 디스플레이를 위해 설계된 코딩 시스템을 사용합니다.

XL 파일은 원본 JPEG 코딩 시스템과 호환되며 JPEG 파일을 JPEG XL 파일로 압축하여 전체 파일 크기를 줄일 수 있습니다. 이 형식은 서버에 불필요한 부담을 주지 않으면서 전문가 수준의 사진을 위한 고품질 이미지 표시를 제공하기 위한 것입니다.

GIF

GIF 파일은 PNG 및 JPEG/JPG보다 단순하며 256색만 사용하여 이미지를 표현합니다. 따라서 GIF는 애니메이션 이미지에 적합하지만 더 복잡한 정적 이미지에는 적합하지 않습니다. 무손실 변환만 지원합니다.

HEIC

이것은 최신 iPhone 또는 iPad를 사용하는 경우 얻을 수 있는 원시 파일입니다. HEIC 파일은 JPEG/JPG와 같은 기존 래스터 파일보다 작은 경향이 있습니다.

JPEG의 8비트에 대한 16비트 색 구성표를 지원합니다. HEIC는 파일 확장자이고 파일 형식은 HEIF(High Efficiency Image File Format : 고효율 이미지 파일 형식)로 알려져 있습니다.

WebP

WebP는 슬림한 이미지 파일 형식을 제공합니다. 현재 대부분의 브라우저가 채택을 하고 있지만 일부 브라우저에서 지원하지 않을 수 있습니다.

간결하고 간소화된 웹 페이지를 지원하도록 설계되었습니다. 이미지 파일을 무손실 또는 손실 기반으로 WebP로 변환하여 정밀도와 정확성을 유지하는 더 작은 파일을 얻을 수 있습니다. 변환에서는 예측 코딩을 사용하여 특정 픽셀 블록의 값을 읽은 다음 인접 블록의 값을 예측합니다. 그 결과 사람의 눈으로는 감지할 수 없는 이미지가 변경됩니다.

무손실 WebP 이미지는 표준 PNG보다 약 26% 작으며 동등한 SSIM 또는 구조적 유사성 인덱스에서 JPEG 파일보다 25% ~ 34% 작습니다. 손실 압축도 구현될 수 있으므로 원본 이미지 품질의 상당 부분을 유지하면서 더 작은 이미지를 얻을 수 있습니다.