Tối ưu hóa hình ảnh cho SharePoint Online

Tốc độ tải của trang web phụ thuộc vào kích cỡ kết hợp của tất cả các cấu phần bắt buộc để kết xuất trang bao gồm hình ảnh, HTML, JavaScript và CSS. Hình ảnh là cách tuyệt vời để khiến site của bạn hấp dẫn hơn nhưng kích cỡ hình ảnh có thể ảnh hưởng đến hiệu suất. Bằng cách tối ưu hóa hình ảnh của bạn thông qua việc nén và đổi kích cỡ, cũng như sử dụng hình sprite, bạn có thể khỏa lấp các hiệu ứng của hình ảnh rất lớn. Sử dụng kết xuất hình ảnh SharePoint, bạn có thể tải lên một hình ảnh lớn duy nhất và hiển thị các phần trong ảnh, cho phép tái sử dụng ảnh chứ không phải tải lại.

Sử dụng hình sprite để tăng tốc độ tải hình ảnh trong SharePoint Online

Một hình ảnh sprite có chứa nhiều hình ảnh nhỏ hơn. Bạn chọn một phần của hình ảnh tổng hợp để hiển thị một phần cụ thể của trang với định vị tuyệt đối bằng cách sử dụng CSS. Về cơ bản, bạn di chuyển một hình ảnh duy nhất xung quanh trang thay vì tải nhiều hình ảnh và hiển thị một phần nhỏ của hình ảnh đó qua một cửa sổ nhỏ nơi hiển thị một phần bắt buộc của hình ảnh sprite với người dùng cuối. SharePoint Online sử dụng hình sprite để hiển thị các biểu tượng khác nhau trong hình sprit spcommon.png.

Nội dung được đề cập ở đây

  • Nén hình ảnh

  • Tối ưu hóa hình ảnh

  • Kết xuất hình ảnh SharePoint

Ảnh chụp màn hình của spcommon

Điều này có thể giúp tăng hiệu suất vì bạn chỉ tải xuống một hình ảnh thay vì một vài hình ảnh, rồi lưu vào bộ đệm ẩn và tái sử dụng hình ảnh đó. Ngay cả khi hình ảnh không được lưu vào bộ đệm ẩn thì phương pháp tải một hình ảnh thay vì nhiều hình ảnh này cũng sẽ giảm tổng số yêu cầu HTTP đối với máy chủ, giúp giảm thời gian tải trang. Đây thực sự là một hình thức gói hình ảnh. Đây là một kỹ thuật rất hữu ích nếu hình ảnh không thay đổi quá thường xuyên, chẳng hạn như các biểu tượng, như hiển thị trong ví dụ SharePoint được cung cấp ở trên. Bạn có thể xem cách sử dụng Web Essentials, một dự án dựa trên cộng đồng, mã nguồn mở của bên thứ ba để thực hiện điều này một cách dễ dàng trong Microsoft Visual Studio. Để biết thêm thông tin, hãy xem mục Thu nhỏ và gói trong SharePoint Online.

Sử dụng tính năng nén và tối ưu hóa hình ảnh để tăng tốc độ tải trang trong SharePoint

Nén và tối ưu hóa hình ảnh tập trung vào việc giảm kích cỡ tệp của hình ảnh mà bạn sử dụng trên site của mình. Thông thường, kỹ thuật tốt nhất để giảm kích cỡ hình ảnh là đổi kích cỡ hình ảnh thành kích thước tối đa mà hình ảnh sẽ được hiển thị trên site. Không lý gì phải giữ một hình ảnh với kích cỡ lớn hơn kích cỡ cần hiển thị. Sử dụng trình chỉnh sửa hình ảnh để đảm bảo hình ảnh có kích thước chính xác là một cách nhanh chóng và đơn giản để giảm kích cỡ trang của bạn.

Sau khi hình ảnh có kích cỡ phù hợp, bước tiếp theo là tối ưu hóa tệp nén của những hình ảnh này. Có nhiều công cụ có thể dùng để nén và tối ưu hóa, bao gồm Phòng Ảnh và các công cụ của bên thứ ba. Điều quan trọng đối với việc nén là giảm kích cỡ tệp nhiều nhất có thể mà không làm giảm bớt chất lượng rõ ràng đối với người dùng cuối. Đảm bảo bạn kiểm tra các tệp đã nén trên màn hình có độ phân giải cao để đảm bảo hình ảnh vẫn sẽ hiển thị tốt.

Tăng tốc độ tải xuống trang bằng cách sử dụng kết xuất hình ảnh SharePoint

