차세대 이미지 형식 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 이상 |
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 ...
대부분의 웹브라우저가 요소 검사 기능을 갖추고 있습니다. 파이어폭스가 가장 유명하기는 하지만, 크롬을 주로 쓰다보니 크롬의 요소 검사가 제일 편합니다. 크롬 요소 검사를 실행(F12)하면 HTML을 보여주는 패널과 CSS를 보여주는 패널이 세로로 배열되거나 가로로 배열되는데, 요소 검사 부분의 크기에 따라 자동으로 변경됩니다. 만약, 가로 또는 세로로 고정하고 싶다면... 요소 검사의 오른쪽 위에 있는 점 ...
Font Awesome 5 / 아이콘으로 체크박스 디자인하기
체크박스는 체크박스를 클릭해도, 라벨을 클릭해도 체크가 됩니다. 체크박스는 이 성질을 이용해서 디자인합니다. 체크박스를 Font Awesome 아이콘으로 변경해서 꾸미는 방법을 알아보겠습니다. 이 방법을 사용하기 위해서는 Font Awesome을 CSS 파일로 연결해야 합니다. 체크박스와 라벨 만들기 체크박스와 라벨을 만듭니다. 라벨은 두 개 만들고, 첫 번째 라벨에는 내용을 넣지 않습니다. <!doctype html> <html lang="ko"> <head> <meta ...
윈도우(Windows) 버전과 인터넷 익스플로러(IE : Internet Explorer) 버전
인터넷 익스플로러는 마이크로소프트가 제공하는 웹브라우저입니다. 현재는 점유율이 많이 낮아졌지만, 한때 95%가 사용할 정도로 절대 강자였던 프로그램입니다. IE의 가장 큰 특징은 윈도우(Windows)에 종속되어 있다는 것입니다. 즉, 윈도우 버전마다 설치할 수 있는 IE의 버전이 다릅니다. 최신 버전의 IE를 사용하려면 최신 버전의 윈도우를 사용해야 합니다. 사용자가 IE 때문에 윈도우를 살리는 없기에, 웹 개발자에게는 아주 골치아픈 ...
카카오에서 다음 웹마스터 도구 베타 서비스를 시작하였습니다. 구글 서치 콘솔, 네이버 웹마스터 도구, 빙 웹마스터 도구와 비슷한 서비스를 제공하는 것이라 추측합니다. 사이트 등록하고, 색인이 잘 되는지 확인하고, 문제점을 파악하고... 그래서 사이트를 등록을 해보았는데... 좀 특이한 것이 있습니다. 우선 robots.txt로 사이트 인증을 합니다. 다른 웹마스터 도구는 HTML 태그를 사용할 수 있는데, 다음은 특이하게도 ...
Lighthouse로 사이트 속도 측정과 개선 사항 확인하는 방법
사이트 속도와 관련된 문제를 파악할 때 PageSpeed Insights를 많이 이용합니다. 약간 귀찮은 점은 속도 측정을 위해서 PageSpeed Insights에 접속하고 URL을 붙여 넣여야 한다는 것입니다. 만약 많이 불편하다면 Lighthouse를 사용해보세요. 크롬 확장 기능으로 추가하여 원하는 페이지를 바로바로 검사할 수 있습니다. Lighthouse는 웹 앱의 품질을 개선하는 오픈 소스 자동화 도구입니다. Lighthouse는 Chrome 확장프로그램, 커맨드 ...
Font Awesome 4 / HTML 문서에 연결하고 아이콘 넣기
HTML 문서에 연결하기 Font Awesome은 CDN을 이용할 수도 있고 다운로드 받아 사용할 수도 있습니다. 간편한 방법은 CDN이지만, 속도가 느리다면 다운로드 받아 사용합니다. CDN 이용하기 HTML 문서의 <head>와 </head> 사이에 다음의 코드를 추가합니다. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 4.7.0은 Font Awesome 버전으로, 숫자를 변경해서 원하는 버전을 사용할 수 있습니다. 다운로드 받아 사용하기 Font Awesome v4.7.0 홈페이지에서 다운로드를 클릭합니다. 새 창이 뜨면 ...
CSS는 변수를 사용할 수 없습니다. 반복적으로 사용되는 코드라도 계속 입력을 해야 합니다. 그 코드가 바뀌면 모든 코드를 수정해야 합니다. 하지만, SASS는 변수를 사용할 수 있습니다. 반복적으로 사용되는 코드를 변수에 저장하고 꺼내 쓸 수 있습니다. 수정할 때는 변수의 값만 변경하면 되므로 작업이 간단해집니다. 변수 선언하기 $variable-name: variable-value; 예를 들어 $jb-color: red; 와 같이 하면 jb-color라는 변수에 ...
WebP와 AVIF는 웹에서 이미지 파일을 압축하고 전달하는 데 사용되는 최신 이미지 포맷이다. 이들은 기존 포맷인 JPEG, PNG와 비교하여 더 나은 압축 성능과 이미지 품질을 제공한다. WebP Google에서 개발한 이미지 포맷으로, 2010년에 처음 발표되었다. 손실 및 무손실 압축을 모두 지원한다. 장점 더 작은 파일 크기 JPEG와 비교했을 때, WebP는 동일한 이미지 품질에서 파일 크기를 약 25-34% 줄일 ...
robots.txt 파일은 웹사이트의 루트 디렉터리에 위치하여 검색 엔진 크롤러(예: Googlebot)에게 어떤 페이지나 파일을 크롤링할 수 있는지 또는 크롤링할 수 없는지 알려주는 텍스트 파일이다. 이 파일은 웹사이트의 크롤링 지침을 설정하는 데 사용된다. 구성 요소 User-agent 크롤러의 이름을 지한다. 예를 들어, 구글은 Googlebot, 빙은 Bingbot이다. *는 모든 크롤러를 의미한다. Disallow 크롤러가 접근하지 못하도록 할 경로를 지정한다. Disallow: ...