เรียนรู้ว่าทำไมรูปภาพจึงไม่แสดงบนเว็บไซต์ของคุณและวิธีแก้ไข
คำพูดเก่า ๆ กล่าวว่า "ภาพมีค่าเป็นพันคำ" โดยเฉพาะอย่างยิ่งบนเว็บช่วงเวลาแห่งความสนใจสั้น ๆ อย่างฉาวโฉ่และภาพลักษณ์ที่ถูกต้องสามารถสร้างหรือทำลายไซต์โดยดึงดูดความสนใจที่ถูกต้องและดึงดูดผู้เข้าชมหน้าเว็บที่ยาวพอสำหรับพวกเขาเพื่อเรียนรู้สิ่งที่พวกเขาต้องการเรียนรู้หรือทำเฉพาะเจาะจง การกระทำที่ส่งสัญญาณว่า "ชนะ" สำหรับไซต์ ใช่เมื่อพูดถึงเว็บไซต์ภาพอาจมีมูลค่ามากกว่าหนึ่งพันคำ!
ดังนั้นเมื่อพิจารณาถึงความสำคัญของภาพออนไลน์แล้วให้พิจารณาต่อไปว่าเว็บไซต์ของคุณระบุว่าภาพที่ควรจะเป็นในไซต์ไม่สามารถโหลดได้หรือไม่? เหตุการณ์นี้อาจเกิดขึ้นได้ไม่ว่าคุณจะมีภาพแบบอินไลน์ที่เป็นส่วนหนึ่งของ HTML หรือภาพพื้นหลังที่ใช้กับ CSS (และไซต์ของคุณน่าจะมีทั้งสองแบบนี้) บรรทัดล่างคือเมื่อกราฟิกไม่สามารถโหลดลงบนหน้าเว็บทำให้รูปลักษณ์ของเครื่องเสียและในบางกรณีสามารถทำลายประสบการณ์ของผู้ใช้บนไซต์ได้อย่างสมบูรณ์ "พันคำ" ที่มีการส่งรูปภาพไม่เป็นที่แน่ชัด!
ลองดูที่สาเหตุทั่วไปบางประการที่ทำให้ภาพไม่สามารถโหลดในไซต์รวมทั้งสิ่งที่คุณควรคำนึงถึงเมื่อแก้ไขปัญหานี้ในระหว่าง การทดสอบเว็บไซต์
เส้นทางไฟล์ไม่ถูกต้อง
เมื่อคุณเพิ่มรูปภาพลงใน ไฟล์ HTML หรือ CSS ของไซต์คุณต้องสร้างเส้นทางไปยังตำแหน่งในโครงสร้างไดเรกทอรีของคุณที่ไฟล์เหล่านั้นอยู่ นี่คือโค้ดที่บอกเบราเซอร์ว่าจะหาและดึงข้อมูลรูปภาพจากที่ไหน ในกรณีส่วนใหญ่นี้จะอยู่ภายในโฟลเดอร์ชื่อ 'images' หากเส้นทางไปยังโฟลเดอร์นี้และไฟล์ภายในของไฟล์ไม่ถูกต้องภาพจะไม่โหลดอย่างถูกต้องเนื่องจากเบราว์เซอร์จะไม่สามารถเรียกค้นไฟล์ที่ถูกต้องได้ มันจะเป็นไปตามเส้นทางที่คุณบอกไว้ แต่มันจะโดนจุดจบและแทนที่จะแสดงภาพที่เหมาะสมจะปรากฏว่างเปล่า
ขั้นตอนที่ 1 ในการแก้จุดบกพร่องปัญหาการโหลดภาพคือการตรวจสอบให้แน่ใจว่าเส้นทางของไฟล์ที่คุณเข้ารหัสได้ถูกต้อง บางทีคุณอาจระบุไดเรกทอรีที่ไม่ถูกต้องหรือไม่ได้ระบุเส้นทางไปยังไดเรกทอรีนั้นอย่างถูกต้อง หากไม่เป็นเช่นนั้นคุณอาจมีปัญหากับเส้นทางดังกล่าว อ่านต่อ!
ชื่อไฟล์ถูกสะกดผิด
ในขณะที่คุณตรวจสอบเส้นทางไฟล์สำหรับไฟล์ของคุณโปรดตรวจสอบว่าได้สะกดชื่อรูปภาพไว้อย่างถูกต้อง จากประสบการณ์ของเราชื่อหรือการสะกดผิดที่ไม่ถูกต้องเป็นสาเหตุที่พบได้บ่อยที่สุดสำหรับปัญหาการโหลดภาพ โปรดจำไว้ว่าเว็บเบราเซอร์ไม่อาจให้อภัยได้หากพูดถึงชื่อไฟล์ หากคุณลืมจดหมายโดยไม่ได้ตั้งใจหรือใช้ตัวอักษรไม่ถูกต้องเบราเซอร์จะไม่มองหาไฟล์ที่คล้ายกันและพูดว่า "โอ้คุณอาจจะหมายถึงเรื่องนี้ใช่มั้ย?" ไม่ - ถ้าไฟล์สะกดผิดแม้ว่าจะอยู่ใกล้ก็ตามจะไม่โหลดบนหน้า
ส่วนขยายไฟล์ไม่ถูกต้อง
ในบางกรณีคุณอาจมีชื่อไฟล์ที่สะกดถูกต้อง แต่นามสกุลไฟล์อาจไม่ถูกต้อง หากรูปของคุณเป็น ไฟล์. jpg แต่ HTML กำลังมองหา ไฟล์. png จะมีปัญหา ตรวจสอบว่าคุณ ใช้ประเภทไฟล์ที่ถูกต้องสำหรับแต่ละภาพ แล้วตรวจสอบให้แน่ใจว่าคุณได้เรียกร้องให้มีส่วนขยายเดียวกันในโค้ดของเว็บไซต์ของคุณ
ยังมองหาความไวกรณี หากไฟล์ของคุณลงท้ายด้วย. JPG โดยมีตัวอักษรทั้งหมดเป็นตัวพิมพ์ใหญ่ แต่รหัสอ้างอิงของคุณ. jpg มีตัวพิมพ์เล็กทั้งหมดมีเว็บเซิร์ฟเวอร์บางตัวที่จะเห็นทั้งสองต่างกันแม้ว่าจะเป็นชุดตัวอักษรเดียวกันก็ตาม นับความไวของกรณี! ด้วยเหตุนี้เราจึงบันทึกไฟล์ของเราด้วยตัวพิมพ์เล็กทุกฉบับ การทำเช่นนี้ช่วยให้เราสามารถใช้อักษรตัวพิมพ์เล็กในโค้ดของเราได้ตลอดเวลาเพื่อขจัดปัญหาที่เป็นไปได้ที่เราอาจมีกับไฟล์รูปภาพของเรา
ไฟล์หายไป
ถ้าเส้นทางไปยังแฟ้มรูปภาพของคุณถูกต้องและชื่อและนามสกุลไฟล์ยังปราศจากข้อผิดพลาดรายการถัดไปที่จะตรวจสอบเพื่อให้แน่ใจว่าไฟล์ได้รับการอัปโหลดไปยังเว็บเซิร์ฟเวอร์แล้ว ละเลยการอัปโหลดไฟล์ไปยังเซิร์ฟเวอร์นั้นเมื่อไซต์เปิดตัวเป็นข้อผิดพลาดทั่วไปที่มองข้ามได้ง่าย
คุณจะแก้ปัญหานี้ได้อย่างไร? อัปโหลดภาพเหล่านั้นรีเฟรชหน้าเว็บของคุณและควรแสดงไฟล์ตามที่คาดไว้ทันที คุณสามารถลองลบภาพบนเซิร์ฟเวอร์และอัปโหลดใหม่ได้ อาจดูแปลก ๆ แต่เราได้เห็นผลงานนี้มากกว่าหนึ่งครั้ง บางครั้งไฟล์ได้รับความเสียหายดังนั้นวิธีการ "ลบและแทนที่" นี้สามารถช่วยได้
เว็บไซต์โฮสติ้งภาพลง
คุณมักต้องการโฮสต์ภาพใด ๆ ที่ไซต์ของคุณใช้บนเซิร์ฟเวอร์ของคุณเอง แต่ในบางกรณีคุณอาจใช้รูปภาพที่โฮสต์อยู่ที่อื่น หากเว็บไซต์ที่ให้บริการพื้นที่รูปภาพดังกล่าวจะไม่ทำงานภาพของคุณจะไม่โหลด
ปัญหาการโอนเงิน
ไม่ว่าจะเป็นไฟล์ภาพที่โหลดจากโดเมนภายนอกหรือจากของคุณเองมีโอกาสที่อาจมีปัญหาในการถ่ายโอนไฟล์นั้นเมื่อเบราว์เซอร์ร้องขอครั้งแรก นี่ไม่ใช่เหตุการณ์ปกติ (ถ้ามีคุณอาจต้องหา ผู้ให้บริการพื้นที่ใหม่ ) แต่อาจเกิดขึ้นเป็นครั้งคราว
ด้านที่โชคร้ายของปัญหานี้คือมีจริงๆไม่มีอะไรที่คุณสามารถทำอะไรเกี่ยวกับเรื่องนี้เนื่องจากเป็นปัญหาที่อยู่นอกการควบคุมของคุณ ข่าวดีก็คือว่าเป็นปัญหาชั่วคราวที่มักจะได้รับการแก้ไขได้อย่างรวดเร็ว ตัวอย่างเช่นเมื่อมีคนเห็นหน้าที่ดูไม่เป็นระเบียบและรีเฟรชมันจะมีเพียงอย่างเดียวที่จะแก้ไขปัญหาและโหลดภาพได้อย่างถูกต้องหากคุณเห็นภาพที่เสียหายให้รีเฟรชเบราว์เซอร์เพื่อดูว่าอาจเป็นเพียงปัญหาการส่ง คำขอเริ่มต้นของคุณ
หมายเหตุขั้นสุดท้ายไม่กี่ครั้ง
เมื่อคำนึงถึงภาพและความกังวลเกี่ยวกับการโหลดสิ่งที่ควรคำนึงถึงก็คือการ ใช้แท็ก ALT ที่เหมาะสม กับความเร็วของเว็บไซต์และประสิทธิภาพโดยรวมของคุณ
ALT หรือ "ข้อความอื่น" แท็ก คือสิ่งที่เบราเซอร์แสดงหากไม่สามารถโหลดรูปภาพได้ นอกจากนี้ยังเป็นองค์ประกอบที่สำคัญในการสร้างเว็บไซต์ที่สามารถเข้าถึงได้ซึ่งสามารถใช้งานได้โดยผู้พิการบางคน ทุกภาพในบรรทัดในเว็บไซต์ของคุณควรมีแท็ก ALT ที่เหมาะสม โปรดทราบว่าภาพที่ใช้กับ CSS ไม่มีแอตทริบิวต์นี้
สำหรับประสิทธิภาพของเว็บไซต์การโหลดภาพมากเกินไปหรือแม้กระทั่งภาพยักษ์บางตัวที่ไม่ ได้รับการปรับให้เหมาะสำหรับการจัดส่งเว็บ จะส่งผลเสียต่อความเร็วในการโหลด ด้วยเหตุนี้คุณต้องทดสอบผลกระทบจากภาพใด ๆ ที่คุณใช้ในการออกแบบเว็บไซต์ของคุณและทำตามขั้นตอนใด ๆ ที่จำเป็นเพื่อปรับปรุงประสิทธิภาพของไซต์นั้นในขณะที่ยังสร้างรูปลักษณ์โดยรวมที่เหมาะสมกับโครงการเว็บไซต์ของคุณ