웹 페이지에서 사용할 수있는 여러 이미지 형식이 있습니다. 몇 가지 일반적인 예는 GIF , JPG 및 PNG 입니다. SVG 파일 은 오늘날 웹 사이트에서도 일반적으로 사용되어 웹 디자이너에게 온라인 이미지를위한 또 다른 옵션을 제공합니다.
GIF 이미지
작고 고정 된 색상 수의 이미지에는 GIF 파일을 사용하십시오. GIF 파일은 항상 256 색 이상으로 줄입니다. GIF 파일의 압축 알고리즘은 JPG 파일보다 덜 복잡하지만 평면 색상 이미지와 텍스트에 사용하면 매우 작은 파일 크기가 생성 됩니다 .
GIF 형식은 사진 이미지 또는 그라디언트 색상이있는 이미지에는 적합하지 않습니다. GIF 형식에는 제한된 수의 색상이 있기 때문에 GIF 파일로 저장할 때 그라디언트 및 사진이 밴딩 및 픽셀 화로 끝납니다.
간단히 말해서 몇 가지 색상 만있는 단순한 이미지에만 GIF를 사용하지만 PNG도 사용할 수 있습니다 (자세한 내용은 곧 다룹니다).
JPG 이미지
수백만 가지 색상의 사진 및 기타 이미지에는 JPG 이미지를 사용하십시오. 복잡한 압축 알고리즘을 사용하기 때문에 이미지의 품질을 잃어 버려 작은 그래픽을 만들 수 있습니다. 이는 이미지가 압축 될 때 일부 이미지 정보가 손실되기 때문에 "손실이 많은"압축이라고합니다.
JPG 형식은 텍스트가있는 이미지, 단색의 큰 블록 및 선명한 가장자리가있는 단순한 모양에는 적합하지 않습니다. 이미지를 압축하면 텍스트, 색상 또는 선이 흐려서 다른 형식으로 저장되는 것처럼 선명하지 않은 이미지가 생성 될 수 있기 때문입니다.
JPG 이미지는 많은 자연 색상을 가진 사진 및 이미지에 가장 적합합니다.
PNG 이미지
PNG 형식은 GIF 이미지가 로열티 수수료를 지불해야하는 것처럼 보일 때 GIF 형식을 대신하여 개발되었습니다. PNG 그래픽은 GIF 이미지보다 압축률이 높기 때문에 GIF로 저장된 동일한 파일보다 작은 이미지가됩니다. PNG 파일은 알파 투명도를 제공하므로 이미지 투명도 또는 알파 투명도 범위를 사용할 수 있습니다. 예를 들어, 그림자는 투명 효과의 범위를 사용하며 PNG에 적합합니다 (아니면 CSS 그림자를 사용하여 끝낼 수도 있습니다).
GIF와 같은 PNG 이미지는 사진에 적합하지 않습니다. 실제 색상을 사용하여 GIF 파일로 저장 한 사진에 영향을 미치는 밴딩 문제를 해결할 수는 있지만 이미지가 매우 커질 수 있습니다. PNG 이미지는 구형 휴대 전화 및 피처 폰에서도 잘 지원되지 않습니다.
투명성을 요구하는 파일에는 PNG가 사용됩니다. 또한이 PNG 형식을 사용하여 GIF로 적합 할 모든 파일에 PNG-8을 사용합니다.
SVG 이미지
SVG는 Scalable Vector Graphic의 약자입니다. JPG, GIF 및 PNG에있는 래스터 기반 형식과 달리이 파일은 벡터를 사용하여 파일 크기가 증가하지 않고 크기에 상관없이 렌더링 할 수있는 아주 작은 파일을 만듭니다. 아이콘이나 로고와 같은 일러스트레이션을 위해 만들어졌습니다.
웹 전송을위한 이미지 준비
사용하는 이미지 형식에 관계없이 귀하의 웹 사이트는 모든 페이지에서 다양한 형식을 사용해야하며, 해당 사이트의 모든 이미지 가 웹 전송을 위해 준비 되어 있는지 확인해야합니다. 너무 큰 이미지는 사이트가 느리게 실행되어 전반적인 성능에 영향을 줄 수 있습니다. 이 문제를 해결하려면 해당 품질 수준에서 가능한 가장 낮은 파일 크기와 높은 품질 간의 균형을 찾기 위해 이미지를 최적화해야합니다 .
올바른 이미지 형식을 선택하는 것이 전투의 일부이지만이 중요한 웹 전송 프로세스의 다음 단계는 해당 파일을 준비했는지 확인하는 것입니다.
Jennifer Krynin의 원본 기사입니다. 제레미 지라드 편집.