Tăng tốc Website – Sử dụng ảnh nén Progressive JPEG


Quảng Cáo
Đặt Banner Quảng cáo, Textlink, Guest Post
Liên Hệ Ngay: 1900636343

Contents

  • Giới thiệu
  • Bạn đề xuất sẵn sàng chuẩn bị gì
  • Bước 1 — Phân tích Site của bạn
  • Bước 2 — Tải ảnh progressive JPEG
  • Bước 3 — Thay đổi ảnh cũ Replacing old images
  • Step 4 – Kiểm tra hậu quả tăng cường
  • Kết luận

Giới thiệu

Một việc quan trọng trong để chuyên điều trị trang web mà không ít người thường quên là tấm ảnh. Trong các bài chỉ huy mẫu trước, chúng ta đã học cách tăng mức độ trang web bằng cách scaled tấm ảnh. Trong bài này, chúng ta sẽ đi xa không dừng lại ở đó bằng cách học cách chuyên điều trị ảnh Baseline JPEG thành ảnh progressive JPEG để tăng cường trang web.

Sự không gần y như giữa ảnh baseline JPEGs và ảnh progressive JPEG?

Thông thường, hình JPEG sẽ tải từ trên xuống và chúng được xem thực trạng là baseline images. Progressive JPEG images khác bằng cách hiển thị toàn album tấm ảnh khi đang chỉ tải 1 phần hai của dữ liệu, tức là nó có hiệu quả bị vỡ trước lúc tải hoàn tất. Bên dưới là lấy ví như để bạn rất dễ tóm gọn hơn.

Quá trình tải ảnh Baseline JPEG:

Baseline-JPEG-image-load-cycle

Quá trình tải ảnh Progressive JPEG:

Progressive-JPEG-image-load-cycle

Làm thế nào mà ảnh progressive JPEG tăng cường trang web?

Ngoại trừ việc cho mọi thứm nhận ảnh đảm bảo hơn, ảnh progressive JPEG còn nhỏ hơn từ 2% đến 10% so với ảnh baseline, cho nên vì thế cho nên vì thế việc dùng chúng có tức là để giúp sức tăng tính năng trang web về mọi thứ. Yêu cầu tới server sẽ ngắn lại và chuyên điều trị hơn, cũng có tác dụng có hiệu quả có hiệu quả giảm tài nguyên sử dụng của server gần y như lời khẳng đinh đường dẫn, bộ lưu giữ. Nó cực kỳ hiểu quả nếu mà bạn hosting trang web trên chuyên dịch vụ không thanh toán hoặc chia sẽ. Trang web với số hình baseline JPEG lớn sau khi làm xong chuyển về ảnh progressive JPEG cũng biến thành thấy chuyên điều trị một cách rõ ràng. Cũng đáng để nói đến là nếu visitors truy nhập trang web qua thiết bị cầm tay haoc85 mạng yếu thì cũng cho hậu quả hiện thị lên đảm bảo hơn nếu sử dụng ảnh progressive JPEG.

QUAN TRỌNG! Một số trình duyệt web (như Internet Explorer trên Window 7 hoặc cũ hơn) không bổ trợ ảnh progressive JPEG. Tuy nhiên, mọi thứ phiên bản mới hơn đều bổ trợ.

Bạn đề xuất sẵn sàng chuẩn bị gì

Trước khi bật nguồn, hãy nhất mực rằng bạn có quyền:

  • Truy cập FTP

Bước 1 — Phân tích Site của bạn

Để xác định ảnh baseline JPEG có hiệu quả thay thế bằng ảnh progressive, chúng ta dùng WebPageTest.org. Tool này rất tuyệt đối, vì bạn có hiệu quả lấy bản progressive của baseline JPEG image mà trọn vẹn không đề xuất dùng bất kỳ tools khác.

Đây được xem thực trạng là 1 trong những trong những số trong những số hậu quả của mục Performance Review sau khi làm xong nghiên cứu và thăm dò và thăm dò trang web test:

0/100-progressive-JPEG-image-score

Bước 2 — Tải ảnh progressive JPEG

