5 วิธีในการเพิ่มประสิทธิภาพภาพบนเว็บไซต์วงดนตรีของคุณ

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

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

นี่คือที่ที่แนวคิดของการออกแบบเว็บไซต์ 'ตอบสนอง' เข้ามาเล่น!

การออกแบบที่ตอบสนองทำงานอย่างไร

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

รูปภาพใดๆ ที่คุณอัปโหลดไปยังเว็บไซต์ Bandzoogle จะขยายและขยายตามขนาด "พื้นที่" ของรูปภาพ

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

มาดูห้าวิธีในการเพิ่มประสิทธิภาพภาพบนเว็บไซต์วงดนตรีของคุณเพื่อให้การออกแบบของคุณถูกต้อง

1. เลือกภาพที่เหมาะสม

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

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

ศิลปิน: Tragedy Ann

เดสก์ท็อปและไวด์สกรีน

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

กล่าวอีกนัยหนึ่ง รูปภาพของคุณจะปรับขนาดสัมพันธ์กับด้านที่ยาวที่สุดของพื้นที่เสมอ

ทีนี้ ลองจินตนาการถึงสิ่งนี้บนหน้าจอที่มีความกว้าง 1,000 พิกเซล - หน้าจอเดสก์ท็อป/แล็ปท็อปกว้างกว่าที่สูง และสมมติว่าหน้าจอเดียวกันนี้สูง 570 พิกเซลเช่นกัน (อัตราส่วนประมาณ 16:9 สำหรับจอแสดงผลจำนวนมาก)

ในสถานการณ์นี้ รูปภาพของเรามีความกว้าง 1,000 พิกเซลบนจอแสดงผลนี้ แต่ได้รับการปรับขนาดให้มีความสูง 900 พิกเซล ซึ่งหมายความว่าในพื้นที่ที่มีความสูงเพียง 570 พิกเซล จะตัดส่วนที่มีมูลค่ามากกว่า 300 พิกเซลที่ด้านบนและด้านล่างของ ภาพ. ภาพหัวขาด อ๊ะ!

การวางแนวมือถือและแนวตั้ง

ทำคณิตศาสตร์แบบเดียวกันกับตัวอย่างหน้าจอมือถือที่มีความสูง 600 พิกเซล - สมมติว่าหน้าจอเดียวกันนี้มีความกว้างเพียง 320 พิกเซลเท่านั้น เมื่อรูปภาพปรับให้เข้ากับการแสดงผลนี้มากกว่าครึ่ง รูปภาพจะถูกตัดออกที่ด้านใดด้านหนึ่ง (โปรดจำไว้ว่ารูปภาพจะถูกลดขนาดลงเหลือ 667 พิกเซลกว้างบนหน้าจอแนวตั้งที่มีพิกเซลสูง 600 พิกเซล)

นี่เป็นวิธีที่ดีในการรบกวนมือกลองที่อยู่ขอบรูปวงดนตรีของคุณ ซึ่งอาจเป็นเรื่องสนุก! แต่ยังคง...

เพิ่มประสิทธิภาพ แล้วอัปโหลดไฟล์ของคุณ

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

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

เคล็ดลับง่ายๆ ในการเลือกรูปภาพที่เหมาะสมสำหรับส่วนหัวของคุณ:

• หลีกเลี่ยงการใช้ภาพที่ 'ครอบตัดระยะใกล้' - ยิ่งคุณมีพื้นที่หรือช่องว่างภายในบริเวณ 'โฟกัส' ของภาพมากเท่าใด โอกาสที่โฟกัสจะถูกตัดออกในจอแสดงผลต่างๆ ก็ยิ่งน้อยลงเท่านั้น
  
• ใช้รูปภาพขนาดใหญ่ - ขนาด 2,000 x 1800 ที่ 72dpi มักจะทำงานได้ดีสำหรับธีม Bandzoogle ส่วนใหญ่ และช่วยให้แน่ใจว่ารูปภาพของคุณจะดูดีบนทุกจอแสดงผล
  
