4 เคล็ดลับการเพิ่มประสิทธิภาพภาพที่สำคัญ

Sep 11, 2025

วิธีการ

นักพัฒนาที่โชคดีไม่กี่คนและผู้เขียนคนนี้มีโอกาสในการแก้ไข Ebook การเพิ่มประสิทธิภาพภาพใหม่ของ osmani ของ Addy Osmani การเพิ่มประสิทธิภาพภาพที่สำคัญ ซึ่งคุณควรอ่านอย่างแน่นอน

10 วิธีในการเพิ่มประสิทธิภาพภาพเพื่อประสิทธิภาพที่ดีขึ้น

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

เป็นภาพที่คัดเลือกและโหลดที่สำคัญ

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

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

<link rel="preload" href="/img/logo.svg" as="image">

คุณสามารถใช้การโหลดล่วงหน้าในส่วนหัว HTTP:

Link: </img/logo.svg>; rel=preload; as=image

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

The effect of using preload on a hero banner — ผลของการใช้การโหลดล่วงหน้าบนแบนเนอร์ฮีโร่

ในตัวอย่างด้วย ขั้นตอน , ภาพแบนเนอร์จะปรากฏในหน้าต่างเบราว์เซอร์ครึ่งวินาทีเร็วขึ้น ทั้งหมดเป็นเพราะหนึ่งซับอย่างรวดเร็วที่ให้เบราว์เซอร์เริ่มต้น

ทำให้งานศิลปะ SVG ของคุณง่ายขึ้นโดยอัตโนมัติ

Illustrator’s Simplify tool, showing the number of anchor points before and after as Curve Precision is lowered — เครื่องมือลดความซับซ้อนของ Illustrator แสดงจำนวนจุดยึดก่อนและหลังจากที่ความแม่นยำโค้งลดลง

การเพิ่มประสิทธิภาพ SVG นั้นแตกต่างจากประเภทภาพอื่น ๆ เพราะแตกต่างจาก JPEGS หรือ PNGS SVGs ประกอบด้วยข้อความมาร์กอัป XML โดยเฉพาะ ซึ่งหมายความว่าการเพิ่มประสิทธิภาพทั่วไปที่คุณจะนำไปใช้กับสินทรัพย์แบบข้อความ (ตัวอย่างเช่นการขุดการบีบอัด GZIP / Brotli) และควรใช้กับ SVGS นอกเหนือจากนั้นคุณสามารถใช้เครื่องมือเพิ่มประสิทธิภาพเช่น SvGo เพื่อดูขนาดของ SVG

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

กล่องโต้ตอบนี้สามารถพบได้ใน Illustrator CC เมนูของการไปที่วัตถุ & GT; Path & GT; ลดความซับซ้อน ด้วยการลดความแม่นยำของเส้นโค้ง (และการปรับเกณฑ์มุมการปรับตัวเลือก) จึงเป็นไปได้ที่จะลบจุดพิเศษในงานศิลปะของคุณ ในกรณีนี้คุณจะทราบว่าการลดลงของความแม่นยำของเส้นโค้งของเพียง 6% ลบ 54 คะแนนพา ธ ใช้อย่างรอบคอบมันอาจปรับปรุงการปรากฏตัวของงานศิลปะของคุณ

The savings that path simplification can afford — การออมที่พา ธ ง่ายสามารถจ่ายได้

Word to the Wise - ระวังด้วยวิธีการที่ก้าวร้าวกับเครื่องมือนี้ ความแม่นยำโค้งที่ต่ำเกินไปมากเกินไปและงานศิลปะที่สร้างขึ้นอย่างระมัดระวังครั้งหนึ่งของคุณจะตกทอดเป็นหยดน้ำ ตีสมดุลที่เหมาะสมแม้ว่าคุณจะได้รับรางวัล

แปลงภาพเคลื่อนไหว GIFS เป็นวิดีโอ