Kết xuất hình ảnh là một tính năng trong SharePoint Online cho phép bạn tạo nhiều phiên bản khác nhau của hình ảnh dựa trên kích thước hình ảnh cho trước. Điều này đặc biệt quan trọng khi có nội dung hình ảnh do người dùng tạo hoặc kích thước hình ảnh chẳng hạn như chiều rộng và chiều cao được cố định bởi CSS trên site. Ngay cả khi hình ảnh được cố định bởi CSS thì hình ảnh có độ phân giải đầy đủ vẫn sẽ được tải. Trong trường hợp này, có thể giảm kích cỡ tệp bằng cách sử dụng kết xuất hình ảnh.

Ghi chú: Kết xuất chỉ sẵn dùng trong SharePoint khi bật tính năng phát hành. Bạn có thể bật tính năng phát hành bên dưới Cài đặt > Cài đặt Site > Quản lý các tính năng của site > Phát hành SharePoint Server. Nếu không, tùy chọn này sẽ không xuất hiện.

Tính năng đổi kích cỡ kết xuất hình ảnh hoạt động bằng cách sử dụng kích thước nhỏ nhất mà bạn xác định, chiều rộng hoặc chiều cao, rồi đổi kích cỡ hình ảnh sao cho chiều còn lại tự động được đổi kích cỡ dựa theo tỷ lệ khung ảnh đã khóa. Theo mặc định, tính năng này sẽ cắt xén hình ảnh từ điểm giữa theo chiều còn lại. Ví dụ: nếu bạn xác định kết xuất rộng 100 px và cao 50 px và hình ảnh gốc của bạn rộng 1000 px và cao 800 px thì hình ảnh sẽ được đổi kích cỡ sao cho chiều 800 px bây giờ trở thành 50 px và chiều 1000 px (bây giờ trở thành 62,5 px) được cắn xén từ điểm giữa hình ảnh.

Các bước tương đối đơn giản nhưng đối với hình ảnh cần sử dụng kết xuất, các kết xuất cần nằm trên site SharePoint trước khi bạn thêm hình ảnh. Ngoài ra, bạn cũng sẽ cần bật các tính năng Cơ sở hạ tầng Phát hành SharePoint Server (Mức Tuyển tập Site) và Phát hành SharePoint Server (Mức Site).

Thêm kết xuất hình ảnh để tăng tốc độ tải trang

  1. Xác minh rằng tài khoản người dùng đang thực hiện quy trình này có, tối thiểu là, các quyền Thiết kế đối với site mức cao nhất của tuyển tập site và rằng site đang được phát hành lên trang web.

  2. Trong trình duyệt web, đi tới site mức cao nhất thuộc tuyển tập site phát hành.

  3. Chọn biểu tượng Cài đặt.

  4. Trên trang Cài đặt Site, trong mục Giao Diện, bạn sẽ thấy các kết xuất hình ảnh tích hợp sẵn.

    Bạn có thể sử dụng các kết xuất sẵn dùng hoặc chọn Kết xuất Hình ảnh để tạo một kết xuất hình ảnh mới.

    Ảnh chụp màn hình của Biểu diễn Ảnh
  5. Trên trang Kết xuất Hình ảnh, chọn Thêm mục mới.

    Ảnh chụp màn hình Thêm Mục Mới
  6. Trên trang Kết xuất Hình ảnh Mới, trong hộp Tên, hãy nhập tên cho kết xuất đó.

  7. Trong các hộp văn bản Chiều rộngChiều cao, nhập chiều rộng và chiều cao, tính bằng điểm ảnh, của kết xuất, rồi chọn Lưu.

    Ảnh chụp màn hình của Tên Biểu diễn Ảnh

Cắt xén tùy chỉnh với kết xuất hình ảnh trong SharePoint

Theo mặc định, kết xuất hình ảnh được tạo từ điểm giữa của hình ảnh. Bạn có thể điều chỉnh kết xuất hình ảnh cho từng hình ảnh bằng cách cắt xén một phần của hình ảnh mà bạn muốn sử dụng. Bạn có thể cắt xén hình ảnh cho từng hình ảnh, đối với mỗi kết xuất. Việc cắt xén hình ảnh giúp tăng tốc độ tải trang bằng cách sử dụng bộ đệm ẩn blog của SharePoint để tạo một phiên bản hình ảnh cho mỗi kết xuất. Theo cách này, khối lượng tải máy chủ sẽ giảm vì hình ảnh chỉ đổi kích cỡ một lần, rồi sẵn dùng cho người dùng nhiều lần sau đó. Để biết thêm thông tin về cách cắt xén một kết xuất hình ảnh, hãy xem mục Cắt xén kết xuất hình ảnh.

Phát triển các kỹ năng của bạn
Khám phá nội dung đào tạo
Sở hữu tính năng mới đầu tiên
Tham gia Người dùng nội bộ Office

Thông tin này có hữu ích không?

Cảm ơn phản hồi của bạn!

Cảm ơn bạn đã phản hồi! Để trợ giúp tốt hơn, có lẽ chúng tôi sẽ kết nối bạn với một trong những nhân viên hỗ trợ Office của chúng tôi.

×