Có số đông rập khuôn sự rất dị và dị biệt có hiệu quả lấy lại lợi ích cho bạn chuyển đổi ảnh baseline JPEG images sang ảnh progressive. Đây là vài cách:

Cách 1 – Tén baseline JPEG thành progressive bằng WebPageTest.org

Sau khi nhìn thấy danh sách của ảnh có hiệu quả thay thế, chuyển tới mục Details và nhấn phím số View All Images

view-all-images-section

Mục đó sẽ hiển thị mọi thứ tấm ảnh trên trang web. Nhấn nút Analyze JPEG trên ảnh có ở Bước 1 và cuộn tới dưới trang.

view-all-images-section

Tại đó nhấn phím số Quality 85 Image của ảnh gốc. Lưu mọi thứ Quality 85 Images tới máy của bạn và nối tiếp bước sau. Chúng ta cũng đề xuất phải lưu mọi thứ tấm ảnh bằng tên gốc, công đoạn thay đổi sẽ tiện lợi hơn.

Cách 2 – Chuyển baseline JPEGs sang progressive bằng Optimizilla để tăng cường load ảnh

Nếu bạn đang định upload thêm áinh lên trang web của bạn, hoặc nếu trang web của bạn không được upload hoàn tất, bạn có hiệu quả dùng Optimizilla để chuyển ảnh baseline JPEG sang ảnh progressive. Sử dụng tool này bạn có hiệu quả chuyên điều trị tới 20 ảnh cùng theo đó và nén nó bằng thuật toán nén sang Quality 85 hoặc ngắn lại.

Optimizilla image optimization process from baseline to progressive jpeg

QUAN TRỌNG! Giảm xuống thấp hơn 85 có hiệu quả cuốn theo sự mất chuyên điều trị ảnh. TIến hành cẩn trọng.

Cách 3 – Nhanh chóng ảnh bằng CMS plugins

Nếu bạn có WordPress Blog, bạn có hiệu quả tiện lợi chuyên điều trị ảnh baseline JPEG sử dụng WP Smush. Xem qua round chỉ huy này để tham khảo chi li hơn cách dùng WP Smush

Bước 3 — Thay đổi ảnh cũ Replacing old images

Quan trọng! Hãy đảm bảo bình an bạn đã backup trang web backup your trang web hoặc tấm ảnh bạn đang nén

Sử dụng File Manager hoặc FTP client, có ở bước 1 1. Gỡ và thay thế bởi Quality 85 Images được gia công ở Bước 2. Once again, make sure that they have the same file name to avoid any 404 errors or loading issues.

Step 4 – Kiểm tra hậu quả tăng cường

Khi mọi thứ ảnh từng và đang được upload, xóa cache trình duyệt web và mở trang web của bạn để nhìn mọi thứ có bình dị không. Sau đó, bạn có hiệu quả nghiên cứu và thăm dò và thăm dò trang web bằng WebPageTest.org để nhìn mọi thứ sẽ dành được được thực hiện đúng không nào. Đây là hậu quả trong phần Details:

100/100-progressive-JPEG-image-score

Kết luận

Trong bài chỉ huy này, chúng ta đã học cách triển khai thế nào để tăng cường trang web của bạn bằng cách ăn  ảnh progressive JPEG thay vì baseline. Trải nghiệm đọc báo càng mượt mà và mượt mà bao nhiêu, bạn và người truy nhập của các bạn sẽ càng có thể đáp ứng hơn, cùng lúc đó sẽ dành được giảm tài nguyên tiêu hao của server, tăng SEO, và tính năng của trang web. Một trường hợp Win-Win cho mọi thứ không ít người.

Các chỉ huy can dự đến chuyên điều trị trang web:

  • Improving trang web performance: leveraging browser cache
  • Improving trang web performance: serving scaled images
  • Improving trang web performance: gzip compression
  • Improving trang web performance: minifying CSS, HTML and JavaScript

Sưu Tầm: Internet

Bài Viết Liên Quan


Bài Viết Khác


Quảng Cáo
Đặt Banner Quảng cáo, Textlink, Guest Post
Liên Hệ Ngay: 1900636343