# Grunge Design บนเว็บ พื้นผิวดิบทำให้รูปหนักขึ้นแค่ไหน

> ที่มา: https://phygital.co.th/insights/grunge-design-david-carson-typography-guide · เผยแพร่ 4 ตุลาคม 2566 · อ่าน 11 นาที · โดย PARANATH PANARATANA

Web Almanac 2024 พบรูปใหญ่สุดของหน้าเว็บมือถือมีค่ากลาง 135 KB ส่วนภาพพื้นผิวกรันจ์ 1600×900 ที่ฟิจิทัลทดลองเป็น WebP หนัก 484 KB พร้อมทางลดน้ำหนัก

## Key Takeaways

- **HTTP Archive Web Almanac 2024 พบว่ารูปที่ใหญ่ที่สุดของหน้าเว็บบนมือถือมีขนาดกลางที่ 135 KB** — หน้าเว็บหนึ่งในสี่มีรูปใหญ่สุดตั้งแต่ 404 KB ขึ้นไป และหนึ่งในสิบหนักราว 1,002 KB ตัวเลขช่วงบนเพิ่มขึ้น 10-13% จากการเก็บข้อมูลปี 2022
- **ฟิจิทัลทดลองบีบอัดภาพ 1600×900 พิกเซลสองแบบด้วยตัวเข้ารหัสเดียวกัน ภาพพื้นเรียบเป็น WebP ได้ 6.3 KB ส่วนภาพเดียวกันที่เติมนอยส์ รอยขูด และคราบจุด ได้ 484.0 KB** — ต่างกันราว 77 เท่า ภาพพื้นผิวกรันจ์ภาพเดียวจึงหนักกว่ารูปใหญ่สุดของหน้าเว็บสามในสี่ที่ Web Almanac วัดได้
- **ในการทดลองเดียวกัน ชิ้นพื้นผิว 256×256 พิกเซลหนัก 22.1 KB และไฟล์ SVG ที่สร้างนอยส์ในเบราว์เซอร์ยาว 296 ไบต์** — ธุรกิจที่อยากได้หน้าตาดิบแบบกรันจ์จึงเลือกวิธีทำพื้นผิวได้ โดยไม่ต้องส่งภาพพื้นผิวเต็มจอให้ผู้ชมทุกคน

เจ้าของแบรนด์ที่อยากได้หน้าเว็บแนวกรันจ์ มักอนุมัติจากความดิบของภาพ โดยยังไม่ได้ถามว่าหน้านั้นจะโหลดบนมือถือช้าลงแค่ไหน หน้าเว็บแนวนี้ใช้ภาพพื้นผิวหยาบ รอยขูด และคราบเป็นหน้าตาหลัก บทนี้ตอบว่า Grunge Design คืออะไร แล้ววัดว่าพื้นผิวแบบนี้ทำให้ไฟล์รูปหนักขึ้นเท่าไหร่ โดยเทียบตัวเลขจากรายงาน Web Almanac กับการทดลองที่ฟิจิทัลทำเอง และจดคำสั่งกับเวอร์ชันโปรแกรมไว้ให้ทำซ้ำได้

