4 mẹo tối ưu hóa hình ảnh thiết yếu

Sep 12, 2025

Cách

Một vài nhà phát triển may mắn và tác giả này đã có cơ hội chỉnh sửa công nghệ Ebook Tối ưu hóa hình ảnh mới của Osmani, Tối ưu hóa hình ảnh cần thiết , 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 kích thước đầy đủ trang web thương mại điện tử. hoặc đơn giản là làm một ngôi nhà trực tuyến cho bạn Danh mục thiết kế , Trong bài viết này, bạn sẽ tìm hiểu một vài lời khuyên từ cuốn sách của Addy sẽ giúp làm cho 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 hình ảnh quan trọng

Hãy xem trang web của bạn và xác định một tài sản hình ảnh quan trọng. Đối với hầu hết, đây sẽ là một hình ảnh logo hoặc anh hùng mà bạn muốn có kết xuất càng sớm càng tốt.

Đây là nơi tải trước Gợi ý tài nguyên đến. tải trước là một cách gợi ý cho khách hàng rằng một tài sản nên được lấy trước khi trình phân tích trình duyệt sẽ khám phá nó. Bạn có thể sử dụng nó cho khá nhiều thứ, nhưng nó hoạt động lộng lẫy để 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 & lt; Head & GT; Yếu tố trên thứ tự để tải trước một hình ảnh banner anh hùng:

<link 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:

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

Dưới đây bạn có thể thấy hai cuộn ảnh chụp màn hình của cùng tải trang trong Chrome. Một kịch bản sử dụng tải trước Để tải một hình ảnh banner anh hùng, trong khi người kia thì không.

The effect of using preload on a hero banner — Tác dụng của việc sử dụng tải trước trên biểu ngữ anh hùng

Trong ví dụ với tải trước , hình ảnh banner 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 cho trình duyệt khởi động.

Tự động đơn giản hóa tác phẩm nghệ thuật SVG của bạn

Illustrator’s Simplify tool, showing the number of anchor points before and after as Curve Precision is lowered — Công cụ đơn giản hóa của Illustrator, hiển thị số điểm neo trước và sau khi độ chính xác đường cong được hạ xuống

Tối ưu hóa SVGS khác với các loại hình ảnh khác, vì không giống như JPEG hoặc PNG, SVG sẽ bao gồm văn bản, cụ thể là XML Markup. Điều này có nghĩa là các tối ưu hóa điển hình mà bạn sẽ áp dụng cho tài sản dựa trên văn bản (ví dụ: nén, nén GZIP / BROTLI) có thể và cũng nên được áp dụng cho SVGS. Ngoài ra, bạn có thể sử dụng trình tối ưu hóa như SvGo để giảm kích thước của SVGS.

Nhưng những gì nếu bạn không chỉ đơn thuần là tiêu thụ tác phẩm nghệ thuật vector, mà 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ố điểm neo trong các đường dẫn thông qua cửa sổ Dialog đơn giản hóa.

Hộp thoại này có thể được tìm thấy trong Illustrator CC. Thực đơn của bằng cách đi đến Object & GT; Path & GT; Đơn giản hóa. Bằng cách giảm độ chính xác đường cong (và tùy chọn điều chỉnh ngưỡng góc), có thể loại bỏ các điểm đường dẫn thêm trong tác phẩm nghệ thuật của bạn. Trong trường hợp này, bạn sẽ lưu ý rằng việc giảm độ chính xác đường cong ít nhất là 6% 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.

The savings that path simplification can afford — Tiết kiệm mà con đường đơn giản hóa có thể đủ khả năng

Lời nói với 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ế tạo cẩn thận của bạn sẽ biến thành một đốm. Tuy nhiên, tấn công sự cân bằng, và bạn sẽ gặt hái được phần thưởng.

Chuyển đổi gifs hoạt hình sang video

With FFmpeg you can turn flabby GIFs into svelte video — Với FFMPEG, bạn có thể biến gifs flabby thành video svelte

