차세대 이미지 형식 WebP와 AVIF
WebP와 AVIF는 웹에서 이미지 파일을 압축하고 전달하는 데 사용되는 최신 이미지 포맷이다. 이들은 기존 포맷인 JPEG, PNG와 비교하여 더 나은 압축 성능과 이미지 품질을 제공한다.
WebP
Google에서 개발한 이미지 포맷으로, 2010년에 처음 발표되었다. 손실 및 무손실 압축을 모두 지원한다.
장점
- 더 작은 파일 크기
JPEG와 비교했을 때, WebP는 동일한 이미지 품질에서 파일 크기를 약 25-34% 줄일 수 있다. - 투명도 지원
PNG와 마찬가지로 투명도를 지원하며, 무손실 압축으로도 투명도를 제공할 수 있다. - 애니메이션 지원
GIF와 유사하게 애니메이션을 지원하지만, 파일 크기는 훨씬 작다.
단점
- 호환성 문제
모든 브라우저와 이미지 뷰어에서 완전히 지원되지는 않는다. 그러나 최근에는 많은 브라우저가 WebP를 지원한다. - 변환 시간
JPEG나 PNG에 비해 변환 시간이 길 수 있다.
AVIF
AOMedia Video 1(AV1) 코덱을 기반으로 한 이미지 포맷으로, 2019년에 처음 발표되었다. 손실 및 무손실 압축을 모두 지원한다.
장점
- 더 뛰어난 압축 효율성
WebP보다 더 나은 압축 효율성을 제공하여, 동일한 이미지 품질에서 파일 크기를 약 50%까지 줄일 수 있다. - 고화질 이미지
높은 다이나믹 레인지(HDR) 이미지와 더 높은 색 깊이(10비트 이상)를 지원한다. - 투명도 및 애니메이션 지원
WebP와 마찬가지로 투명도와 애니메이션을 지원한다.
단점
- 호환성 문제
WebP보다 지원하는 브라우저와 도구가 적다. 그러나 주요 브라우저들은 점차 AVIF 지원을 추가하고 있다. - 변환 시간
AVIF 이미지의 인코딩 및 디코딩 시간이 더 길어질 수 있다.
비교
AVIF가 WebP보다 더 작은 파일 크기를 제공하는 경향이 있다. AVIF는 더 나은 이미지 품질과 색 표현을 제공할 수 있다. WebP가 현재 더 널리 지원되지만, AVIF의 지원도 빠르게 확산되고 있다.
웹사이트나 애플리케이션의 성능을 최적화하기 위해 이미지 포맷을 선택할 때, WebP와 AVIF는 모두 유용한 옵션이다. 각각의 장단점을 고려하여 프로젝트의 요구 사항에 가장 적합한 포맷을 선택하는 것이 중요하다. 예를 들어, 최대 호환성을 원한다면 WebP를 선택할 수 있고, 최고의 압축 효율성과 이미지 품질을 원한다면 AVIF를 선택하는 것이 좋다.
2024년 6월 현재, 브라우저 지원 현황은 다음과 같다.
| 브라우저 | WebP 지원 버전 | AVIF 지원 버전 |
|---|---|---|
| Google Chrome | 17 이상 | 85 이상 |
| Mozilla Firefox | 65 이상 | 93 이상 |
| Microsoft Edge | 79 이상 (Chromium) | 85 이상 (Chromium) |
| Opera | 11.10 이상 | 71 이상 |
| Safari (macOS) | 11 이상 (Big Sur) | 13 이상 (Ventura) |
| Safari (iOS) | 14 이상 | 16 이상 |
| Android Browser | 4.0 이상 | - |
| Google Chrome for Android | 모든 버전 | 85 이상 |
| Mozilla Firefox for Android | 68 이상 | 93 이상 |
| Microsoft Edge for Android | 모든 버전 | 85 이상 |
| Opera Mobile | 12.1 이상 | 60 이상 |
InfranView를 이용하여 이미지를 WebP 형식으로 변환하는 방법
WebP는 Google에서 개발한 이미지 파일 형식으로, 이미지 파일의 품질을 유지하면서 파일 크기를 줄이는 데 중점을 둔 포맷이다. WebP는 손실 압축과 무손실 압축을 모두 지원하며, JPEG, PNG, 그리고 GIF와 같은 기존 이미지 형식의 대안으로 설계되었다. JPEG나 PNG 등의 이미지를 WebP 형식으로 바꾸는 프로그램은 여러 가지가 있는데, 이미지 뷰어인 InfranView도 그 중의 하나이다. InfranView를 ...
개인 뿐만 아니라 기업에서도 사용할 수 있는 무료 텍스트 에디터 모음입니다. 라이선스는 바뀔 수 있으니, 사용 시 다시 한 번 확인하시기 바랍니다. 정렬은 알파벳순입니다. AcroEdit Platforms : Windows Atom Platforms : Windows / MAC / Linux Brackets Platforms : Windows / MAC / Linux Notepad ++ Platforms : Windows Visual Studio Code Platforms : Windows / MAC / Linux
robots.txt 파일은 웹사이트의 루트 디렉터리에 위치하여 검색 엔진 크롤러(예: Googlebot)에게 어떤 페이지나 파일을 크롤링할 수 있는지 또는 크롤링할 수 없는지 알려주는 텍스트 파일이다. 이 파일은 웹사이트의 크롤링 지침을 설정하는 데 사용된다. 구성 요소 User-agent 크롤러의 이름을 지한다. 예를 들어, 구글은 Googlebot, 빙은 Bingbot이다. *는 모든 크롤러를 의미한다. Disallow 크롤러가 접근하지 못하도록 할 경로를 지정한다. Disallow: ...
SASS / 변환 스타일 - nested, expanded, compact, compressed
변환 스타일 SCSS 파일을 CSS 파일로 변환할 때, 다음 네가지 스타일 중 하나를 선택할 수 있습니다. nested expanded compact compressed 다음과 같은 style.scss 파일을 네가지 스타일로 변환해보겠습니다. ul { font-family: Georgia; color: #333333; li { display: inline-block; } } nested sass style.scss:style.css --style nested 기본값입니다. 스타일 옵션을 붙이지 않아도 nested가 적용됩니다. ul 보다 ul ...
Font Awesome 5 / HTML 문서에 연결하고 아이콘 넣기
HTML 문서에 연결하는 방법 Font Awesome 5는 Script 또는 CSS로 연결할 수 있고, 각 방법에 대하여 CDN을 이용하거나 다운로드 받은 파일을 이용할 수 있습니다. Script VS CSS Font Awesome에서는 CSS 방식보다 Script 방식을 더 추천하고 있습니다. SVG with JS Modern, easy and powerful with new features and the most backwards compatiblity Web Fonts with CSS The classic ...
코딩할 때는 고정폭 글꼴을 사용합니다. 그래야 가독성이 높아집니다. 코딩용 글꼴로 많이 사용되는 것은 Courier New, Consolas 등이 있는데, 영어일 때는 보기 좋지만, 한글 모양은 그다지 예쁘지 않습니다. 코딩에 한글이 들어갈 일이 별로 없을 거라 생각할 수도 있지만, 주석에 사용할 수도 있고, HTML 문서 작업할 때는 꽤 많은 한글을 만나게 됩니다. 코딩에 ...
MathJax / 홈페이지에 수식 출력하게 해주는 스크립트
MathJax는 홈페이지에 수식을 표현할 수 있게 해주는 오픈소스 자바스크립트입니다. 다음의 스크립트만 HTML 문서에 추가하면 수식을 넣을 수 있습니다. <script type="text/x-mathjax-config"> MathJax.Hub.Config({ tex2jax: {inlineMath: } }); </script> <script src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script> 수식 입력은 LaTeX나 MathML 등으로 합니다. LaTeX으로 수식을 나타낸 간단한 예는 다음과 같습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...
윈도우(Windows) 버전과 인터넷 익스플로러(IE : Internet Explorer) 버전
인터넷 익스플로러는 마이크로소프트가 제공하는 웹브라우저입니다. 현재는 점유율이 많이 낮아졌지만, 한때 95%가 사용할 정도로 절대 강자였던 프로그램입니다. IE의 가장 큰 특징은 윈도우(Windows)에 종속되어 있다는 것입니다. 즉, 윈도우 버전마다 설치할 수 있는 IE의 버전이 다릅니다. 최신 버전의 IE를 사용하려면 최신 버전의 윈도우를 사용해야 합니다. 사용자가 IE 때문에 윈도우를 살리는 없기에, 웹 개발자에게는 아주 골치아픈 ...
Font Awesome 4 / 아이콘을 목록(ul, ol)의 마커로 사용하기
Font Awesome의 아이콘을 ul, li 등의 목록의 마커로 사용할 수 있습니다. 이미지를 사용하는 것보다 코드는 약간 복잡해지지만, 다양한 아이콘을 사용할 수 있고 색이나 크기를 자유롭게 변경할 수 있다는 장점이 있습니다. 아이콘 선택하기 마커로 사용할 아이콘을 선택하고, font-awesome.css 파일에서 선택한 아이콘의 코드를 찾습니다. 예를 들어 화살표 angle-right의 코드는 다음과 같습니다. .fa-angle-right:before { content: "\f105"; } 기본 마커 없애기 순서 ...
웹사이트가 IE8, IE9, IE10에서 잘 나오는지 테스트하는 방법
웹사이트를 만들 때 IE에서 잘 나오는지 확인을 해야 합니다. 다른 웹브라우저는 최신 버전을 사용한다고 가정을 하는데, IE는 윈도우에 종속되어 있어서 최신 버전을 사용할 수 없는 경우가 있거든요. 예를 들어 윈도우 XP는 IE8, 윈도우 Vista는 IE9까지만 사용할 수 있습니다. 각 버전의 IE에서 사이트가 잘 나오는지 테스트하는 방법 중의 하나는 IE 또는 Edge에 ...