CSS image-rendering property ควบคุมอัลกอริทึมการ Scale ให้รูปภาพ (Upscale/Downscale) ช่วยรักษาความคมชัดหรือสร้างเอฟเฟกต์ Pixel Art ได้ ตัวอย่างเปรียบเทียบ 3 โหมด: smooth, pixelated, crisp-edges
Syntax
selector {
image-rendering: auto | smooth | high-quality | crisp-edges | pixelated;
}
Values คำอธิบาย
| Value | คำอธิบาย | เหมาะสำหรับ |
|---|
auto | Browser Default (ปกติ Bilinear/Bicubic) | General Photos |
smooth | Bilinear/Bicubic Interpolation (นุ่มนวล) | Photos, Scale Down |
high-quality | High-quality Scaling (ช้ากว่า, สวยกว่า) | High-res Images, Print |
crisp-edges | Preserve Edges (Nearest Neighbor + Edge Enhancement) | Diagrams, Text, Pixel Art |
pixelated | Nearest Neighbor (Hard Edges, Pixelated Look) | Pixel Art, Retro Games, QR Codes |
ตัวอย่างที่ 1: เปรียบเทียบ 3 โหมด (Upscale 128px → 200px)
<!DOCTYPE html>
<html>
<head>
<style>
img { height: 200px; width: 200px; }
#one { image-rendering: smooth; }
#two { image-rendering: pixelated; }
#three { image-rendering: crisp-edges; }
</style>
</head>
<body>
<img id="one" src="https://images.unsplash.com/photo-1610208309350-766d71494a03?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=128&ixlib=rb-1.2.1&q=80&w=128" />
<img id="two" src="https://images.unsplash.com/photo-1610208309350-766d71494a03?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=128&ixlib=rb-1.2.1&q=80&w=128" />
<img id="three" src="https://images.unsplash.com/photo-1610208309350-766d71494a03?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=128&ixlib=rb-1.2.1&q=80&w=128" />
</body>
</html>
ตัวอย่างที่ 2: Downscale (256px → 20%)
<!DOCTYPE html>
<html>
<head>
<style>
img { padding: 5%; border-radius: 40%; height: 20%; width: 20%; }
#one { image-rendering: pixelated; }
#two { image-rendering: smooth; }
#three { image-rendering: crisp-edges; }
</style>
</head>
<body>
<img id="one" src="..." />
<img id="two" src="..." />
<img id="three" src="..." />
<br/> pixelated, smooth, crisp
</body>
</html>
เมื่อไหร่ควรใช้โหมดไหน?
📸 Photos / Photographs → smooth (หรือ auto)
- ภาพถ่ายธรรมชาติ มีรายละเอียดซับซ้อน
- Downscale: ใช้ Bicubic ให้คมชัด
- Upscale: ใช้ Bicubic/Bilinear ให้นุ่มนวล
🎮 Pixel Art / Retro Graphics / QR Codes → pixelated
- ต้องการ Edge คมชัด ไม่เบลอ
- แต่ละ Pixel ชัดเจน (Nearest Neighbor)
- QR Codes ต้องอ่านได้ → ต้อง
pixelated
📊 Diagrams / Charts / Text / Line Art → crisp-edges
- รักษาเส้นขอบคม + Anti-alias เล็กน้อย
- ดีกว่า pixelated สำหรับ Vector-like Graphics
Responsive Images + image-rendering
CSS Image Rendering กับ Transform/Animation
.zoom-on-hover {
transition: transform 0.3s ease;
image-rendering: smooth; /* หรือ crisp-edges */
}
.zoom-on-hover:hover {
transform: scale(2);
}
/* ป้องกัน Blur ระหว่าง Animation */
.will-change-transform {
will-change: transform;
image-rendering: smooth;
}
Browser Support
| Value | Chrome | Firefox | Safari | Edge |
|---|
| auto | ✅ | ✅ | ✅ | ✅ |
| smooth | ✅ | ✅ | ✅ | ✅ |
| high-quality | ❌ | ❌ | ❌ | ❌ |
| crisp-edges | ✅ | ✅ (3.6+) | ✅ (15.4+) | ✅ |
| pixelated | ✅ (41+) | ✅ (3.6+) | ✅ (15.4+) | ✅ (79+) |
Fallback Chain แนะนำ
.optimize-for-pixel-art {
image-rendering: -moz-crisp-edges; /* Firefox Old */
image-rendering: -webkit-crisp-edges; /* WebKit Old */
image-rendering: pixelated; /* Standard */
image-rendering: crisp-edges; /* Standard Alt */
-ms-interpolation-mode: nearest-neighbor; /* IE */
}
Tools & Resources
