การปรับรูปภาพให้เหมาะสมด้วย @sveltejs/enhanced-img
ส่งรูปภาพขนาดเหมาะสมในรูปแบบยุคใหม่ด้วยคอมโพเนนต์ enhanced:img
การปรับรูปภาพให้เหมาะสมด้วย @sveltejs/enhanced-img เป็นบทเรียน Sveltejs Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Sveltejs Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
การปรับแต่งรูปภาพ
ปลั๊กอิน @sveltejs/enhanced-img สร้างรูปภาพแบบปรับตามหน้าจอและรูปแบบสมัยใหม่ขณะสร้างโปรเจกต์
ติดตั้ง
เพิ่มลงในส่วนพึ่งพาสำหรับการพัฒนา แล้วลงทะเบียนในไฟล์การตั้งค่า Vite
npm install -D @sveltejs/enhanced-imgตั้งค่า Vite
เพิ่มปลั๊กอินลงใน vite.config.js
import { enhancedImages } from "@sveltejs/enhanced-img/vite";
plugins: [enhancedImages(), sveltekit()]ใช้ Component
นำเข้ารูปภาพด้วยคิวรีพิเศษ แล้วใช้ <enhanced:img>
import Hero from "./hero.jpg?enhanced";
<enhanced:img src={Hero} alt="Hero" />srcset อัตโนมัติ
ปลั๊กอินจะสร้างรูปภาพหลายขนาดและหลายรูปแบบ (AVIF, WebP) สำหรับ srcset
การโหลดแบบช้า
เพิ่ม loading="lazy" สำหรับรูปภาพที่อยู่ถัดลงไปจากส่วนที่มองเห็นในตอนแรก
<enhanced:img src={Hero} alt="..." loading="lazy" />อัตราส่วนภาพ
ปลั๊กอินจะใส่ความกว้างและความสูงเพื่อป้องกันการเลื่อนของเค้าโครง
การโฮสต์บน CDN
สำหรับรูปภาพแบบไดนามิก ควรพิจารณา Cloudinary, Imgix หรือ Image Optimization ของ Vercel เพื่อปรับขนาดขณะทำงาน
รูปแบบสมัยใหม่
AVIF และ WebP ลดขนาดไฟล์ลงได้ 30–70% เมื่อเทียบกับ JPEG/PNG
ผลกระทบต่อประสิทธิภาพ
การปรับแต่งรูปภาพมักเป็นวิธีเพิ่มประสิทธิภาพที่ให้ผลมากที่สุดเพียงอย่างเดียวบนเว็บไซต์ที่มีเนื้อหา
ต้นทุนการสร้าง
การประมวลผลรูปภาพทำให้ใช้เวลาสร้างนานขึ้น ควรแคชผลลัพธ์ไว้สำหรับการสร้างแบบเพิ่มทีละส่วน
ตรวจสอบความเข้าใจ
enhanced-img สร้างอะไร
สรุปทบทวน
ใช้ @sveltejs/enhanced-img เพื่อสร้างรูปภาพแบบปรับตามหน้าจอขณะสร้างโปรเจกต์ โดยรองรับรูปแบบสมัยใหม่และ srcset
เรียนรู้ HTML ด้วย AI tutor — ฟรี
เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป
- คอร์ส
- 41
- บทเรียน
- 163
คำถามที่พบบ่อย
บทเรียน “การปรับรูปภาพให้เหมาะสมด้วย @sveltejs/enhanced-img” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การปรับรูปภาพให้เหมาะสมด้วย @sveltejs/enhanced-img” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Sveltejs Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การปรับรูปภาพให้เหมาะสมด้วย @sveltejs/enhanced-img”
ส่งรูปภาพขนาดเหมาะสมในรูปแบบยุคใหม่ด้วยคอมโพเนนต์ enhanced:img คุณปฏิบัติ Sveltejs Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Sveltejs Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Sveltejs Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “การปรับรูปภาพให้เหมาะสมด้วย @sveltejs/enhanced-img” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Sveltejs Academy นี้ได้ไหม
ได้ บทเรียน Sveltejs Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การแยกโค้ดและการนำเข้าแบบไดนามิก
- การปรับรูปภาพให้เหมาะสมด้วย @sveltejs/enhanced-img
- การโหลดคอมโพเนนต์แบบขี้เกียจ
- การวิเคราะห์ประสิทธิภาพแอป SvelteKit