JPG 사용 시기 및 GIF 사용 시기

여러분 대부분처럼, 저도 웹에서 사용하기 위해 그래픽을 절약하는데 상당한 시간을 소비합니다. 그래서 제가 웹을 둘러보고 있을 때, 저는 최적화 실수를 발견하게 됩니다. 타이프세터가 1마일 떨어진 곳에서 코닝 파울을 발견하거나 축구팬이 포메이션을 보는 것만으로 엉터리 수비 플레이를 발견하는 것과 같은 것이다.

블로그 팁은 제가 즐겨 읽는 훌륭한 블로그가 아닙니다. 하지만 그들은 새로운 디자인을 출시했습니다. 크고 대담한 빨간색 헤더를 가지고 있고, 역방향 블록 타입도 있습니다. 이것은 고전적인 GIF 영역이지만, 그들은 JPG로 갔습니다. 이 경우 압축의 결과로 글자 주위에 인공물을 만들 것입니다. 아래 참조:

언제 JPG를 사용해야하고 언제 GIF를 해야하나요?

이미지의 사용은 CSS의 큰 부분이기 때문에 이 정보를 쉽게 사용할 수 있는 것이 좋습니다.

그래픽에서 상대적으로 적은 수의 색상을 사용하거나, 가장자리가 딱딱한 모양, 단색의 넓은 영역이 있거나, 이진 투명도를 사용해야 하는 경우 GIF를 사용합니다. 이러한 규칙은 8비트 PNG에도 동일하게 적용됩니다. GIF 파일과 거의 똑같이 생각할 수 있습니다. PNG는 GIF와 같은 애니메이션을 할 수 없지만 파일 크기가 더 작은 경우가 많습니다.

그래픽에 많은 색상이 사용되고 그라데이션이 사용되거나 사진 요소가 포함된 경우 JPG를 사용합니다.

이것들은 단지 경험의 법칙일 뿐이다.

모든 규칙과 마찬가지로, 이것들은 깨지도록 만들어져 있다. 그들이 버티지 못하는 많은 상황이 있다. 예를 들어, 상당히 작고 단조로운 사진 이미지는 GIF에 적합할 수 있습니다. 마찬가지로 GIF 압축으로 경사가 시원한 효과로 전환될 수도 있습니다. 요컨대, 몇 가지 테스트를 해서 어떤 것이 가장 잘 보이는지 살펴봐야 한다는 것입니다. 포토샵의 4-up Save Optimized As 대화상자의 아름다움입니다.

PNG는 어때?

음. 32비트 PNGs. 정말 멋진 포맷이죠? 무손실 압축. 알파 투명도. 감마 보정, 48비트 색상. 파일 크기가 더 작은 경우가 많습니다. 사랑하지 않는 게 뭐가 있겠어? 음, PNG를 사용하는 주된 이유는 아름다운 투명성을 위해서입니다. 그리고 그것이 바로 IE 6 이하에서는 작동하지 않는 것입니다. 그것을 실현시키기 위해 행해질 수 있는 약간의 해킹이 있지만, 그것은 종종 상당한 문제가 된다. PNG는 확실히 사용할 수 있습니다. 제가 찍는 스크린샷의 네이티브 포맷이기 때문에 자주 사용하지만, 대부분의 경우 PNG는 놀림일 뿐입니다. IE 6이 지도에서 삭제되기 시작하자마자, 우리는 더 광범위한 사용이 일어날 것을 보게 될 것이다.

추가: PNG에 대한 오해