무료 온라인 이미지 최적화 도구반응형 이미지와 picture 요소 만들기
새 브라우저는 AVIF를, 오래된 브라우저는 WebP를 원하고, 나머지에게도 무언가는 있어야 합니다. 이미지를 올리면 한 벌 전부와, 방문자마다 알맞은 하나를 내려 주는 마크업을 가져갑니다.
새 브라우저는 AVIF를, 오래된 브라우저는 WebP를 원하고, 나머지에게도 무언가는 있어야 합니다. 이미지를 올리면 한 벌 전부와, 방문자마다 알맞은 하나를 내려 주는 마크업을 가져갑니다.
한 장마다 한 벌 전부가 만들어집니다. 파일 하나가 아닙니다.
AVIF, WebP, JPEG을 1280과 360픽셀로. 이미지마다 source 순서를 제대로 잡은 picture 요소가 함께 나옵니다.
이미지가 놓일 폴더와 대체 텍스트를 적고, 마크업을 복사한 뒤 zip을 가져가세요. HTML도 텍스트 파일로 안에 들어 있습니다.
브라우저는 읽을 수 있는 첫 source를 집으므로 AVIF가 WebP보다 앞에, 맨 뒤에는 순수한 img가 와야 합니다. 순서가 틀리면 모든 방문자가 제공한 것 중 가장 큰 파일을 받습니다. 손으로 쓸 때 지루하고, 모르는 사이에 틀리기 쉬운 부분이 바로 여기입니다.
1280은 노트북과 대부분의 태블릿을, 360은 휴대폰을 덮습니다. 데이터가 정말 아까운 쪽은 휴대폰입니다. srcset이 선택을 브라우저에 맡기므로, 느린 회선의 휴대폰이 데스크톱용 파일을 내려받는 일은 없습니다.
필요하지 않습니다. 보통의 파일이라 HTML 옆에 두면 마크업이 작동합니다. 나중에 사이트 앞에 제대로 된 이미지 CDN을 둔다면 이것들은 전부 필요 없어지지만, 손으로 쓴 페이지에 이미지 몇 장이라면 이게 작업 전부입니다.
그 이미지가 무엇을 보여 주는지를, 볼 수 없는 사람에게 말해 주듯 쓰세요. 묶음으로 처리할 때는 이미지마다 칸이 따로 있습니다. 사진 열 장에 설명 하나를 함께 쓰게 하면 누구에게도 도움이 되지 않기 때문입니다. 순전히 장식일 때만 비워 두세요.