ภาพหน้าจอแสดงแอปภาษาอังกฤษ ชื่อและการควบคุมที่ตั้งไว้ล่วงหน้ามีให้บริการในภาษาแอปของคุณ

จุดเริ่มต้นของคุณ

ใช้ เว็บแบบปรับตามหน้าจอ ใน PixRinse จากนั้นตรวจสอบการตั้งค่าเหล่านี้กับจุดหมายปลายทางที่แท้จริงของคุณ

การตั้งค่าสำหรับเวิร์กโฟลว์นี้
ความกว้าง320 / 640 / 1280 / 1920 px
เอาท์พุตWebP คุณภาพ 80
สีsRGB
แหล่งที่มาขนาดเล็กตัวเลือกที่ใหญ่กว่าจะถูกข้ามไป
PixRinse เว็บแบบปรับตามหน้าจอ ที่ตั้งไว้ล่วงหน้าแสดงขนาดเอาต์พุต WebP หลายขนาด
การตั้งค่าที่ใช้สำหรับคำแนะนำนี้ เลือกภาพหน้าจอเพื่อตรวจสอบในขนาดเต็ม

วิธีการทำ

  1. เริ่มต้นด้วยสินทรัพย์ดั้งเดิม

    ใช้แหล่งที่มาที่กว้างเพียงพอสำหรับรูปแบบที่ใหญ่ที่สุดที่คุณต้องการ อนุพันธ์ทุกรายการถูกสร้างขึ้นจากต้นฉบับแทนที่จะถูกปรับขนาดซ้ำๆ

  2. เลือก เว็บแบบปรับตามหน้าจอ

    ตรวจสอบความกว้างและชื่อไฟล์ในตัวทั้งสี่ ตัวแปรที่กว้างกว่าแหล่งที่มาจะถูกข้าม ดังนั้นให้ตรวจสอบจำนวนเอาต์พุตที่วางแผนไว้

  3. ส่งออกชุดรูปภาพ

    ตรวจสอบผลลัพธ์ทั้งหมด เอาต์พุตหลายตัวต่อแหล่งต้องใช้ Pro; Free Tier ยังสามารถใช้เพื่อทดสอบเวิร์กโฟลว์ขนาดเดียวได้

  4. เพิ่มรูปภาพลงในเพจของคุณ

    ใช้ตัวอธิบายความกว้างใน 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.webpWebP1280 × 85335,214
vase-1920w.webpWebP1920 × 128064,108
vase-320w.webpWebP320 × 2134,018
vase-640w.webpWebP640 × 42711,594
แหล่งที่มาเดียว ความกว้างของเว็บที่มีประโยชน์สี่รายการ: ผลลัพธ์ที่ส่งออกจริง
ผลลัพธ์การส่งออกจริงสำหรับไฟล์ตัวอย่างที่แสดงในการฝึกปฏิบัตินี้

วัดจากไฟล์ตัวอย่างที่แสดง ผลลัพธ์ของคุณขึ้นอยู่กับต้นฉบับและการตั้งค่าของคุณ ภาพถ่ายแจกันเซรามิกเป็นตัวอย่างที่สร้างโดย AI ภาพหน้าจอของแอปและขนาดไฟล์ที่ส่งออกเป็นของจริง

คำถามทั่วไปสองสามข้อ

จะเกิดอะไรขึ้นหากแหล่งที่มาของฉันมีความกว้างเพียง 1000 px?

เทมเพลตจะข้ามตัวแปร 1280 และ 1920 px เฉพาะไฟล์อ้างอิงที่สร้างขึ้นจริงเท่านั้น

แอปสร้าง HTML?

ขั้นตอนการทำงานนี้จะสร้างภาพ เพิ่ม srcset และ sizes ในโค้ดเว็บไซต์หรือระบบเนื้อหาของคุณ

ใส่เวิร์กโฟลว์ในการทำงาน

เปิด PixRinse เพิ่มรูปภาพ 2-3 รูปและเริ่มต้นด้วยการตั้งค่าด้านบน

ดาวน์โหลดสำหรับ Macฟรี: มากถึง 10 ภาพต่อชุดและหนึ่งเอาต์พุตต่อแหล่งที่มา เอาต์พุตหลายรายการของเวิร์กโฟลว์นี้ต้องใช้ Pro เปรียบเทียบฟรีและ Pro