웹사이트 최적화에서 사진이 잘 최적화되면 페이지 로딩 속도를 높이고 웹사이트의 사용자 경험을 향상시킬 수 있을 뿐만 아니라 이미지 최적화를 통해 웹사이트의 대역폭을 절약할 수도 있습니다. 그렇다면 페이지 구축 엔지니어로서 UI의 복원을 보장할 뿐만 아니라 이미지를 가장 효율적으로 만들 수 있는 이미지 최적화 방법은 무엇이어야 할까요? 개인적인 경험을 바탕으로 이미지 최적화 방법을 간략하게 소개하겠습니다. 먼저, 우리는 이미지의 몇 가지 측면을 이해합니다.
1. 벡터 그래픽 및 비트맵.
벡터 그래픽: 왜곡 없이 크기를 조정하고 회전할 수 있는 이미지 형식입니다. 아무리 가까이서 보아도 그래픽의 가장 작은 단위도 볼 수 없습니다. 저장된 파일의 크기는 작지만 풍부한 컬러 그라데이션으로 사실적인 이미지 효과를 표현하기 어렵습니다. 완벽한 원, 포물선 및 기타 모양으로 이해할 수 있습니다.
비트맵(Bitmap): 래스터 맵(Raster Map), 픽셀 맵(Pixel Map)이라고도 하며 가장 작은 단위가 픽셀로 구성되어 있으며 크기 조정 및 회전으로 인해 왜곡이 발생합니다. 예를 들어, 비트맵은 십자수와 같으며, 멀리서 보면 그림이 섬세하고 다채롭고, 가까이서 보면 각 스티치의 색상 변화를 볼 수 있습니다.
십자수 십자수 확대 다음 표는 벡터 이미지와 비트맵 간의 비교를 보여줍니다.
2. 손실 압축과 무손실 압축.
손실 압축: 색상의 점진적인 변화, 사람의 눈으로 관찰되는 현실 세계의 갑작스러운 변화를 유지한 다음 근처 색상을 사용하여 그라데이션이나 다른 형태를 통해 채우는 것이 특징입니다. 픽셀의 데이터 정보로 인해 저장 용량이 줄어들고 이미지의 복원 품질에는 영향을 미치지 않습니다. JPG는 손실이 있는 압축 형식입니다. 이미지를 저장할 때 이미지는 8*8 픽셀 격자로 분해되어 개별적으로 최적화됩니다. 예: 작은 흰색 블록은 8*8px이고 검은색 배경 블록은 32*32px입니다. 작은 흰색 블록이 더 이상 순수한 흰색이 아닌 경우 다음 그림과 같이 주변의 작은 흰색 블록이 매우 선명합니다.
오른쪽 상단의 흰색 그리드는 8*8 픽셀 그리드 단위가 아니기 때문에 저장하면 주변의 8*8 그리드 단위와 색상이 혼합됩니다. 아래 그림의 효과는 다음과 같습니다.
JPG 사진을 저장할 때 이미지가 흐려지는 이유는 다음과 같습니다. 여러 컬러 사진의 부분 비교 효과는 다음과 같습니다.
무손실 압축: 데이터의 통계적 중복성을 사용하여 압축하여 이미지의 각 픽셀에 대한 데이터 정보를 실제로 기록합니다. 어떤 색상이 같고 어떤 색상이 다른지 먼저 판단하고, 동일한 색상의 데이터 정보를 압축하여 기록하고, 다른 데이터는 별도로 저장하는 것이 그의 원칙입니다. 여러 번 저장해도 사진 품질이 저하되지 않습니다.
무손실 압축 이미지도 왜곡되는 이유는 무엇입니까? 그의 압축 원리는 이미지의 동일한 영역에 있는 색상을 색인화하여 압축하고 복원하는 것입니다. 즉, 이미지의 색상 수가 다음보다 적을 때만 가능합니다. 이미지를 저장하고 복원할 수 있는 색상 수입니다. 그렇지 않으면 일부 이미지 정보가 손실됩니다. 예를 들어 PNG-8 및 GIF 형식은 다음과 같습니다.
PNG24는 트루컬러이므로 색상표가 비어 있고 왜곡되지 않습니다.
3. PNG, GIF, JPG 이미지 비교.
이미지 최적화 기술을 진행하기 전에 이미지 형식에 대한 몇 가지 기술적 세부 사항을 배워야 합니다. 각 그래픽 형식에는 고유한 장점과 단점이 있으며 이를 알면 더 나은 시각적 품질과 압축 품질을 얻는 데 도움이 됩니다.
웹 페이지 이미지 최적화는 웹 페이지 가속화에서 매우 중요한 단계입니다. 이미지를 압축하면 대역폭을 절약할 수 있을 뿐만 아니라 웹 페이지 속도도 높일 수 있습니다. 일반적으로 사용되는 이미지 편집 소프트웨어는 이미지를 압축할 수 있습니다.
PNG-8의 높은 압축률 이미지를 잘라낼 때 때로는 PNG-8을 선택하면 더 높은 압축률을 얻을 수 있습니다. 참고로 PNG-24가 아니라 PNG-8입니다. 그러나 어떤 경우에는 GIF 또는 JPG가 더 작을 수 있으므로 실제 상황에 따라 디버깅하여 최상의 솔루션을 선택해야 합니다.
포스터화를 사용한 PNG-24 최적화 팁:
Weibo의 왼쪽 탐색에 있는 작은 아이콘을 예로 들면 압축된 이미지 크기 비교는 다음과 같습니다.
PS 톤 분리 단계는 다음과 같습니다.
사이즈 비교:
도구 최적화를 사용한 후에는 더 작아질 수 있습니다.
위 이미지는 원래 GIF 형식이었으니 참고해주세요
PNG 형식으로 변경되었습니다
따라서 도구를 사용하여 최적화할 때는 최적화되지 않은 일부 사진이 누락되는 일이 없도록 파일 형식이 변경되었는지 확인해야 합니다.
Weibo 홈페이지 이미지 최적화 적용:
1. 그래픽 유형 및 사진 유형 이미지 형식을 선택할 때 이미지의 사용 시나리오나 기능도 고려해야 합니다. 이는 그래픽 유형과 사진 유형의 두 가지 범주로 요약될 수 있습니다. 그래픽 기호는 고도로 압축되어 있습니다. , 기억하기 쉬운 특징과 적은 수의 색상으로 정보를 빠르게 전달할 수 있습니다.
그래픽 클래스는 일반적으로 PNG 형식 또는 GIF 형식을 사용합니다. 최적화 시 PNG 형식은 PNG8 또는 PNG24가 될 수 있으며 품질은 32가 될 수 있습니다. 색 손실이 있는 경우 품질은 64 또는 128이 될 수 있습니다.
예를 들어 홈페이지 왼쪽 탐색 아이콘, 피드 영역 아이콘, 메달 사진, 이모티콘 애니메이션은 모두 그래픽입니다.
사진 범주: 사진에는 일반적으로 부드러운 색상 전환 및 그라데이션을 포함하여 수백만 가지 색상이 포함되어 있습니다. 그래픽이 더 복잡하면 사진에 실제 사진이 나타나는 경우도 있습니다.
일반적으로 사진에는 PNG와 JPG가 사용됩니다. 그림의 색상의 풍부함에 따라 결정될 수 있습니다.
PNG의 품질은 일반적으로 128입니다. JPG의 품질은 일반적으로 노이즈 정도에 따라 70-80 사이여야 합니다.
예: 스킨 배경 이미지, 게시자, 버튼 배경, 게시자 아래 팁, 오른쪽 광고, 사용자 아바타, 사용자가 게시한 사진.
2. 일반 카테고리와 랜덤 카테고리는 홈페이지에 사진이 게재되는 빈도에 따라 일반 카테고리와 랜덤 카테고리로 구분됩니다. 일반 카테고리: 홈페이지에서는 모든 사람이 아이콘, 버튼, 작은 배경을 볼 수 있습니다.
예를 들어 상단 트레이 아이콘, 왼쪽 가이드 아이콘, 피드 영역 아이콘, 게시자 아이콘, ID 아이콘, 작업 아이콘, 상태 아이콘 및 버튼이 있습니다. 가능한 한 PNG 형식으로 저장하면 파일 크기가 상대적으로 작아집니다.
아래 그림은 GIF 및 PNG 형식의 Weibo 버튼과 왼쪽 탐색 아이콘의 크기 비교를 보여줍니다.
아래 그림은 GIF 및 PNG 형식으로 저장된 Weibo 버튼 배경 이미지의 크기 비교를 보여줍니다.
무작위 카테고리: 정의하고 게시하는 항목에 따라 다릅니다.
A. 이모티콘 GIF
FireWorks나 ImageReady를 사용할 수 있으며 ImageReady를 권장합니다.
이러한 표현의 색상 값은 상대적으로 작고, 큰 색상을 사용하면 저장 용량이 커지기 때문에 하나씩 수동으로 조정하는 것이 가장 좋습니다.
게다가 일괄 처리도 처리할 폴더가 하나 필요합니다. 표현식용 폴더가 너무 많아서 기본적으로 일괄 처리가 여전히 매우 느립니다. 일괄 처리를 위해 FireWorks를 사용하면 일부 애니메이션이 더 빨라지거나 가장자리가 누락됩니다.
수동으로 처리할 경우 인덱스 색상 개수에 따라 저장합니다. 일반적으로 4~128개의 인덱스 색상이 저장됩니다.
B. 피부 재포장 사진:
JPG 형식이나 PNG 형식을 사용하세요.
스킨의 메인 배경 이미지에 실제 사진이나 텍스트가 포함되어 있는 경우 JPG 형식이면 디자인에 더욱 가깝도록 85 이상의 화질 압축 이미지를 사용해야 합니다. 배경 이미지의 색상 범위가 작은 경우 PNG 형식일 수 있습니다.
C. 메달 카테고리:
현재 GIF와 PNG의 두 가지 형식이 있습니다. GIF는 작은 이미지이고 PNG는 중간 및 큰 이미지입니다. 품질을 위해 128을 선택하십시오.
이 디렉터리의 일괄 처리가 더 빠릅니다. 왜냐하면 모두 같은 폴더에 있기 때문입니다. 그러나 수동으로 사용하면 크기가 더 작아집니다.
D. 각종 광고:
팁, 오른쪽 광고, 게시자 하단 광고. JPG 형식이나 PNG 형식을 사용하세요.
E. 사용자 관련 그래프:
사용자가 게시한 아바타와 이미지는 백그라운드에서 압축 품질을 제어해야 합니다. JPG 형식이나 PNG 형식을 사용하세요.
이미지 최적화 도구 Smush.it 소개
Smush.it은 YUI 팀이 제작한 YUI를 기반으로 한 온라인 이미지 최적화 도구입니다.
이는 다음 네 가지 이미지 최적화 제안을 기반으로 하는 서비스입니다.
JPG에서 메타데이터를 제거합니다.
JPG의 압축률을 최적화합니다.
특정 GIF 이미지를 색인 생성 가능한 PNG 형식 이미지로 변환합니다.
색인 생성 가능한 이미지에서 사용되지 않은 색상 정보를 제거합니다.
따라서 Smush.it을 사용하여 이미지를 압축하면 이미지의 시각적 효과와 품질을 변경하지 않고도 이미지에서 초과 바이트를 제거할 수 있습니다.
실제 사용에서 발견된 내용:
일부 JPG 이미지를 PNG 이미지로 변환할 수도 있습니다.
PNG24 트루 컬러 이미지의 경우 육안으로 감지할 수 없는 일부 색상 정보를 제거할 수 있어 PNG24 이미지를 최적화할 수 없는 포토샵과 불꽃의 단점을 보완합니다.
GIF 애니메이션 이미지를 최적화할 수 있습니다.
Smush.it 사용 방법 1: Firefox 플러그인 Yslow의 도구 도구에서 모든 Smush.it 사용
Weibo 홈페이지를 예로 들어보겠습니다.
Firebug, Yslow 도구를 사용하고 실행 후 도구를 선택하세요.
All Smush.it을 클릭하면 자동으로 http://www.smushit.com/ysmush.it/로 이동하여 다음 그림을 얻습니다.
Smusshed 이미지 다운로드 버튼을 클릭하면 zip 파일이 다운로드됩니다.
방법 2: Smush.it 웹사이트에 직접 로그인하고 압축해야 하는 이미지의 URL을 입력 상자에 붙여넣고(또는 로컬 컴퓨터에서 이미지를 선택) Smush를 클릭하여 이미지를 압축한 다음 Smuch를 클릭합니다. 최적화 보고서를 제공하고, 이미지 압축률과 저장된 바이트 수를 표시하고, 압축된 이미지 파일이 포함된 다운로드 가능한 압축 패키지를 제공합니다.
아래 그림은 온라인 URL(쉼표로 구분)을 직접 입력하는 방법을 보여줍니다.
다음 그림은 로컬 컴퓨터에서 이미지를 선택하는 방법을 보여줍니다.
아래 그림은 최적화 결과를 보여줍니다.
유도:
핵심 사항을 다시 검토해 보겠습니다.
1. 적절한 형식을 선택하십시오. 사진을 저장하려면 JPG를 사용하고, 애니메이션을 저장하려면 GIF를 사용하고, 다른 사진을 저장하려면 PNG를 사용하고, 가능한 한 PNG8을 사용하십시오.
2. PNG24 이미지의 압축 기술.
3. Smush.it의 사용.