PixRinse스크린샷은 영어 앱을 보여줍니다. 사전 설정된 이름과 컨트롤은 앱 언어로도 사용할 수 있습니다.
당신의 출발점
PixRinse에서 반응형 웹을 사용한 다음 실제 대상과 비교하여 이러한 설정을 검토하세요.
| 너비 | 320 / 640 / 1280 / 1920 px |
|---|---|
| 산출 | WebP, 품질 80 |
| 색상 | sRGB |
| 소규모 소스 | 더 큰 변형은 건너뜁니다. |
그것을하는 방법
원본 자산으로 시작
필요한 가장 큰 변형에 대해 충분히 넓은 소스를 사용하십시오. 모든 파생물은 반복적으로 크기를 조정하는 대신 원본에서 생성됩니다.
반응형 웹 선택
4가지 기본 제공 너비와 파일 이름을 검토하세요. 소스보다 넓은 변형은 건너뛰므로 계획된 출력 개수를 검사하세요.
이미지 세트 내보내기
모든 출력을 검토합니다. 소스당 다중 출력에는 Pro가 필요합니다. 무료 계층은 단일 크기 워크플로를 테스트하는 데 계속 사용할 수 있습니다.
페이지에 이미지를 추가하세요.
srcset의 너비 설명자를 사용하고 sizes을 실제 레이아웃과 일치하도록 설정합니다. 이미지 요소에 정확한 너비, 높이 및 대체 텍스트를 포함하세요.
예 HTML · 레이아웃에 맞게 조정
<img
src="vase-1280w.webp"
srcset="vase-320w.webp 320w,
vase-640w.webp 640w,
vase-1280w.webp 1280w,
vase-1920w.webp 1920w"
sizes="(max-width: 720px) 100vw, 960px"
width="1280" height="853"
alt="A terracotta vase with an olive branch"
>이 연습의 파일
이 예제의 결과
3072 px 폭의 소스는 사전 설정된 네 가지 너비 모두에 대해 충분히 큽니다. 각 파일은 해당 소스에서 직접 생성된 별도의 WebP입니다.
- 품질
- 80
- 색상 프로필
- sRGB
- 단일 소스의 출력
- 4
| 파일 | 체재 | 픽셀 | 바이트 |
|---|---|---|---|
| vase-1280w.webp | WebP | 1280 × 853 | 35,214 |
| vase-1920w.webp | WebP | 1920 × 1280 | 64,108 |
| vase-320w.webp | WebP | 320 × 213 | 4,018 |
| vase-640w.webp | WebP | 640 × 427 | 11,594 |
표시된 샘플 파일에서 측정되었습니다. 결과는 원본과 설정에 따라 달라집니다. 세라믹 꽃병 사진은 AI가 생성한 샘플입니다. 앱 스크린샷과 내보낸 파일 측정값은 실제입니다.
몇 가지 일반적인 질문
소스 너비가 1000 px 밖에 되지 않으면 어떻게 되나요?
템플릿은 1280 및 1920 px 변형을 건너뜁니다. 실제로 생성된 참조 파일만 해당됩니다.
앱이 HTML을 생성합니까?
이 워크플로우는 이미지를 생성합니다. 웹사이트 코드 또는 콘텐츠 시스템에 srcset 및 sizes을 추가하세요.
워크플로를 작업에 활용하세요.
PixRinse을 열고 몇 가지 이미지를 추가한 후 위의 설정으로 시작하세요.
Mac용 다운로드무료: 배치당 최대 10 이미지 및 소스당 출력 1개. 이 워크플로우의 다중 출력에는 Pro가 필요합니다. 무료와 Pro를 비교합니다.