With FFmpeg you can turn flabby GIFs into svelte video — ด้วย FFMPEG คุณสามารถเปลี่ยน flabby gif เป็นวิดีโอ svelte

เราทุกคนรัก GIF เคลื่อนไหวที่ดี พวกเขาถ่ายทอดความเชื่อมั่นเกือบทุกอย่างได้อย่างมีประสิทธิภาพ แต่พวกเขาอาจใหญ่จริงๆ Image Optimisers เช่น Gifsicle สามารถช่วยให้โกนหนวด Kilobytes ส่วนเกิน แต่ตั๋วคือการแปลง GIF เหล่านั้นเป็นวิดีโอและฝังไว้ใน HTML5 & lt; วีดีโอและ gt; แท็ก. ที่ ffmpeg ยูทิลิตี้บรรทัดคำสั่งเหมาะสำหรับงานนี้:

 ffmpeg -i animated.gif -b: v 512k animated.webm
ffmpeg -i onimated.gif -b: v 512k animated.ogv
ffmpeg -i animated.gif -b: v 512k animated.mp4

คำสั่งด้านบนใช้ GIF ที่มา ( Animated.gif ) เป็นอินพุตในอาร์กิวเมนต์ -i และวิดีโอเอาท์พุทที่มีตัวแปรบิตเรตสูงสุด 512kbps ในการทดสอบของเราเองเราสามารถใช้ GIF เคลื่อนไหว 989kb และลดลงไปยัง MP4 ขนาด 155KB, OGV 109kb และ WebM ขนาด 85KB ไฟล์วิดีโอทั้งหมดเปรียบได้กับคุณภาพไปยัง GIF ต้นทาง เพราะความแพร่หลายของ & lt; วีดีโอและ gt; การสนับสนุน TAG ในเบราว์เซอร์รูปแบบวิดีโอทั้งสามนี้สามารถใช้เช่นเดียวกับ:

 & lt; video preload = "ไม่มี" & gt;
  & lt; source src = "/ videos / animated.webm" type = "วิดีโอ / webm" & gt;
  & lt; source src = "/ videos / animated.ogv" type = "วิดีโอ / ogg" & gt;
  & lt; source src = "/ videos / animated.mp4" type = "video / mp4" & gt;
& lt; / video & gt;

หากคุณตัดสินใจที่จะไปเส้นทางนี้ให้แน่ใจว่าได้สั่งซื้อของคุณ & lt; ที่มา & gt; แท็กเพื่อให้ระบุรูปแบบที่ดีที่สุดที่สุดก่อนและมีการระบุที่ดีที่สุดที่สุด ในกรณีส่วนใหญ่หมายความว่าคุณจะเริ่มต้นด้วยวิดีโอ WebM ก่อน แต่ตรวจสอบขนาดไฟล์เอาต์พุตของแต่ละวิดีโอและไปกับสิ่งที่เล็กที่สุดก่อนและจบลงด้วยสิ่งที่ใหญ่ที่สุด

หากคุณไม่มี ffmpeg หรือไม่รู้ว่ามันคืออะไร ตรวจสอบ . ง่ายต่อการติดตั้งผ่านผู้จัดการแพคเกจระบบปฏิบัติการส่วนใหญ่เช่น Homebrew หรือ Chocolatey

โหลดขี้เกียจด้วย intersectionobserver

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

โชคดีที่ผู้สังเกตการณ์แยก API ช่วยให้เรามีวิธีที่ง่ายกว่าและมีประสิทธิภาพยิ่งขึ้นในการพิจารณาว่าองค์ประกอบอยู่ในวิวพอร์ต นี่คือตัวอย่างของมาร์กอัปรูปภาพการโหลดขี้เกียจพื้นฐานบางอย่าง:

 & lt; img class = "ขี้เกียจ" data-src = "/ รูปภาพ / lazy-loaded-image.jpg" src = "/ รูปภาพ / placholder.jpg" alt = "ฉันขี้เกียจ" ความกว้าง = "320" สูง = "240" & GT;

