Image Optimization
การเพิ่มประสิทธิภาพภาพ (Image Optimization) คือกระบวนการลดขนาดไฟล์รูปภาพโดยรักษาคุณภาพภาพที่ยอมรับได้ เพื่อปรับปรุงเวลาโหลดหน้าเว็บ ลดการใช้แบนด์วิดท์ และปรับปรุงประสบการณ์ผู้ใช้
รายละเอียดทางเทคนิค
เทคนิคหลัก ได้แก่: การบีบอัด lossy (ลดคุณภาพเล็กน้อย เช่น JPEG quality 80-85%), การบีบอัด lossless (ลดขนาดโดยไม่เสียคุณภาพ เช่น PNG optimization), responsive images (srcset/sizes สำหรับขนาดหน้าจอต่าง ๆ), lazy loading (loading="lazy"), รูปแบบสมัยใหม่ (WebP, AVIF) และ CDN-based image optimization
ตัวอย่าง
```javascript
// Image compression via Canvas
canvas.toBlob(
blob => console.log(`Size: ${(blob.size/1024).toFixed(0)} KB`),
'image/jpeg',
0.8 // quality: 0.0 (smallest) to 1.0 (best)
);
// WebP output (25-34% smaller than JPEG)
canvas.toBlob(cb, 'image/webp', 0.8);
```
เครื่องมือที่เกี่ยวข้อง
C
Compress Image
R
Resize Image
C
Crop Image
R
Rotate Image
F
Flip Image
C
Convert Image
W
Watermark Image
S
SVG to PNG
I
Image to Base64
R
Round Corners
A
Add Border
I
Image Filters
A
Adjust Image
B
Blur Image
S
Sharpen Image
M
Make Square
G
Grayscale Image
S
Sepia Image
P
Pixelate Image
S
Strip Image Metadata