웹에서 JPG 등의 그래픽 형식을 완벽하게 사용하는 방법

JPEG

JEPG는 1992년 Joint Photographic Experts Group에 의해 만들어졌으며 제작자의 이름을 따서 명명되었습니다. JPEG는 손실이 있는 래스터 이미지 형식입니다. 즉, JPEG를 압축하여 저장할 때마다 일부 정보

가 되돌릴 수 없게 손실됩니다.

JPEG는 인간의 눈 인식 결함(색상보다 밝기에 더 민감함)을 이용합니다. 압축 알고리즘을 사용하여 우리가 잘 이해하지 못하는 정보를 삭제하므로 "손실 형식"입니다. 압축률 설정에 따라 최종 저장 파일의 크기와 품질이 결정됩니다.

JPEG 사용

JPEG는 밝기 및 색상 압축에 적합하기 때문에 사진 및 기타 사실적이거나 음영 처리된 이미지(예: 그림 및 3D 렌더링)에서 잘 작동합니다. 그렇기 때문에 수년 동안 사진을 저장하는 데 가장 인기 있는 형식이었습니다. 같은 이유로 JPEG는 로고, 기하학적 도형, 스크린샷 등과 같은 벡터 이미지에는 적합하지 않습니다.

그림과 같이 복잡하거나 음영이 있는 이미지는 물론 사진도 JPEG를 사용하는 좋은 예입니다.

JPEG 압축

손실 형식인 JPEG 파일의 압축률은 최종 이미지 품질에 반비례합니다. Photoshop과 같은 도구에서 JPEG를 저장하면 0에서 100까지의 품질 설정이 표시됩니다. Photoshop에서는 일부 이미지 품질을 설정합니다. 팬 :

낮음 — 10%

— —

— —

매우 높음 -80% 100%(61KB), 매우 높음 80%(29 KB).

높음 60%(16KB), 중간 80%(7KB).

낮음 100%(6KB), 최소 0%(3KB).

적절한 이미지 품질과 더 작은 파일 크기가 결합되어 있으므로 웹 페이지에서는 50%~60% 품질 사이의 JPEG를 사용하는 것이 좋습니다. 메타데이터를 제거하면 JPEG 파일 크기도 줄어들 수 있습니다.
Photoshop에서는 "내보내기"에서 "메타데이터: 없음" 또는 "웹용으로 저장(레거시)"을 선택하여 압축할 수 있습니다. 이미지 전체 또는 일부를 흐리게 하면 파일 크기도 작아집니다.

JPEG는 손실이 있는 형식이므로 동일한 파일을 100% 품질로 저장하더라도 동일한 이미지에 압축 알고리즘이 반복적으로 적용되기 때문에 여러 번 저장하면 이미지 품질이 손실된다는 점에 유의하세요. 하지만 이 변경 사항은 파일 크기 변경에 반영되지 않을 수 있습니다.

PNG

Portable Network Graphics는 1995년부터 사용된 래스터 이미지 형식이기도 합니다. 무손실 형식이며 현재 웹에서 가장 일반적인 무손실

형식이라는 점에서 JPEG와 다릅니다. 이는 압축 알고리즘으로 인해 파일을 저장하고 압축할 때 정보가 손실되지 않음을 의미합니다.

PNG에는 다음과 같은 멋진 기능이 많이 있습니다.

투명도 채널 - 각 픽셀이 서로 다른 투명도를 가질 수 있음을 의미합니다.

8비트 파일은 팔레트 기반 색상 모델(인덱스 색상이라고도 함)을 사용할 수 있습니다. - 이는 색상 수가 줄어들면 파일이 더 작아질 수 있음을 의미합니다.

• PNG 압축은 GIF보다 25% 더 효율적입니다.

• 2D 인터레이스 - 이미지는 로드될 때 점진적으로 표시되지만 표시되지는 않습니다. 이미지가 완전히 로드된 경우에만 실행됩니다. 이 옵션을 사용하면 파일 크기가 커지므로 주의해서 사용해야 합니다.

• PNG 사용

• PNG는 선 그리기, 로고, 아이콘 및 색상이 적은 이미지에 적합합니다. 복잡한 색상이 포함된 사진 및 이미지는 PNG 형식을 사용하여 대용량 파일을 생성합니다. PNG의 또 다른 장점은 투명한 배경을 지원한다는 것입니다. 이 경우

가 복잡한 이미지라도 JPEG에서는 이미지 투명도를 얻을 수 없으므로 PNG를 사용해야 합니다.

PNG는 라인워크, 로고, 아이콘 등에 활용하기 좋습니다.

PNG 압축

