PixRinseẢnh chụp màn hình hiển thị ứng dụng tiếng Anh. Tên và điều khiển đặt trước cũng có sẵn bằng ngôn ngữ ứng dụng của bạn.
Điểm xuất phát của bạn
Sử dụng Web đáp ứng trong PixRinse, sau đó xem xét các cài đặt này dựa vào đích đến thực tế của bạn.
| Chiều rộng | 320 / 640 / 1280 / 1920 px |
|---|---|
| đầu ra | WebP, chất lượng 80 |
| Màu sắc | sRGB |
| Nguồn nhỏ | Các biến thể lớn hơn bị bỏ qua |
Làm thế nào để làm điều đó
Bắt đầu với tài sản ban đầu
Sử dụng nguồn đủ rộng cho biến thể lớn nhất mà bạn cần. Mọi đạo hàm đều được tạo từ bản gốc thay vì bị thay đổi kích thước nhiều lần.
Chọn Web đáp ứng
Xem lại bốn chiều rộng và tên tệp được tích hợp sẵn. Các biến thể rộng hơn nguồn sẽ bị bỏ qua, vì vậy hãy kiểm tra số lượng đầu ra theo kế hoạch.
Xuất bộ ảnh
Xem xét tất cả các kết quả đầu ra. Nhiều đầu ra cho mỗi nguồn yêu cầu Pro; bậc miễn phí vẫn có thể được sử dụng để kiểm tra quy trình làm việc một kích thước.
Thêm hình ảnh vào trang của bạn
Sử dụng bộ mô tả chiều rộng trong srcset và đặt sizes để khớp với bố cục thực tế. Bao gồm chiều rộng, chiều cao và văn bản thay thế chính xác trên thành phần hình ảnh.
<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"
>CÁC TẬP TIN TỪ HƯỚNG DẪN NÀY
Ví dụ này tạo ra điều gì
Nguồn có chiều rộng 3072 px đủ lớn cho cả bốn chiều rộng đặt trước. Mỗi tệp là một WebP riêng biệt, được tạo trực tiếp từ nguồn đó.
- Chất lượng
- 80
- Cấu hình màu
- sRGB
- Đầu ra từ một nguồn
- 4
| Tài liệu | Định dạng | Điểm ảnh | Byte |
|---|---|---|---|
| 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 |
Đo trên các tập tin mẫu được hiển thị. Kết quả của bạn phụ thuộc vào bản gốc và cài đặt của bạn. Bức ảnh chụp chiếc bình gốm là một mẫu do AI tạo ra. Ảnh chụp màn hình ứng dụng và số đo tệp được xuất là có thật.
Một số câu hỏi thường gặp
Điều gì xảy ra nếu nguồn của tôi chỉ rộng 1000 px?
Mẫu bỏ qua các biến thể 1280 và 1920 px. Chỉ các tệp tham chiếu thực sự được tạo.
Ứng dụng có tạo ra HTML không?
Quy trình công việc này tạo ra hình ảnh. Thêm srcset và sizes vào mã trang web hoặc hệ thống nội dung của bạn.
Đưa quy trình làm việc vào hoạt động.
Mở PixRinse, thêm một vài hình ảnh và bắt đầu với cài đặt ở trên.
Tải cho MacMiễn phí: tối đa 10 hình ảnh mỗi lô và một đầu ra cho mỗi nguồn. Nhiều đầu ra của quy trình công việc này yêu cầu Pro. So sánh miễn phí và chuyên nghiệp.