NộI Dung
- Hãy chọn lọc và tải trước những hình ảnh quan trọng
- Tự động đơn giản hóa tác phẩm nghệ thuật SVG của bạn
- Chuyển đổi GIF động sang video
- Tải chậm với IntersectionObserver
Một số nhà phát triển may mắn và tác giả này đã có cơ hội chỉnh sửa kỹ thuật sách điện tử tối ưu hóa hình ảnh mới của Addy Osmani, Essential Image Optimization, mà bạn hoàn toàn nên đọc.
- 10 cách để tối ưu hóa hình ảnh để có hiệu suất tốt hơn
Cho dù bạn đang xây dựng các trang web Thương mại điện tử kích thước đầy đủ hay chỉ đơn giản là tạo trang chủ trực tuyến cho danh mục thiết kế của mình, trong bài viết này, bạn sẽ tìm hiểu một số mẹo từ sách của Addy sẽ giúp hình ảnh của bạn gọn gàng hơn và nhanh hơn.
Hãy chọn lọc và tải trước những hình ảnh quan trọng
Hãy xem xét trang web của bạn và xác định nội dung hình ảnh quan trọng. Đối với hầu hết, đây sẽ là một biểu tượng hoặc hình ảnh anh hùng mà bạn muốn hiển thị càng sớm càng tốt.
Đây là nơi tải trước gợi ý tài nguyên đi kèm. tải trước là một cách gợi ý cho khách hàng rằng một nội dung nên được truy xuất trước khi trình phân tích cú pháp của trình duyệt phát hiện ra nó. Bạn có thể sử dụng nó cho hầu hết mọi thứ, nhưng nó hoạt động hiệu quả khi tải trước hình ảnh quan trọng. Dưới đây là một ví dụ về nó được sử dụng trong HTML đầu> phần tử theo thứ tự để tải trước hình ảnh biểu ngữ anh hùng:
liên kết rel = "preload" href = "/ img / logo.svg" as = "image">
Bạn cũng có thể sử dụng tải trước trong tiêu đề HTTP:
Liên kết: /img/logo.svg>; rel = tải trước; as = hình ảnh
Dưới đây, bạn có thể thấy hai cuộn ảnh chụp màn hình của cùng một trang tải trong Chrome. Một kịch bản sử dụng tải trước để tải hình ảnh biểu ngữ anh hùng, trong khi hình ảnh kia thì không.
Trong ví dụ với tải trước, hình ảnh biểu ngữ xuất hiện trong cửa sổ trình duyệt nhanh hơn nửa giây. Tất cả chỉ vì một lớp lót nhanh chóng giúp trình duyệt có một khởi đầu thuận lợi.
Tự động đơn giản hóa tác phẩm nghệ thuật SVG của bạn
Việc tối ưu hóa SVG khác với các loại hình ảnh khác, vì không giống như JPEG hoặc PNG, SVG bao gồm văn bản, cụ thể là đánh dấu XML. Điều này có nghĩa là các tối ưu hóa điển hình bạn sẽ áp dụng cho nội dung dựa trên văn bản (ví dụ: thu nhỏ, nén gzip / Brotli) có thể và cũng nên được áp dụng cho SVG. Ngoài ra, bạn có thể sử dụng một công cụ tối ưu hóa như SVGO để giảm kích thước của SVG.
Nhưng điều gì sẽ xảy ra nếu bạn không chỉ đơn thuần sử dụng tác phẩm nghệ thuật vector mà còn tạo ra nó? Nếu bạn là người dùng Illustrator, bạn có thể tự động đơn giản hóa tác phẩm nghệ thuật của mình để giảm số lượng điểm neo trong đường dẫn thông qua cửa sổ hộp thoại Đơn giản hóa.
Có thể tìm thấy hộp thoại này trong menu của Illustrator CC bằng cách đi tới Đối tượng> Đường dẫn> Đơn giản hóa. Bằng cách giảm Độ chính xác của đường cong (và tùy chọn điều chỉnh Ngưỡng góc), bạn có thể xóa các điểm đường dẫn thừa trong tác phẩm nghệ thuật của mình. Trong trường hợp này, bạn sẽ lưu ý rằng việc giảm Độ chính xác của đường cong xuống dưới 6% sẽ loại bỏ 54 điểm đường dẫn. Được sử dụng một cách thận trọng, nó thậm chí có thể cải thiện sự xuất hiện của tác phẩm nghệ thuật của bạn.
Lời khuyên cho những người khôn ngoan - hãy cẩn thận với mức độ tích cực của bạn với công cụ này. Độ chính xác đường cong thấp hơn quá nhiều, và tác phẩm nghệ thuật được chăm chút cẩn thận của bạn sẽ biến thành một đốm màu. Tuy nhiên, hãy tạo ra sự cân bằng phù hợp và bạn sẽ gặt hái được thành quả.
Chuyển đổi GIF động sang video
Tất cả chúng ta đều thích một GIF động tốt. Chúng truyền tải hiệu quả gần như bất kỳ tình cảm nào, nhưng chúng có thể thực sự rất lớn. Các công cụ tối ưu hóa hình ảnh như gifsicle có thể giúp loại bỏ các kilobyte dư thừa, nhưng vé là chuyển đổi các GIF đó thành video và nhúng chúng vào HTML5 video> nhãn. Các ffmpeg Tiện ích dòng lệnh rất phù hợp cho tác vụ này:
ffmpeg -i animation.gif -b: v 512K anim.webm ffmpeg -i animation.gif -b: v 512K animation.ogv ffmpeg -i animation.gif -b: v 512K animation.mp4
Các lệnh trên lấy một GIF nguồn (animation.gif) dưới dạng đầu vào trong đối số -i và xuất video có tốc độ bit thay đổi tối đa là 512Kbps. Trong một thử nghiệm của riêng mình, chúng tôi có thể chụp ảnh GIF động 989Kb và giảm nó xuống còn 155Kb MP4, 109Kb OGV và 85Kb WebM. Tất cả các tệp video có chất lượng tương đương với GIF nguồn. Bởi vì sự phổ biến của video> hỗ trợ thẻ trong trình duyệt, ba định dạng video này có thể được sử dụng như vậy:
video preload = "none"> source src = "/ videos / animation.webm" type = "video / webm"> source src = "/ videos / animation.ogv" type = "video / ogg"> source src = "/ video / animation.mp4 "type =" video / mp4 "> / video>
Nếu bạn quyết định đi theo con đường này, hãy nhớ đặt hàng nguồn> để định dạng tối ưu nhất được chỉ định đầu tiên và định dạng tối ưu nhất được chỉ định sau cùng. Trong hầu hết các trường hợp, điều này có nghĩa là bạn sẽ bắt đầu với video WebM trước tiên, nhưng hãy kiểm tra kích thước tệp đầu ra của mỗi video và chọn bất kỳ video nào nhỏ nhất trước và kết thúc bằng bất kỳ video nào lớn nhất.
Nếu bạn không có FFmpeg hoặc không biết nó là gì, hãy xem nó. Dễ dàng cài đặt thông qua hầu hết các trình quản lý gói hệ điều hành, chẳng hạn như Homebrew hoặc Chocolatey.
Tải chậm với IntersectionObserver
Tải hình ảnh chậm là điều bạn có thể đã làm, nhưng nhiều tập lệnh tải chậm sử dụng các trình xử lý sự kiện cuộn chuyên sâu về CPU. Các phương pháp như vậy góp phần vào việc tương tác chậm trên một trang. Phần cứng cũ hơn với sức mạnh xử lý kém hơn thậm chí còn dễ bị ảnh hưởng xấu của loại mã này. Điều chỉnh thực thi có ích ở một mức độ nào đó, nhưng nó vẫn là một cách giải quyết lộn xộn và khá kém hiệu quả để xác định khi nào các phần tử nằm trong chế độ xem.
Rất may, API Intersection Observer cung cấp cho chúng ta một cách đơn giản và hiệu quả hơn nhiều để xác định khi nào các phần tử nằm trong khung nhìn. Dưới đây là ví dụ về một số đánh dấu hình ảnh tải chậm cơ bản:
img data-src = "/ images / lazy-load-image.webp" src = "/ images / placeholder.webp" alt = "Tôi lười." width = "320" height = "240">
Tại đây, chúng tôi tải một hình ảnh trình giữ chỗ trong src và sau đó lưu trữ URL cho hình ảnh mà chúng tôi muốn tải một cách chậm rãi trong data-src thuộc tính. Trên hết, chúng tôi cung cấp img> thành phần một lớp lười biếng để dễ dàng truy cập querySelectorAll. Từ đó, chúng tôi chỉ cần sử dụng mã này:
document.addEventListener ("DOMContentLoaded", function () {if ("IntersectionObserver" trong window && "IntersectionObserverEntry" trong window && "giaoRatio" trong window.IntersectionObserverEntry.prototype) {Elements = document.querySelectorAll "); var imageObserver = new IntersectionObserver (function (entry, Observer) {entry.forEach (function (entry) {if (entry.isIntersecting) {entry.target.setAttribute ("src", entry.target.getAttribute ("data-src" " )); entry.target.classList.remove ("lazy"); imageObserver.unobserve (entry.target);}});}); Elements.forEach (function (image) {imageObserver.observe (image);}) ;}});
Ở đây, chúng tôi liên kết mã với tài liệu các đối tượng DOMContentLoaded biến cố. Mã này kiểm tra xem Intersection Observer có được trình duyệt hiện tại hỗ trợ hay không. Nếu nó thành ra là nó, chúng tôi lấy tất cả img các phần tử với một lớp lười biếng với querySelectorAll và sau đó gắn những người quan sát vào chúng.
Trình quan sát chứa các tham chiếu đến các yếu tố chúng tôi đang quan sát (mục) và bản thân người quan sát (người quan sát). Mã này phụ thuộc vào từng mục nhập của người quan sát isIntersecting giá trị. Trong khi phần tử được quan sát nằm ngoài khung nhìn, isIntersecting trả lại 0. Tuy nhiên, khi phần tử vào chế độ xem, nó sẽ trả về giá trị lớn hơn 0. Tại thời điểm này, chúng tôi hoán đổi nội dung của hình ảnh data-src thuộc tính vào src và xóa thuộc tính của nó lười biếng lớp học. Sau khi tải lười biếng một hình ảnh nhất định, người quan sát sẽ bị xóa khỏi nó với không quan sát phương pháp.
Quá trình này dễ dàng hơn nhiều so với việc xoay vòng với các trình xử lý cuộn, nhưng vì Intersection Observer không được hỗ trợ chung, bạn có thể phải quay lại với chúng. Nếu bạn là người thích lấy một tập lệnh và bắt đầu, chúng tôi đã viết một trình tải lười sử dụng Intersection Observer, nhưng cũng quay lại các phương pháp của năm trước. Bạn có thể lấy nó ở đây.
Bài báo này ban đầu được xuất bản trong số 301 của mạng lưới, tạp chí bán chạy nhất thế giới dành cho các nhà thiết kế và nhà phát triển web. Mua số báo danh 301 tại đây hoặc là Đăng ký tại đây.