PNG의 압축 알고리즘은 무손실이기 때문에 선택적으로 색상을 줄이고 외부 도구를 통해 이미지 크기를 줄일 수 있습니다.

대부분의 PNG 사용 시나리오(선 그리기, 그래픽, 아이콘)의 경우 256색이면 충분합니다. 따라서 팔레트의 색상 수를 줄이면 파일 크기를 더욱 줄일 수 있습니다.

GIF

Graphics Interchange Format도 비트맵 형식이며 이 문서에 언급된 다른 형식보다 먼저 나타났습니다. 1989년 Steve Wilhite에 의해 만들어졌으며 PNG가 만들어지기 전까지 가장 인기 있는

8비트 이미지 형식이었습니다. GIF는 PNG와 유사한 특성을 가지고 있지만 다음과 같은 몇 가지 단점이 있습니다.

• 256개 색상만 지원합니다.

• 1차원 인터리브 — 이미지가 점진적으로 표시되지만

• PNG에 비해 압축률이 낮습니다. 성능

• 이진 투명도 - 픽셀은 100% 투명하거나 100%만 볼 수 있습니다.

• 모호한 발음

SVG

Scalable Vector Graphics with front 우리가 말하는 래스터 형식은 다릅니다. 이름에서 알 수 있듯이 벡터 형식입니다. 즉, 픽셀 단위로 데이터를 저장하지 않고, 기록된 좌표 형태로 그래픽 정보를 저장한다는 뜻이다. SVG는 HTML과 약간 유사한 XML 기반의 의미 태그 구조를 사용합니다. DOM 구조로 인해 ID별로 SVG 요소를 가져와서 조작할 수 있습니다. 이는 요소를 수정하고 애니메이션을 적용하거나 JavaScript 및 CSS

를 사용하여 반응형 그래픽을 만드는 등 많은 가능성을 열어줍니다.

다른 벡터 형식과 마찬가지로 SVG 이미지는 세부 정보 손실 없이 원하는 크기로 확대할 수 있습니다.

SVG 사용

SVG는 라인 아트, 로고, 아이콘, 일러스트레이션 및 데이터 시각화에 널리 사용됩니다. 하지만 사실적인 이미지나 세부 묘사가 많은 복잡한 사진에는 적합하지 않습니다. 어떤 경우에는 SVG와 PNG가 모두 동일한 목적에 매우 적합할 수 있습니다. 라인 아트의 경우 SVG는 일반적으로 더 작은 파일 크기를 생성합니다. 그러나 이것이 불가피한 것은 아닙니다. 벡터 이미지의 앵커 포인트 수에 따라 PNG보다 큰 파일이 생성될 수도 있습니다. SVG가 정말 뛰어난 부분은 데이터 시각화입니다. 벡터 애니메이션은 JavaScript를 사용하여 조작하고 생성할 수 있으므로 D3와 같은 라이브러리는 무한한 가능성을 제공합니다.

SVG 압축

대부분의 경우 SVGz(GZipped SVG)와 같은 도구는 웹에서 사용되는 SVG 파일을 압축하는 데 사용됩니다. 웹페이지는 불필요합니다. 압축을 달성하기 위해 서버에서 Gzip을 활성화할 수 있고 활성화해야 하지만 효과는 거의 없습니다. 더 나은 접근 방식은 SVG 벡터 그래픽에서 불필요한 앵커, 요소 및 속성을 제거하여 파일 크기를 줄이는 것입니다. 앵커 포인트는 벡터 이미지를 그리므로 제거된 앵커 포인트가 벡터

모양의 최종 모양에 영향을 주지 않는지 확인해야 합니다. Adobe Illustrator를 사용하여 SVG를 편집하는 경우 파일 > 다른 이름으로 저장... 대신 내보내기 > 다른 이름으로 내보내기...를 사용하여 저장해야 합니다. 이렇게 하면 다른 이점도 있습니다.

. Sketch에서 불필요한 폴더는 SVG에 추가 태그로 저장되므로 사용하지 않도록 주의하세요.

불필요한 노드를 정리하는 것도 SVG 크기를 줄이는 방법 중 하나입니다.

요소 태그는 여는 태그와 닫는 태그를 포함하여 SVG 파일에 포함된 모든 것입니다. Adobe Illustrator 및 Sketch와 같은 벡터 편집 소프트웨어는 SVG를 불필요한 요소와 속성으로 가득 채울 수 있습니다. SVG 압축기를 사용하면 이러한 중복 정보를 제거할 수 있습니다.

위 내용은 웹에서 JPG 등의 그래픽 형식을 완벽하게 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!