ข้ามไปยังเนื้อหา
โดย TumWebSME
106 views
10 นาที

ขนาดแบนเนอร์เว็บไซต์เท่าไหร่ดี? และข้อมูลอะไรที่ไม่ควรฝังไว้ในรูป

เจ้าของร้านกาแฟยืนข้างกระดานดำ กดนิ้วค้างบนมือถือเพื่อเช็กแบนเนอร์เว็บของร้าน บนกระดานมีการ์ดบอกขนาดจอคอมไทย 1920x1080 ราว 23.91% จอมือถือไทย 414x896 ราว 14.88% และข้อความว่าราคา โปร เบอร์โทร ให้เป็นตัวหนังสือจริง

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

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

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

ขนาดแบนเนอร์เว็บไซต์ที่ใช้ได้ทั้งจอคอมและมือถือ

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

ขนาดสำหรับจอคอม

ข้อมูลของ StatCounter ฝั่งเดสก์ท็อป เดือนกันยายน 2569 ในประเทศไทย จอที่คนใช้มากที่สุดคือ 1920x1080 ราว 23.91% รองลงมาคือ 1536x864 ราว 9.83% และ 1366x768 ราว 7.08% ตัวเลขชุดนี้เปลี่ยนทุกเดือน แต่ภาพรวมบอกได้ว่าถ้ารูปแบนเนอร์เต็มความกว้างจอมีความกว้างราว 1,600 ถึง 1,920 พิกเซล รูปจะยังคมบนจอที่คนไทยใช้กันเป็นส่วนใหญ่

ส่วนความสูง ขึ้นอยู่กับว่าอยากให้แบนเนอร์กินพื้นที่แค่ไหน สัดส่วน 16:9 อย่าง 1600x900 ให้ความรู้สึกเต็มจอ ถ้าอยากให้คนเห็นเนื้อหาด้านล่างเร็วขึ้นก็ตัดให้เตี้ยลงได้ ข้อสำคัญคือวางของสำคัญในภาพไว้ช่วงกลาง เพราะขอบซ้ายขวาจะถูกตัดเมื่อจอแคบลง

ขนาดสำหรับมือถือ และเหตุผลที่ใช้รูปเดียวกันมักไม่พอ

ข้อมูลฝั่งมือถือของ StatCounter ในประเทศไทยเดือนเดียวกัน จอที่พบบ่อยที่สุดคือ 414x896 ราว 14.88% ตามด้วย 360x800 ราว 10.64% 384x832 ราว 7.36% และ 390x844 ราว 6.49% สังเกตว่าจอมือถือเป็นแนวตั้งทั้งหมด ขณะที่แบนเนอร์จอคอมเป็นแนวนอน

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

ทำไมไม่มีขนาดมาตรฐานเดียว

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

ลองเช็กสามนาที: แบนเนอร์หน้าเว็บคุณฝังอะไรไว้ในรูปบ้าง

ก่อนอ่านต่อ ลองเปิดหน้าแรกของเว็บคุณบนมือถือแล้วทำสามอย่างนี้ครับ

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

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

อย่างที่สาม ลองกดแปลหน้าเว็บเป็นภาษาอังกฤษ ตัวหนังสือจริงจะเปลี่ยนเป็นภาษาอังกฤษ ส่วนข้อความในรูปจะยังเป็นภาษาไทยเหมือนเดิม

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

ทำไมข้อมูลในรูปถึงทำให้เสียลูกค้า

Google มองรูปได้บางส่วน แต่ข้อความจริงชัดเจนกว่า

ต้องให้ความเป็นธรรมกับ Google ก่อนครับ ระบบของ Google ไม่ได้ตาบอดต่อรูปภาพ เอกสารของ Google Search Central เขียนไว้ว่า Google ใช้ alt text ร่วมกับอัลกอริทึม computer vision เพื่อทำความเข้าใจรูป ใครที่บอกว่า Google อ่านรูปไม่ได้เลยจึงพูดเกินไป

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