Tất cả chúng ta đều yêu một gif hoạt hình tốt. Họ truyền tải một cách 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. Những người tối ưu hóa hình ảnh như GIFSICLE có thể giúp cạo quá mức kilobyte, nhưng vé là chuyển đổi các gifs đó thành video và nhúng chúng vào HTML5 & lt; video & gt; nhãn. Các ffmpeg. Tiện ích dòng lệnh rất phù hợp với nhiệm vụ này:

 ffmpeg -i hoạt hình.gif -b: v 512k hoạt hình.webm
ffmpeg -i hoạt hình.gif -b: v 512k hoạt hình.ogv
ffmpeg -i hoạt hình.gif -b: v 512k hoạt hình.mp4

Các lệnh ở trên lấy một GIF nguồn ( hoạt hình.gif. ) Là đầu vào trong đối số -i và video đầu ra với bitrate biến tối đa 512kbps. Trong một thử thách của chính chúng ta, chúng tôi đã có thể lấy một GIF hoạt hình 989KB và giảm nó xuống 155kb mp4, OGV 109kb và Webm 85kb. Tất cả các tệp video có thể so sánh về chất lượng cho GIF nguồn. Vì sự bất lương của & lt; video & gt; Hỗ trợ thẻ trong trình duyệt, ba định dạng video này có thể được sử dụng như vậy:

 & lt; video preload = "Không" & gt;
  & lt; nguồn src = "/ video / hoạt hình.webm" type = "video / webm" & gt;
  & lt; nguồn src = "/ video / hoạt hình.ogv" type = "video / ogg" & gt;
  & lt; nguồn src = "/ video / hoạt hình.mp4" type = "video / mp4" & gt;
& lt; / video & gt;

Nếu bạn quyết định đi tuyến đường này, hãy chắc chắn để đặt hàng của bạn & lt; nguồn & gt; Thẻ để định dạng tối ưu nhất được chỉ định trước tiên và ít tối ưu nhất được chỉ định lần cuối. 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 các video WebM trước, nhưng hãy kiểm tra kích thước tệp đầu ra của mỗi video và đi với bất cứ thứ gì là nhỏ nhất và kết thúc bằng bất cứ thứ nào là lớn nhất.

Nếu bạn không có ffmpeg hoặc không biết nó là gì, Kiểm tra nó ra ngoài . Thật dễ dàng để cài đặt thông qua hầu hết các nhà quản lý gói hệ điều hành, chẳng hạn như homebrew hoặc cacley.

Tải lười với giao lộ

Hình ảnh tải lười biếng là thứ bạn có thể đã thực hiện, nhưng nhiều kịch bản tải lười biếng sử dụng trình xử lý sự kiện cuộn chuyên sâu của CPU. Các phương pháp như vậy góp phần vào các tương tác chậm chạp trên một trang. Phần cứng cũ hơn với khả năng xử lý ít hơn thậm chí dễ bị ảnh hưởng xấu của loại mã này. Điều tiết thực thi giúp đỡ ở một mức độ, 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 các phần tử nằm trong chế độ xem.

Rất may, API quan sát viên giao lộ cho chúng ta một cách đơn giản hơn và hiệu quả hơn nhiều để xác định khi các phần tử nằm trong chế độ xem. Dưới đây là một ví dụ về một số đánh dấu hình ảnh tải lười biếng cơ bản:

 & lt; img class = "lười biếng" dữ liệu-src = "/ hình ảnh / lười biếng-image.jpg" src = "/ hình ảnh / placeholder.jpg" alt = "Tôi lười biếng." WIDTH = "320" Chiều cao = "240" & GT;

