웹 페이지에서 사용할 수있는 여러 이미지 형식이 있습니다. 몇 가지 일반적인 예는 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에있는 래스터 기반 형식과 달리이 파일은 벡터를 사용하여 파일 크기가 증가하지 않고 크기에 상관없이 렌더링 할 수있는 아주 작은 파일을 만듭니다. 아이콘이나 로고와 같은 일러스트레이션을 위해 만들어졌습니다.
웹 전송을위한 이미지 준비
사용하는 이미지 형식에 관계없이 귀하의 웹 사이트는 모든 페이지에서 다양한 형식을 사용해야하며, 해당 사이트의 모든 이미지가 웹 전송을 위해 준비되어 있는지 확인해야합니다. 너무 큰 이미지는 사이트가 느리게 실행되어 전반적인 성능에 영향을 줄 수 있습니다. 이 문제를 해결하려면 해당 품질 수준에서 가능한 가장 낮은 파일 크기와 높은 품질 간의 균형을 찾기 위해 이미지를 최적화해야합니다.
올바른 이미지 형식을 선택하는 것이 전투의 일부이지만이 중요한 웹 전송 프로세스의 다음 단계는 해당 파일을 준비했는지 확인하는 것입니다.
제니퍼 Kyrnin에 의해 원래 기사. 제레미 지라드 편집.