บนจอมือถือ แบนเนอร์ถูกย่อจนตัวหนังสืออ่านไม่ออก

แบนเนอร์ที่ออกแบบบนจอคอมกว้าง 1920 พิกเซล พอไปอยู่บนมือถือกว้างราว 400 พิกเซล ทุกอย่างในรูปเล็กลงเกือบห้าเท่า ตัวหนังสือเงื่อนไขโปรตัวเล็ก ๆ ที่มุมล่างแทบจะกลายเป็นเส้นขีด ลูกค้าต้องถ่างนิ้วซูมถึงจะอ่านได้ ซึ่งหลายคนเลือกกดออกแทน

เรื่องนี้มีเกณฑ์สากลรองรับด้วยครับ WCAG 2.2 ข้อ 1.4.5 Images of Text ซึ่งเป็นเกณฑ์ระดับ AA ระบุว่าถ้าเทคโนโลยีที่ใช้ทำหน้าตาแบบที่ต้องการได้อยู่แล้ว ให้ใช้ตัวหนังสือจริงสื่อข้อมูลแทนรูปภาพของตัวหนังสือ เหตุผลคือคนที่สายตาไม่ดีจะได้ปรับขนาดตัวอักษรและสีให้อ่านได้ ซึ่งทำไม่ได้เลยถ้าข้อความถูกฝังอยู่ในรูป

แก้ราคาทีหนึ่งต้องเปิดไฟล์ออกแบบใหม่

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

สไลด์ที่หมุนเอง ทำให้คนพลาดข้อมูลที่อยู่ตรงหน้า

ข้อมูลในรูปจะยิ่งหายง่ายขึ้นถ้าอยู่ในสไลด์ที่เลื่อนเอง Jakob Nielsen แห่ง Nielsen Norman Group เคยเล่ากรณีจากการทดสอบการใช้งานในสหราชอาณาจักรเมื่อปี 2556 ผู้ทดสอบได้โจทย์ให้หาว่า Siemens มีโปรเครื่องซักผ้าไหม โปรส่วนลด 100 ปอนด์อยู่บนหน้าแรกชัด ๆ แต่เธอมองไม่เห็น ใช้เวลาอยู่บนหน้านั้นนานแล้วสรุปว่าไม่มีโปร ข้อสรุปของบทความคือสไลด์ควรเปลี่ยนเฉพาะตอนที่ผู้ใช้สั่งเท่านั้น

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

ข้อมูลไหนต้องเป็นข้อความจริง ข้อมูลไหนอยู่ในรูปได้

หลักง่าย ๆ คือ ถ้าเป็นข้อมูลที่ลูกค้าอาจค้นหา อาจอยากคัดลอก หรือที่คุณต้องแก้บ่อย ให้เป็นตัวหนังสือจริงทั้งหมด ได้แก่ ราคา โปรโมชันและเงื่อนไข เบอร์โทรและไอดี LINE เวลาเปิดปิด ชื่อบริการหรือชื่อสินค้า และข้อความบนปุ่มอย่าง "จองคิว" หรือ "ทัก LINE"

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

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

"แต่ทำเป็นรูปทั้งก้อนมันสวยกว่า คุมฟอนต์ได้"

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

สิ่งที่เปลี่ยนไปคือเว็บทุกวันนี้ทำเรื่องเดียวกันได้ด้วยตัวหนังสือจริงแล้ว ใช้ฟอนต์ของแบรนด์ได้ จัดตำแหน่งวางทับบนรูปได้ ใส่สีและเงาได้ เกณฑ์ WCAG ข้อเดียวกันก็ยอมรับข้อยกเว้นไว้ตรง ๆ ว่าโลโก้หรือกรณีที่หน้าตาของตัวอักษรเป็นสาระสำคัญจริง ๆ ยังเป็นรูปได้ ดังนั้นโลโก้ร้านของคุณอยู่ในรูปต่อไปได้เลยครับ สิ่งที่ควรย้ายออกมาคือข้อมูลที่ลูกค้าต้องใช้ตัดสินใจ

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