Ở đây, chúng tôi tải một hình ảnh giữ chỗ trong SRC. thuộc tính, và sau đó lưu URL cho hình ảnh chúng ta muốn tải lười biếng trong DATA-SRC. thuộc tính. Để đứng đầu tất cả, chúng tôi cung cấp cho & lt; img & gt; yếu tố một lớp lười biếng để dễ dàng truy cập với Queryselectorall. . Từ đó, chúng tôi chỉ cần sử dụng mã này:

 tài liệu.addeventlistener ("domcontentLoaded", hàm () {
  if ("giao điểm xung quanh" trong Window & amp; & amp; "giao điểm giao nhau" trong Window & amp; & amp; "giao điểm giao nhau" trong window.interectionobserverry.prototype) {
    Các yếu tố = document.QuerySelectorall ("img.lazy");

    var imageobserver = Giao điểm mớiobserver (chức năng (mục nhập, người quan sát) {
      Entries.Foreach (chức năng (nhập) {
        nếu (mục nhập.isintersected) {
          Nhập.target.setattribution ("src", nhập.target.getattribution ("data-src")));
          nhập.target. classlist.remove ("lười biếng");
          imageobserver.Unobserve (Entry.target);
        Không thể
      });
    });

    allement.foreach (chức năng (hình ảnh) {
      imageobserver.observe (hình ảnh);
    });
  Không thể
});

Ở đâ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 liệu quan sát viên giao lộ có được trình duyệt hiện tại hỗ trợ hay không. Nếu nó hóa ra là, chúng ta lấy tất cả img. các yếu tố với một lớp lười biếng với Queryselectorall. và sau đó gắn người quan sát cho họ.

Người quan sát chứa các tham chiếu đến các yếu tố chúng ta đang quan sát ( mục ) và người quan sát tự nó ( người quan sát. ). Mã này bản lề trên mỗi mục của người quan sát isintersing. giá trị. Trong khi phần tử quan sát là ra khỏi chế độ xem, isintersing. trở về 0. . Vì phần tử sẽ vào khung nhìn, mặc dù, nó sẽ trả về một giá trị lớn hơn 0. . Đó là tại thời điểm này mà chúng tôi trao đổi nội dung của hình ảnh DATA-SRC. thuộc tính vào SRC. thuộc tính, và loại bỏ nó lười biếng lớp học. Sau một hình ảnh nhất định tải lười biếng, người quan sát được gỡ bỏ khỏi nó với người quan sát unobserve. phương pháp.

Quá trình này dễ dàng hơn nhiều so với mucking xung quanh với các trình xử lý cuộn, nhưng vì người quan sát giao lộ không được hưởng sự hỗ trợ phổ quát, bạn có thể phải quay lại chúng. Nếu bạn sắp xếp một tập lệnh và đi, chúng tôi đã viết một bộ nạp lười biếng sử dụng quan sát viên giao lộ, nhưng cũng rơi trở lại các phương pháp của Yesteryear. Bạn có thể lấy nó đây .

Bài viết này ban đầu được công bố trong số phát hành 301 của mạng lưới , Tạp chí bán chạy nhất thế giới cho các nhà thiết kế và nhà phát triển web. Mua số cấp 301 tại đây hoặc là Đăng ký tại đây .

Những bài viết liên quan:

Hướng dẫn đầy đủ về SVG
Sử dụng các công cụ Vector: Cách tiếp cận của người thiết kế web
Animate svg với javascript

4 mẹo tối ưu hóa hình ảnh thiết yếu

Hãy chọn lọc và tải trước 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 gifs hoạt hình sang video

Tải lười với giao lộ

Cách - Các bài báo phổ biến nhất

Tạo trang đích 3D WebGL

10 cách để xây dựng môi trường thế giới 3D tốt hơn

Mặt nạ làm việc Magic với Houdini

Xây dựng một cảnh khoa học 3d phức tạp trong Blender

Bắt đầu với Monotype In

Giữ kiểm soát phiên bản hoàn hảo với Tóm tắt

Tạo cảnh quan tuyệt đẹp ở Houdini

Bắt đầu với HTML Canvas

Thể loại