135 KB คือขนาดกลางของรูปที่ใหญ่ที่สุดบนหน้าเว็บมือถือ ตามบท Media ของ [HTTP Archive Web Almanac 2024](https://almanac.httparchive.org/en/2024/media) ที่ Stefan Judis และ Eric Portis เขียน เผยแพร่ 29 ธันวาคม 2024 และแก้ไขล่าสุด 2 มกราคม 2025 ตัวเลขนี้วัดจากหน้าเว็บที่โปรแกรมของ HTTP Archive เปิดด้วยหน้าจอกว้าง 360 พิกเซลที่ความหนาแน่นพิกเซล 3 เท่า

## รูปที่ใหญ่ที่สุดของหน้าเว็บหนักเท่าไหร่

Web Almanac แยกตัวเลขรูปภาพเป็นสองมุม มุมแรกคือรูปทุกไฟล์ในหน้า มุมที่สองคือรูปที่ใหญ่ที่สุดของแต่ละหน้า มุมที่สองสำคัญกับเว็บกรันจ์ เพราะภาพพื้นผิวมักเป็นภาพพื้นหลังเต็มจอซึ่งกลายเป็นรูปใหญ่สุดของหน้า

| ตัวชี้วัด (มือถือ)      | P25   | P50    | P75    | P90      |
| -------------------------- | ----- | ------ | ------ | -------- |
| ขนาดรูปทุกไฟล์          | 2 KB  | 12 KB  | 56 KB  | 177 KB   |
| ขนาดรูปใหญ่สุดของหน้า | 37 KB | 135 KB | 404 KB | 1,002 KB |

### หน้าเว็บหนึ่งหน้ามีรูปกี่ไฟล์

หน้าเว็บมือถือตรงกลางของชุดข้อมูลมีแท็ก `<img>` 13 ชิ้น และหน้าที่อยู่ที่เปอร์เซ็นไทล์ 90 มี 56 ชิ้น ผู้เขียนบันทึกว่าพบหน้าหนึ่งที่มีมากกว่าสองพันชิ้น รูปส่วนใหญ่เป็นไฟล์เล็ก แต่เกือบทุกหน้ามีรูปใหญ่หนึ่งรูป ตัวเลขจึงต้องอ่านแยกกันระหว่างรูปทั่วไปกับรูปใหญ่สุด

### รูปใหญ่สุดหนักขึ้นเร็วแค่ไหน

เทียบกับปี 2022 รูปใหญ่สุดที่เปอร์เซ็นไทล์ 50 หนักขึ้น 8% เปอร์เซ็นไทล์ 75 หนักขึ้น 10% และเปอร์เซ็นไทล์ 90 หนักขึ้น 13% จนเกือบเท่ากับหนึ่งเมกะไบต์พอดี ผู้เขียนตั้งข้อสังเกตว่ายิ่งเป็นหน้าที่หนักอยู่แล้ว น้ำหนักรูปยิ่งเพิ่มเร็ว

### ฟอร์แมตไหนบีบได้มากที่สุด

Web Almanac วัดค่า bits per pixel หรือจำนวนบิตที่ใช้ต่อหนึ่งพิกเซล ค่ามัธยฐานบนมือถือคือ GIF 6.7 · PNG 3.8 · JPEG 2.0 · AVIF 1.4 และ WebP 1.3 ค่ายิ่งต่ำไฟล์ยิ่งเล็กเมื่อขนาดภาพเท่ากัน ส่วนแบ่งการใช้งานยังเป็น JPEG 32.4% PNG 28.4% GIF 16.8% WebP 12% SVG 6.4% และ AVIF 1.0% ภาพส่วนใหญ่บนเว็บจึงยังใช้ฟอร์แมตเก่า

## Grunge Design คืออะไร และพื้นผิวมาจากไหน

Grunge Design คือหน้าตางานกราฟิกที่ตั้งใจให้ดูไม่เรียบร้อย ใช้พื้นผิวหยาบ รอยขูด คราบหมึก ภาพเบลอ และตัวอักษรที่ซ้อนหรือถูกตัด บทความของ Teal Triggs ในนิตยสาร Graphics International ฉบับที่ 88 ปี 2001 ซึ่ง[เว็บไซต์ของ David Carson นำมาลงซ้ำ](https://www.davidcarsondesign.com/t/tag/raygun/) เล่าว่างานออกแบบนิตยสารแนวทดลองของ Carson ช่วงต้นทศวรรษ 1990 สำหรับนิตยสารอย่าง Surfer, Beach Culture และ Ray Gun ทำให้เขามีชื่อเสียงไปทั่วโลก งานชุดนี้มักถูกยกเป็นตัวอย่างของแนวกรันจ์

### พื้นผิวของงานกรันจ์ยุคแรกทำจากอะไร

Triggs อธิบายว่าภาพที่ Carson ทำให้ Ray Gun เป็นงานคอลลาจจากกระดาษที่เก็บได้ สิ่งพิมพ์ใช้แล้ว และภาพถ่ายเบลอ ที่ขยายรายละเอียดเล็ก ๆ ของงานกราฟิกบนถนน พื้นผิวยุคนั้นจึงมาจากวัสดุจริงที่ถูกสแกนหรือถ่ายภาพ เมื่อสไตล์ย้ายมาอยู่บนเว็บ วิธีที่ง่ายที่สุดคือนำภาพพื้นผิวแบบเดียวกันมาเป็นพื้นหลัง ซึ่งเป็นที่มาของไฟล์หนัก

### กรันจ์ต่างจากงานดิบแบบอื่นอย่างไร

กรันจ์เน้นพื้นผิวที่ดูสกปรกและเก่า ส่วนเว็บแนว brutalist เน้นโครงสร้างเปลือยและองค์ประกอบพื้นฐานของหน้าเว็บ สองแนวนี้ดูดิบเหมือนกันแต่ภาระของไฟล์ต่างกันมาก เพราะกรันจ์ต้องพึ่งภาพ ส่วน brutalist ใช้ข้อความและโค้ดเป็นหลัก คำตอบของคนทำเว็บแนวหลังรวบรวมไว้ใน[Web Brutalism คืออะไร ถามคนทำเว็บเองว่าทำไมไม่แต่งให้สวย](https://phygital.co.th/insights/web-brutalism-raw-html-design-guide)

## ทดลองบีบอัดภาพเรียบกับภาพพื้นผิวกรันจ์

ฟิจิทัลสร้างภาพขนาด 1600×900 พิกเซลสองภาพ ภาพแรกเป็นพื้นสีเข้มกับรูปสี่เหลี่ยมและวงกลมสีเรียบ ภาพที่สองใช้องค์ประกอบเดียวกันแล้วผสมนอยส์ 35% เพิ่มรอยขูดเส้นบาง 900 เส้นและคราบจุด 400 จุด จากนั้นบันทึกเป็น JPEG และ WebP ที่คุณภาพ 80 ด้วย Pillow 12.3.0 (libwebp 1.6.0 · libjpeg 6.2) ผลเป็นดังนี้

| ภาพ                            | JPEG q80 | WebP q80 | bits per pixel (WebP) |
| ------------------------------ | -------- | -------- | --------------------- |
| ภาพเรียบ 1600×900             | 32.6 KB  | 6.3 KB   | 0.04                  |
| ภาพพื้นผิวกรันจ์ 1600×900 | 493.6 KB | 484.0 KB | 2.75                  |
| ชิ้นพื้นผิว 256×256          | 22.4 KB  | 22.1 KB  | 2.76                  |

### ทำไมภาพพื้นผิวบีบได้น้อย

ตัวเข้ารหัสภาพลดขนาดไฟล์ได้มากเมื่อพิกเซลที่อยู่ติดกันมีค่าใกล้กัน ภาพเรียบมีพื้นที่สีเดียวกว้าง ๆ จึงบีบเหลือ 6.3 KB ส่วนนอยส์และรอยขูดทำให้พิกเซลติดกันต่างกันเกือบทุกจุด ตัวเข้ารหัสจึงต้องเก็บข้อมูลเกือบทั้งหมด ค่า 2.75 bits per pixel ของภาพกรันจ์สูงกว่าค่ามัธยฐานของ WebP ทั้งเว็บใน Web Almanac ซึ่งอยู่ที่ 1.3 เกินสองเท่า

### เปลี่ยนเป็น WebP ช่วยได้แค่ไหน

กับภาพเรียบ WebP เล็กกว่า JPEG ราว 5 เท่า (6.3 KB เทียบ 32.6 KB) แต่กับภาพกรันจ์ สองฟอร์แมตต่างกันไม่ถึง 2% (484.0 KB เทียบ 493.6 KB) การเปลี่ยนฟอร์แมตจึงช่วยภาพพื้นผิวได้น้อย ตัวที่กำหนดน้ำหนักจริงคือปริมาณรายละเอียดที่ใส่ลงไปในภาพ

### ลดความแรงของนอยส์แล้วเบาลงเท่าไหร่

ฟิจิทัลทดลองต่อโดยเปลี่ยนสัดส่วนนอยส์อย่างเดียว ไม่ใส่รอยขูดและคราบ ภาพขนาดเดิมบันทึกเป็น WebP ได้ผลดังนี้

| สัดส่วนนอยส์ | WebP q80 | WebP q60 |
| -------------- | -------- | -------- |
| 10%            | 129.0 KB | 34.2 KB  |
| 20%            | 316.8 KB | 206.6 KB |
| 35%            | 456.5 KB | 339.3 KB |

นอยส์ 10% ที่คุณภาพ 60 เหลือ 34.2 KB ส่วนนอยส์ 35% ที่คุณภาพ 80 หนัก 456.5 KB ห่างกันราว 13 เท่า ทั้งที่คนดูส่วนใหญ่ยังเห็นว่าเป็นพื้นผิวหยาบทั้งคู่ ก่อนเลือกค่าจึงควรเปิดภาพเทียบกันบนมือถือจริง

### ทำการทดลองแบบนี้กับภาพของร้านเองได้ไหม

ทำได้ด้วยโปรแกรมแต่งภาพทั่วไป เปิดภาพพื้นผิวที่จะใช้จริง ย่อให้กว้างเท่าที่หน้าเว็บจะแสดง แล้วส่งออกเป็น WebP สามค่าคุณภาพ เช่น 80 70 และ 60 จดขนาดไฟล์ของแต่ละค่า จากนั้นทำแบบเดียวกันกับภาพเดิมที่ลดความเข้มของพื้นผิวลงครึ่งหนึ่ง นำไฟล์ทั้งหมดขึ้นหน้าเว็บทดสอบแล้วเปิดดูบนมือถือ เลือกไฟล์ที่เล็กที่สุดซึ่งหน้าตายังตรงกับที่แบรนด์ต้องการ

## ทำหน้าเว็บกรันจ์ให้เบาลง

ตัวเลขข้างต้นชี้ทางเลือกสี่ทางที่ SME ใช้ได้ โดยยังเก็บหน้าตาดิบของแบรนด์ไว้

1. **ใช้ชิ้นพื้นผิวเล็กแล้ววางซ้ำ** ชิ้น 256×256 พิกเซลหนัก 22.1 KB ใช้เป็นพื้นหลังแบบวางซ้ำด้วย CSS ได้ทั้งหน้า
2. **ลดความแรงของนอยส์และคุณภาพไฟล์** ตามตารางด้านบน นอยส์ 10% ที่คุณภาพ 60 หนัก 34.2 KB
3. **สร้างนอยส์ในเบราว์เซอร์** ไฟล์ SVG ที่ใช้ฟิลเตอร์ feTurbulence สร้างนอยส์เต็มพื้นที่ 1600×900 ในการทดลองนี้ยาว 296 ไบต์
4. **จำกัดพื้นผิวไว้บางส่วน** ใช้ภาพพื้นผิวเฉพาะหัวหน้าเว็บหรือแถบคั่น แทนพื้นหลังทั้งหน้า

### แต่ละวิธีมีข้อแลกอะไร

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

### ส่งรูปใหญ่เกินจอก็เป็นน้ำหนักที่เสียเปล่า

Web Almanac ประเมินว่าหน้าเว็บเดสก์ท็อปหนึ่งในสี่ที่ใช้ `srcset` แบบกำหนดความกว้าง โหลดข้อมูลรูปเกินจำเป็นตั้งแต่ 180 KB ขึ้นไป เพราะค่า `sizes` ผิด เบราว์เซอร์จึงไม่เลือกไฟล์ที่เล็กกว่า และหน้าที่แย่ที่สุด 10% โหลดเกินเกือบหนึ่งเมกะไบต์ ผู้เขียนระบุว่าตัวเลขเหล่านี้แย่ลงเกือบสองเท่าจากสองปีก่อน ภาพพื้นผิวที่หนักอยู่แล้วจึงไม่ควรถูกส่งในขนาดใหญ่กว่าจอ

### เช็กรูปที่หนักที่สุดของหน้าเว็บตัวเองอย่างไร

เปิดหน้าเว็บในเบราว์เซอร์ Chrome บนคอมพิวเตอร์ กดปุ่ม F12 เพื่อเปิดเครื่องมือนักพัฒนา เลือกแท็บ Network แล้วกรองเฉพาะ Img จากนั้นโหลดหน้าใหม่และเรียงตามคอลัมน์ Size รูปที่อยู่บนสุดคือรูปที่หนักที่สุดของหน้า ถ้าต้องการดูแบบมือถือ ให้เปิดโหมดจำลองอุปกรณ์ก่อนโหลดหน้า ขั้นตอนนี้ใช้เวลาไม่กี่นาทีและไม่ต้องติดตั้งอะไรเพิ่ม

### Lazy-loading ใช้กับภาพพื้นผิวได้ไหม

Web Almanac บันทึกว่าการโหลดรูปแบบหน่วงเวลา (lazy-loading) ซึ่งเริ่มใช้ในปี 2020 ถูกใช้แล้วในหนึ่งในสามของเว็บไซต์ วิธีนี้ช่วยรูปที่อยู่ด้านล่างของหน้า แต่ภาพพื้นหลังที่ผู้ชมเห็นทันทีเมื่อเปิดหน้าต้องโหลดตั้งแต่แรกอยู่ดี ภาพพื้นผิวส่วนบนของหน้าจึงต้องเบาตั้งแต่ตัวไฟล์

## ข้อจำกัดของตัวเลขในบทนี้

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

### ตัวเลขของ Web Almanac ครอบคลุมอะไร

ตัวเลขใน Web Almanac มาจากหน้าเว็บที่โปรแกรมของ HTTP Archive เปิดอัตโนมัติ บอกภาพรวมของเว็บทั้งโลก ไม่ได้แยกตามประเทศหรือประเภทธุรกิจ และไม่ได้แยกว่ารูปไหนเป็นภาพพื้นผิว บทนี้จึงใช้ตัวเลขนั้นเป็นเกณฑ์เทียบ ไม่ได้อ้างว่าเว็บกรันจ์ทุกเว็บหนักกว่าค่ากลาง ส่วนบทความของ Triggs เรียกงานของ Carson ว่างานแนวทดลอง ไม่ได้ใช้คำว่ากรันจ์ การเรียกชื่อแนวจึงเป็นการจัดกลุ่มที่บทนี้ใช้เอง

## วัดรูปบนหน้าเว็บของร้านก่อนเติมพื้นผิว

เปิดหน้าเว็บของร้านบนมือถือ ดูไฟล์รูปที่ใหญ่ที่สุดด้วยเครื่องมือของเบราว์เซอร์ แล้วเทียบกับค่า 135 KB และ 404 KB จาก Web Almanac ถ้าจะเพิ่มพื้นผิวแบบกรันจ์ ให้นักออกแบบส่งไฟล์มาสามแบบ คือภาพเต็มจอ ชิ้นพื้นผิวที่วางซ้ำได้ และแบบนอยส์เบา แล้วเลือกจากขนาดไฟล์คู่กับหน้าตาบนจอมือถือจริง

ความต่างระหว่างสีบนจอกับสีบนกระดาษ ซึ่งมีผลต่อภาพพื้นผิวที่สแกนจากสิ่งพิมพ์ อ่านต่อได้ใน[RGB vs CMYK และ DPI สีจอกับสีพิมพ์ต่างกันตามค่าวัดของ ICC](https://phygital.co.th/insights/rgb-cmyk-resolution-dpi-print-guide) ส่วนงานดิบบนกระดาษอีกยุคที่ใช้ตัวอักษรเขียนมือ อยู่ใน[Psychedelic Design ตัวอักษรที่อ่านยากจนคนต้องหยุดดูโปสเตอร์](https://phygital.co.th/insights/psychedelic-design-1960s-poster-art-guide)

## สรุป

Grunge Design ใช้พื้นผิวหยาบ รอยขูด และคราบเป็นหน้าตาหลัก บนเว็บพื้นผิวแบบนี้มักมาในรูปภาพพื้นหลัง Web Almanac 2024 พบว่ารูปใหญ่สุดของหน้าเว็บมือถือมีค่ากลาง 135 KB ส่วนการทดลองของฟิจิทัลพบว่าภาพพื้นผิว 1600×900 เป็น WebP หนัก 484.0 KB เทียบกับภาพเรียบ 6.3 KB การเปลี่ยนฟอร์แมตช่วยได้น้อย ทางที่ลดน้ำหนักได้จริงคือชิ้นพื้นผิววางซ้ำ นอยส์ที่เบาลง หรือนอยส์ที่สร้างในเบราว์เซอร์

## คำถามที่พบบ่อย (FAQ)

### Grunge Design คืออะไรโดยย่อ

คืองานกราฟิกที่ตั้งใจให้ดูหยาบ ใช้พื้นผิวสกปรก รอยขูด ภาพเบลอ และตัวอักษรซ้อนกัน งานที่มักถูกยกเป็นตัวอย่างคืองานนิตยสารของ David Carson ช่วงต้นทศวรรษ 1990 และบนเว็บมักทำด้วยภาพพื้นผิวเป็นพื้นหลัง

### รูปพื้นหลังหนักเท่าไหร่ถึงเรียกว่าหนัก

ไม่มีเส้นตายตัว แต่เทียบได้กับ Web Almanac 2024 ที่รูปใหญ่สุดของหน้าเว็บมือถือมีค่ากลาง 135 KB และหนึ่งในสี่ของหน้าเว็บมีรูปใหญ่สุดตั้งแต่ 404 KB ถ้าภาพพื้นผิวของร้านหนักกว่า 404 KB ก็อยู่ในกลุ่มหนักที่สุดหนึ่งในสี่แล้ว

### AVIF ดีกว่า WebP สำหรับภาพพื้นผิวไหม

ในภาพรวมของเว็บ Web Almanac พบค่ามัธยฐาน AVIF 1.4 และ WebP 1.3 bits per pixel ใกล้กันมาก บทนี้ไม่ได้ทดลอง AVIF กับภาพพื้นผิว ควรบันทึกภาพจริงเป็นทั้งสองแบบแล้วเทียบขนาดกับหน้าตาเอง

### ถ่ายภาพพื้นผิวจริงเช่นผนังปูนมาใช้ ต่างจากนอยส์สังเคราะห์ไหม

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

### ถ้าเว็บทำด้วยเครื่องมือสำเร็จรูป ลดขนาดภาพพื้นผิวได้ไหม

ได้ ย่อภาพให้กว้างเท่าที่หน้าจอใหญ่สุดจะแสดงจริงก่อนอัปโหลด บันทึกเป็น WebP ที่คุณภาพต่ำลง และตรวจว่าเครื่องมือนั้นสร้างไฟล์ขนาดเล็กให้มือถือแยกไว้หรือไม่ การย่อก่อนอัปโหลดทำได้ทุกระบบ

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

PHYGITAL AGENCY วัดขนาดภาพบนหน้าเว็บจริง แล้วทำพื้นผิวแบบที่เบากว่าโดยรักษาหน้าตาเดิมของแบรนด์ไว้

- [นัดประชุมผ่าน Google Meet](https://calendar.app.google/DotQdE7Ca8LZG6Us5)
- [เพิ่มเพื่อนใน LINE](https://lin.ee/J8Qq8Do)