ทำไมแก้ตั้งแต่ตอนนี้คุ้มกว่า

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

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

แบนเนอร์ขั้นต่ำที่ทำงานได้จริง

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

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

ตัวอย่างจริงที่ลองเปิดดูได้

เว็บใหญ่หลายเว็บทำแบบกระดานดำมานานแล้วครับ ลองเปิดหน้าแรกของ IKEA ประเทศไทย ณ วันที่ 20 ตุลาคม 2569 ที่ผมเช็ก โปร "ยิ่งช้อป ยิ่งคุ้ม! ตู้ PAX/พักซ์ ช้อป 10,000 คืน 1,000" เป็นหัวข้อที่เป็นตัวหนังสือจริงในหน้าเว็บ ไม่ได้ฝังอยู่ในรูป โปรนี้เปลี่ยนไปตามรอบแคมเปญ ถ้าคุณเปิดวันอื่นอาจเห็นโปรอื่น แต่โครงยังเหมือนเดิม

อีกเว็บคือ Apple ประเทศไทย ในวันเดียวกัน ชื่อสินค้าอย่าง iPhone 18 Pro และ Apple Watch Series 12 ที่อยู่บนภาพใหญ่ เป็นหัวข้อตัวหนังสือจริงวางทับรูป ทั้งสองเว็บเป็นแบรนด์ที่ให้ความสำคัญกับหน้าตามาก และยังเลือกทางนี้

ลองใช้วิธีเช็กสามนาทีด้านบนกับสองเว็บนี้ดูก็ได้ครับ จะเห็นความต่างจากเว็บที่ฝังข้อความในรูปทันที

เคสจากงานของเราเอง: Everyday Cat Hotel

เคสที่ใกล้เรื่องนี้ที่สุดในงานของทีม TumWebSME คือเว็บ everydaycathotel.com ของ Everyday Cat Hotel โรงแรมแมวย่านสีลม สาทร ถ้าเปิดหน้าแรก จะเห็นภาพแมวนอนบนพรมนุ่ม ๆ เต็มจอ ตัวรูปไม่มีตัวหนังสือสักตัว คำว่า "โรงแรมแมว" ตัวใหญ่ ๆ ที่เห็นเป็นหัวข้อหลักที่เป็นตัวหนังสือจริงวางทับรูป

ด้านหลังบ้าน รูปนี้มีสองชุด ชุดจอคอมขนาด 1600x900 พิกเซล ไฟล์ราว 202 KB และชุดมือถือแนวตั้งขนาด 720x1280 พิกเซล ไฟล์ราว 125 KB เบราว์เซอร์จะเลือกโหลดชุดที่ตรงกับจอเอง บนมือถือแมวจึงยังอยู่กลางภาพ ไม่ถูกครอปจนเหลือแค่หาง

ราคาห้องพักก็เป็นตัวหนังสือจริงทั้งหมด เช่น 2,500 บาทต่อสัปดาห์ หรือ 7,900 บาทต่อเดือน ตามที่แสดงบนเว็บของโรงแรม ณ วันที่ 20 ตุลาคม 2569 ราคานี้โรงแรมเป็นคนตั้ง เราจึงไม่ขอระบุแทนว่ารวม VAT แล้วหรือยัง ถ้าลองค้นหาคำว่า "บาท" ในหน้านั้น จะเจอทุกราคา วันที่โรงแรมปรับราคา ทีมแก้ตัวเลขในระบบได้เลยโดยไม่ต้องทำรูปใหม่สักรูป ขนาดรูปชุดนี้เป็นตัวอย่างจากเว็บจริงหนึ่งเว็บนะครับ ไม่ใช่ขนาดมาตรฐานที่ทุกเว็บต้องใช้

