Home InsightsART & CREATIVE

ART & CREATIVE

กราฟิกดีไซน์ครีเอทีฟ ความเร็วเว็บไซต์เว็บไซต์

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

4 ตุลาคม 2566

อัปเดตล่าสุด 28 กันยายน 2569

เวลาอ่านประมาณ 11 นาที

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

KEY TAKEAWAYS

3 ประเด็น

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 ไบต์

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

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

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

135 KB คือขนาดกลางของรูปที่ใหญ่ที่สุดบนหน้าเว็บมือถือ ตามบท Media ของ HTTP Archive Web Almanac 2024 ที่ 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 นำมาลงซ้ำ เล่าว่างานออกแบบนิตยสารแนวทดลองของ Carson ช่วงต้นทศวรรษ 1990 สำหรับนิตยสารอย่าง Surfer, Beach Culture และ Ray Gun ทำให้เขามีชื่อเสียงไปทั่วโลก งานชุดนี้มักถูกยกเป็นตัวอย่างของแนวกรันจ์

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

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

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

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

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

ฟิจิ⁠ทัลสร้างภาพขนาด 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 ใช้ได้ โดยยังเก็บหน้าตาดิบของแบรนด์ไว้

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

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

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

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

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 ส่วนงานดิบบนกระดาษอีกยุคที่ใช้ตัวอักษรเขียนมือ อยู่ในPsychedelic Design ตัวอักษรที่อ่านยากจนคนต้องหยุดดูโปสเตอร์

สรุป

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

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

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

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

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

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

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

PHYGITAL INSIGHT

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

ให้ PHYGITAL AGENCY ช่วยต่อยอดเรื่องนี้สู่ผลลัพธ์จริง

WEBSITE

ออกแบบ จัดทำ ดูแลเว็บไซต์ และแอปพลิเคชั่น

CONTENT MARKETING

สร้างเนื้อหาทางการตลาด

GRAPHIC DESIGN

ออกแบบกราฟิก

CORPORATE IDENTITY

ออกแบบอัตลักษณ์องค์กร

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

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

นัดประชุมผ่าน Google Meet เพิ่มเพื่อนใน LINE

WRITTEN BY

PARANATH PANARATANA

CHAIRMAN OF PHYGITAL AGENCY

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

แนะนำบทความถัดไป

ดูทั้งหมดใน ART & CREATIVE

KEY TAKEAWAYS

HTTP Archive Web Almanac 2024 พบ​ว่า​รูป​ที่​ใหญ่​ที่สุด​ของ​หน้า​เว็บ​บน​มือ​ถือ​มี​ขนาด​กลาง​ที่ 135 KB

สารบัญ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

สรุป

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

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

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

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

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

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

PHYGITAL INSIGHT

บริการที่เกี่ยวข้อง