• พยายามใช้ภาพที่ใกล้เคียงกับ 'สี่เหลี่ยมจัตุรัส' ในการวางแนว - ไม่จำเป็นต้องเป็นภาพสี่เหลี่ยมจัตุรัสที่สมบูรณ์แบบ แต่ให้ใกล้เคียงที่สุดเท่าที่จะทำได้ให้มีความสูงและความกว้างเท่ากันในรูปภาพของคุณ มักจะใช้งานได้ดีบนจอภาพใดๆ พื้นที่พิเศษนี้ช่วยให้คุณมีพื้นที่หายใจไม่ว่าเว็บไซต์ของคุณจะดูในทิศทางใด
  
• พยายามหลีกเลี่ยงการใช้รูปภาพที่มีข้อความหรือโลโก้อยู่ในรูปภาพ คุณไม่ต้องการให้ข้อความสำคัญหรือแบรนด์ของคุณถูกตัดขาดสำหรับผู้เยี่ยมชม!
  
• เพิ่มโลโก้ของคุณแทนภายใต้ตัวเลือก 'ชื่อ / โลโก้' ของโปรแกรมแก้ไขธีม Bandzoogle ของคุณ จากนั้นเพิ่มข้อความที่คุณต้องการในส่วนหัวของ 'คุณลักษณะส่วนหัวของคำกระตุ้นการตัดสินใจ' ด้วยวิธีนี้ ข้อความสำคัญของคุณจะไม่ถูกตัดออกจากขอบจอแสดงผล

ศิลปิน: Martin and James

2. ครอบตัดให้เหมาะกับธีมของคุณ

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

การออกแบบเทมเพลตบางส่วนของเราจะแสดง "เต็มหน้าจอ" เมื่อโหลด มีความสูงของส่วนหัวที่ปรับได้ สามารถแสดงรูปภาพส่วนหัวในพื้นที่จำกัด ในรูปทรงต่างๆ (เช่น เทมเพลต Spotlight) หรือแม้แต่ตั้งค่ารูปภาพส่วนหัวเป็นพื้นหลังเป็น หน้าของคุณ (เช่น Slice)

ง่ายต่อการลองใช้ธีมต่างๆ ด้วยตัวเลือกส่วนหัวที่แตกต่างกัน - คุณสามารถเปลี่ยนการออกแบบธีมผ่าน 'แก้ไขธีม' > 'ดูธีม' เลือกธีมที่คุณต้องการ ปรับแต่งธีมนั้นในตัวแก้ไขการออกแบบ คลิก 'บันทึก' และเผยแพร่ การเปลี่ยนแปลง

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

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

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

3. ตั้งจุดโฟกัส

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

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

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

ศิลปิน: Anna Bassy

4. ปรับแต่งความสูงของส่วนหัวมือถือ

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

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

โดยค่าเริ่มต้น ธีม Bandzoogle จะถูกตั้งค่าให้แสดงส่วนหัว 'เต็มความสูง' ในหน้าจอแนวตั้ง ซึ่งอาจเป็นปัญหาได้หากรูปภาพส่วนหัวของคุณมีโฟกัสไปทางด้านซ้ายและด้านขวา

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

เมื่อเปิดใช้งานแล้ว ให้คลิกไอคอน 'ตัวอย่างบนมือถือ' ในตัวแก้ไขธีม และปรับแถบเลื่อน 'ความสูงของส่วนหัว (มือถือ)' ซึ่งจะช่วยปรับพื้นที่ที่รูปภาพของคุณอยู่ในเพื่อให้ตรงกับสัดส่วนภาพของคุณมากขึ้น และแสดงส่วนต่างๆ ของรูปภาพได้มากขึ้น ภาพ. เพียงคลิก 'บันทึก' หลังจากตั้งค่านี้!

5. เพิ่มตัวกรอง

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

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

ศิลปิน: Carleen Williams

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

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

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

สร้างเว็บไซต์เพลงด้วยภาพที่ตอบสนองด้วยการคลิกเพียงไม่กี่ครั้ง สร้างเว็บไซต์ของคุณด้วย Bandzoogle วันนี้!