แผนห้าขั้นสำหรับสัปดาห์นี้

  1. เปิดหน้าแรกบนมือถือแล้วทำเช็กสามนาที จดว่าข้อมูลอะไรบ้างที่อยู่ในรูป

  2. แยกข้อมูลที่จดไว้เป็นสองกอง กองที่ต้องเป็นข้อความจริง กับกองที่อยู่ในรูปได้

  3. ขอไฟล์รูปพื้นหลังแบบไม่มีตัวหนังสือจากนักออกแบบ ทั้งแนวนอนและแนวตั้ง

  4. ให้คนดูแลเว็บวางหัวข้อ ราคา และปุ่มเป็นตัวหนังสือจริงทับรูป แล้วปิดการเลื่อนอัตโนมัติถ้าใช้สไลด์อยู่

  5. เปิดเช็กบนมือถือของคนในบ้านอีกครั้ง ว่าอ่านราคาและเบอร์ได้โดยไม่ต้องซูม

วัดผลยังไงว่าแก้แล้วได้ผล

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

ด้านลูกค้า ลองดูใน Google Search Console ว่าหลังแก้ไปสักสองถึงสามเดือน มีคำค้นที่มีชื่อบริการคู่กับคำว่าราคาพาคนเข้าหน้าแรกมากขึ้นไหม และถ้าติดตั้ง Microsoft Clarity ไว้ จะเห็นได้ว่าคนกดปุ่มบนแบนเนอร์บ่อยขึ้นหรือเปล่า วิธีดูอยู่ในบทความMicrosoft Clarity คืออะไร ดูคลิปลูกค้าใช้เว็บจริง ครับ

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

เปลี่ยนโปสเตอร์ให้เป็นกระดานดำ

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

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

อยากให้เราช่วยดูแบนเนอร์ของคุณไหม

ส่งลิงก์เว็บของคุณมาได้เลยครับ เราจะดูให้ว่าข้อมูลไหนบนหน้าแรกยังฝังอยู่ในรูป และควรปรับตรงไหนก่อน ปรึกษาก่อนได้ ไม่มีค่าใช้จ่าย

ดูบริการและแพ็กเกจทั้งหมดได้ที่ หน้าแพ็กเกจของ TumWebSME


ช่องทางการติดตาม TumWebSME

ติดตามสาระความรู้เรื่องการทำเว็บไซต์และการตลาดออนไลน์ได้ที่:

ติดต่องานและสอบถามบริการ

  • 088-983-9386 (คุณพลอย)

  • 099-856-3198 (คุณแสนนาน)

คำค้นหา:

ขนาดแบนเนอร์เว็บไซต์
แบนเนอร์เว็บไซต์
ขนาดรูปหน้าเว็บ

FAQ: คำถามที่พบบ่อยเกี่ยวกับบทความนี้

รวมคำถามและคำตอบที่ช่วยให้คุณเข้าใจเนื้อหาในบทความนี้ได้ดียิ่งขึ้น

ไม่มีขนาดมาตรฐานกลางที่หน่วยงานไหนประกาศไว้ครับ แต่ละเว็บเลือกตามดีไซน์ของตัวเอง จุดเริ่มต้นที่ใช้ได้คือดูจอของลูกค้า ข้อมูล StatCounter เดือนกันยายน 2569 ฝั่งเดสก์ท็อปในไทย จอ 1920x1080 มีสัดส่วนมากที่สุดราว 23.91% รูปแบนเนอร์เต็มความกว้างที่กว้างราว 1,600 ถึง 1,920 พิกเซลจึงยังคมบนจอส่วนใหญ่ ตัวอย่างจากเว็บ Everyday Cat Hotel ที่เราทำ ใช้รูปจอคอม 1600x900 และรูปมือถือแนวตั้ง 720x1280 ซึ่งเป็นตัวอย่างจากเว็บจริงหนึ่งเว็บ ไม่ใช่ขนาดที่ทุกเว็บต้องใช้ครับ