ที่นี่เราโหลดรูปภาพตัวยึดตำแหน่งใน src แอตทริบิวต์แล้วเก็บ URL สำหรับภาพที่เราต้องการโหลดอย่างเกียจคร้านใน Data-SRC คุณลักษณะ เพื่อปิดท้ายทั้งหมดเราให้ & lt; img & gt; องค์ประกอบระดับของขี้เกียจเพื่อให้เข้าถึงได้ง่ายด้วย queryselector ทั้งหมด . จากนั้นเราใช้รหัสนี้:

 document.addeventlistener ("domcontentloaded", ฟังก์ชั่น () {
  ถ้า ("intersectionobserver" ในหน้าต่างและแอมป์; & amp; "intersectionobserverentry" ในหน้าต่างและแอมป์; & amp; "intersectionratio" ใน window.intercectionobserverentry.prototype) {
    องค์ประกอบ = document.queryselectorall ("img.lazy");

    var imageobserver = ตัวแยกใหม่ (ฟังก์ชั่น (รายการ, ผู้สังเกตการณ์) {
      รายการ mureach (ฟังก์ชั่น (รายการ) {
        ถ้า (iNTENT.ISTERSECTING) {
          entry.target.setattribute ("SRC", entry.target.getattribute ("Data-SRC"));
          entry.target.classlist.remove ("ขี้เกียจ");
          imageobserver.unobserve (entry.target);
        }
      });
    });

    องค์ประกอบ. foreach (ฟังก์ชั่น (ภาพ) {
      imageobserver.observe (ภาพ);
    });
  }
});

ที่นี่เราผูกรหัสไปที่ เอกสาร ของวัตถุ domcontentloaded เหตุการณ์. รหัสนี้ตรวจสอบเพื่อดูว่ามีการสนับสนุนการแยกทางแยกโดยเบราว์เซอร์ปัจจุบันหรือไม่ ถ้าปรากฎว่ามันเป็นเราคว้าทั้งหมด ไอเอ็ม องค์ประกอบที่มีชั้นเรียนของ ขี้เกียจ ด้วย queryselector ทั้งหมด แล้วแนบผู้สังเกตการณ์กับพวกเขา

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

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

บทความนี้ได้รับการตีพิมพ์ครั้งแรกในฉบับที่ 301 ของ สุทธิ นิตยสารที่ขายดีที่สุดในโลกสำหรับนักออกแบบเว็บไซต์และนักพัฒนา ซื้อปัญหา 301 ที่นี่ หรือ สมัครสมาชิกที่นี่ .

บทความที่เกี่ยวข้อง:

คำแนะนำที่สมบูรณ์ไปยัง SVG
การใช้เครื่องมือเวกเตอร์: วิธีการของนักออกแบบเว็บไซต์
Animate SVG พร้อม JavaScript

4 เคล็ดลับการเพิ่มประสิทธิภาพภาพที่สำคัญ

เป็นภาพที่คัดเลือกและโหลดที่สำคัญ

ทำให้งานศิลปะ SVG ของคุณง่ายขึ้นโดยอัตโนมัติ

แปลงภาพเคลื่อนไหว GIFS เป็นวิดีโอ

โหลดขี้เกียจด้วย intersectionobserver

วิธีการ - บทความยอดนิยม

วิธีการสร้างฉากห้องพัก

ทำให้ผลการพิมพ์ 3 มิติแบบโต้ตอบ

ดาวน์โหลดไฟล์สำหรับ 3D World 232

วิธีการเริ่มต้นด้วย TypeScript

ทาสีไพ่ทาโรต์ดั้งเดิม

วิธีการปั้น Goblin ที่พิมพ์ 3 มิติ

สร้างคอมโพสิตใน Photoshop

กายวิภาคศาสตร์ของภาพล้อเลียน: 15 เคล็ดลับยอดนิยม

หมวดหมู่