낮은 GIF 는 스마트 폰의 사용 증가와 제한된 대역폭 사용자가 거의 즉각적인로드 시간을 예상하기 때문에 단순히 컴백하고 있습니다. 웹 이미지가 작을수록 이미지가 더 빠르게로드되고 방문자가 더 행복해집니다. 또한 많은 웹 사이트에는 광고 배너 크기에 제한이 있습니다.
GIF 이미지와 웹
GIF 이미지는 모든 크기에 적합한 원 사이즈로 간주되어서는 안됩니다. GIF 이미지는 최대 256 색을 가지므로주의하지 않으면 심각한 이미지와 색상 저하가 발생할 수 있습니다. GIF 파일 형식은 여러면에서 웹 초기 시대로 거슬러 올라가는 레거시 형식입니다. GIF 형식이 도입되기 전에는 웹 이미지가 흑백이었고 RLE 형식으로 압축되었습니다. Compuserve가 웹 이미징 솔루션으로이 형식을 출시 한 1987 년에 처음 등장했습니다. 그 당시에는 바탕 화면에 색상이 나타 났으며 전화선에 연결된 모뎀을 통해 웹에 액세스했습니다. 이로 인해 전화선을 통해 짧은 순서로 웹 브라우저에 이미지를 전달할 수있을만큼 이미지 크기가 작아 진 이미지 형식이 필요했습니다.
GIF 이미지 는 로고나 선 그리기와 같이 제한된 색상 표가있는 예리한 그래픽에 이상적입니다. 사진에 사용할 수 있지만 축소 된 색상 표는 이미지에 아티팩트를 도입합니다. 그래도 글리치 아트 (Glitch Art)의 움직임과 시네마 그래프 (Cinemagraph)의 등장은 GIF 형식에 대한 새로운 관심을 촉발 시켰습니다.
더 나은 웹 사이트 성능을위한 GIF 파일 크기를 줄이는 방법
이 팁은 GIF를 가능한 작게 만드는 데 도움이됩니다.
- 이미지 주변의 여유 공간을 자릅니다. 이미지의 픽셀 크기를 줄이는 것이 파일 크기를 줄이는 가장 효과적인 단일 방법입니다. Photoshop을 사용하는 경우 Trim 명령이이 작업에 적합합니다.
- GIF 이미지를 준비 할 때 출력 크기를 줄이는 것이 좋습니다.
- 이미지의 색상 수를 줄입니다.
- 애니메이션 GIF의 경우 이미지의 프레임 수를 줄이십시오.
- Photoshop CC 2017을 사용하는 경우 내보내기로 메뉴 항목을 사용하여 GIF 파일을 만들 수 있습니다. 파일> 다른 이름으로 내보내기 ...를 선택하고 메뉴가 열리면 파일 형식으로 GIF를 선택하고 이미지의 실제 크기 (너비 및 높이)를 줄입니다.
- Adobe Photoshop Elements 14를 사용하는 경우 파일> 웹용으로 저장을 선택 하십시오. Adobe Photoshop CC 2017, 파일> 내보내기> 웹용으로 저장 (레거시)에있는 웹 용으로 저장 대화 상자가 열립니다. 열리면 디더링을 적용하고 이미지의 색상과 물리적 크기를 줄일 수 있습니다.
- 디더링을 피하십시오. 디더링을 사용하면 일부 이미지가 더 좋아 보이지만 파일 크기가 커집니다. 소프트웨어가 허용하는 경우 더 낮은 수준의 디더링을 사용하여 여분의 바이트를 절약하십시오.
- 일부 소프트웨어에는 GIF 저장을위한 "손실"옵션이 있습니다. 이 옵션을 사용하면 파일 크기가 크게 줄어들지 만 이미지 품질도 떨어집니다.
- 인터레이스를 사용하지 마십시오. 인터레이스는 일반적으로 파일 크기를 늘립니다.
- Photoshop과 Photoshop Elements 모두 다운로드 시간을 표시합니다. 그것에 신경 쓰지 마라. 그것은 56k 모뎀의 사용을 기반으로합니다. 팝업 메뉴에서 케이블 모뎀을 선택하면 더 유효한 번호가 나타납니다.
팁 :
- 쓸데없는 애니메이션을 피하십시오. 과도한 애니메이션은 웹 페이지의 다운로드 시간을 늘릴뿐만 아니라 많은 사용자가주의를 산만하게합니다.
- 솔리드 컬러와 가로 패턴이 큰 블록이있는 GIF 이미지는 색상 그라데이션, 부드러운 그림자 및 세로 패턴이있는 이미지보다 압축됩니다.
- GIF에서 색상을 줄이면 숫자 색상이 2, 4, 8, 16, 32, 64, 128 또는 256 중에서 가능한 가장 작은 값으로 설정 될 때 최상의 압축률을 얻게됩니다.
Tom Green 업데이트