ส่วนใหญ่ควรทำแยกครับ จอมือถือเป็นแนวตั้ง ข้อมูล StatCounter เดือนกันยายน 2569 ฝั่งมือถือในไทย จอที่พบบ่อยที่สุดคือ 414x896 ราว 14.88% ถ้าใช้รูปแนวนอนรูปเดียวกับจอคอม รูปจะถูกย่อจนเป็นแถบบาง ๆ หรือถูกครอปจนขอบซ้ายขวาหายไป การทำรูปแนวตั้งอีกชุดแล้วให้เบราว์เซอร์เลือกโหลดตามขนาดจอ ทำให้ของสำคัญในภาพยังอยู่ครบบนมือถือครับ

Google ไม่ได้มองไม่เห็นรูปเลยครับ เอกสารของ Google Search Central เขียนไว้ว่าใช้ alt text ร่วมกับอัลกอริทึม computer vision เพื่อทำความเข้าใจรูป แต่การเข้าใจว่ารูปเป็นภาพอะไร ไม่ได้รับประกันว่าตัวเลขราคาหรือเงื่อนไขโปรที่ฝังอยู่ในรูปจะถูกหยิบไปใช้อย่างแม่นยำ ข้อมูลที่อยากให้ลูกค้าค้นเจอจึงควรเป็นตัวหนังสือจริงบนหน้าเว็บ ซึ่งเราควบคุมได้เองทั้งหมดครับ

ยังต้องเขียนครับ alt text มีหน้าที่อธิบายว่ารูปเป็นภาพอะไร ส่วนราคา โปร และเบอร์โทรควรอยู่บนหน้าเว็บให้ทุกคนเห็นเหมือนกัน เกณฑ์ WCAG 2.2 ข้อ 1.4.5 ระดับ AA ก็ระบุให้ใช้ตัวหนังสือจริงแทนรูปภาพของตัวหนังสือเมื่อทำได้ เพื่อให้คนที่สายตาไม่ดีปรับขนาดและสีตัวอักษรได้ ซึ่งทำไม่ได้ถ้าข้อความอยู่ในรูปครับ

ถ้าจะใช้ ผมแนะนำให้ปิดการเลื่อนอัตโนมัติครับ Jakob Nielsen แห่ง Nielsen Norman Group เล่ากรณีจากการทดสอบในสหราชอาณาจักรเมื่อปี 2556 ว่าผู้ทดสอบหาโปรส่วนลด 100 ปอนด์ของ Siemens ที่อยู่บนหน้าแรกไม่เจอ แล้วสรุปว่าไม่มีโปร บทความเดียวกันแนะนำให้สไลด์เปลี่ยนเฉพาะตอนที่ผู้ใช้กดเอง กรณีนี้เป็นผู้ทดสอบคนเดียวและเป็นงานเก่า จึงใช้เป็นสัญญาณได้ แต่ไม่ใช่ตัวเลขว่ากี่เปอร์เซ็นต์จะพลาด ข้อมูลที่สำคัญที่สุดควรอยู่ในสไลด์แรกหรืออยู่นอกสไลด์ไปเลยครับ

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

ปรึกษาฟรี

เรายินดีให้คำปรึกษา บริการทำเว็บไซต์และระบบ เพื่อเป็นเครื่องมือในการต่อยอดธุรกิจของคุณ

ที่อยู่ : บริษัท ซูเปอร์เดฟจำกัด 89 รามคำแหง 82 ถนนรามคำแหง แขวงหัวหมาก เขตบางกะปิ 10240 กทม.

เวลาทำการ : 09:00 - 21:00 (เปิดทุกวัน)

หรือติดตามเรา

FacebookInstagram
TikTok

ให้เราติดต่อหาคุณ

กรอกชื่อ อีเมล และเบอร์โทรให้ครบ ติ๊กยินยอม และรอผลตรวจบอทก่อนกดส่ง