HomeWebsitePluginsCách phục vụ...

Cách phục vụ hình ảnh được chia tỷ lệ trên trang web WordPress của bạn


Bạn đã chạy trang web của mình thông qua một công cụ kiểm tra hiệu suất chỉ để được thông báo rằng bạn cần “cung cấp hình ảnh được chia tỷ lệ” chưa? Về cơ bản, công cụ này cho bạn biết rằng bạn cần thay đổi kích thước kích thước của hình ảnh để phù hợp với cách chúng được hiển thị trên trang web của bạn.

May mắn thay, WordPress có một số công cụ tuyệt vời để giúp bạn. Bạn có thể sử dụng plugin tối ưu hóa hình ảnh để tự động cung cấp hình ảnh được chia tỷ lệ — hoặc tự chia tỷ lệ hình ảnh bằng một số kỹ thuật khác nhau. Làm điều này sẽ giúp ích rất nhiều trong việc tối ưu hóa thời gian tải trang và cải thiện tỷ lệ thoát của bạn.

Trong phần này, chúng tôi sẽ giải thích lý do tại sao việc cung cấp hình ảnh được chia tỷ lệ đúng cách lại quan trọng đến vậy. Sau đó, chúng tôi sẽ cung cấp một số giải pháp hữu ích để làm cho quy trình trở nên dễ dàng nhất có thể. Chúng ta hãy đi đến đó!

Đây là lý do tại sao bạn cần phân phối hình ảnh được chia tỷ lệ

Hình ảnh được chia tỷ lệ về cơ bản là hình ảnh đã được định cỡ để phù hợp với kích thước chính xác mà bạn đang sử dụng. Một mặt, hình ảnh quá nhỏ và được phóng to sẽ bị mờ. Mặt khác, trong khi một trình duyệt sẽ thu nhỏ một hình ảnh quá lớn, nó sẽ làm tăng thêm kích thước tệp của trang một cách không cần thiết.

Hơn nữa, hình ảnh lớn khiến trình duyệt tốn thời gian và tài nguyên để tải chúng thay vì tự tải trang nhanh nhất có thể. Điều này có thể làm chậm đáng kể thời gian tải trang của bạn và ảnh hưởng tiêu cực đến hiệu suất trang web của bạn.

Ví dụ: nếu chủ đề của bạn hiển thị hình ảnh có kích thước 100 x 100 px thì bạn muốn tải hình ảnh có kích thước chính xác là 100 x 100 px. Nếu bạn tải một hình ảnh có kích thước 50 x 50 px, hình ảnh đó sẽ bị mờ khi phóng to lên 100 px. Mặt khác, nếu bạn tải một hình ảnh có kích thước 200 x 200 px, nó sẽ trông rất đẹp, nhưng bạn không cần tăng kích thước trang của mình vì nó vẫn chỉ hiển thị ở 100 px.

Tất nhiên, các trang chậm hơn có thể khiến khách truy cập bỏ đi. Chúng không chỉ có thể thúc đẩy trải nghiệm người dùng (UX) kém thuận lợi mà còn có thể tăng tỷ lệ thoát của bạn khi người dùng trở nên thất vọng và nhấp khỏi trang web của bạn.

Đọc thêm  Cách thiết lập hóa đơn PDF miễn phí

Đó là lý do tại sao hầu hết mọi công cụ kiểm tra hiệu suất đều nhấn mạnh nhu cầu cung cấp hình ảnh được chia tỷ lệ:

Cảnh báo hình ảnh được chia tỷ lệ phục vụ trong GTmetrix

Ba plugin giúp bạn phân phối hình ảnh được chia tỷ lệ trong WordPress

Tin tuyệt vời là một trong những cách dễ dàng nhất để phân phối đúng hình ảnh được chia tỷ lệ là sử dụng plugin để trợ giúp bạn. Các tùy chọn sau giúp đơn giản hóa việc tối ưu hóa hình ảnh nặng và dọn sạch các trang cồng kềnh của bạn. Hãy cùng xem nhé!

1. Tối ưu

Sản phẩm đầu tiên của chúng tôi là Optimole. Plugin tiện dụng này tối ưu hóa hình ảnh của bạn và cung cấp chúng ở kích thước hoàn hảo cho các thiết bị khác nhau. Vì vậy, nó không chỉ giúp bạn cung cấp hình ảnh được chia tỷ lệ mà còn có thể tự động chia tỷ lệ chúng thành kích thước tối ưu dựa trên thiết bị của người dùng.

Nó có quy trình thiết lập tối thiểu, thật tuyệt nếu bạn cần chất lượng tối đa mà ít phiền phức nhất.

Ngoài việc thay đổi quy mô và nén hình ảnh của bạn, Optimole còn phục vụ chúng từ mạng phân phối nội dung toàn cầu (CDN) do Amazon CloudFront cung cấp, giúp tăng tốc thời gian tải của bạn trên toàn thế giới.

Với gói miễn phí, bạn có thể tối ưu hóa và chia tỷ lệ hình ảnh không giới hạn cho tối đa ~5.000 lượt truy cập hàng tháng. Sau đó, các gói trả phí bắt đầu chỉ với 9 đô la mỗi tháng.

2. Đánh lén

Một plugin khác mà bạn có thể sử dụng để phục vụ hình ảnh được chia tỷ lệ phù hợp là Smush. Đây là lựa chọn phổ biến và được đánh giá cao giúp tối ưu hóa hình ảnh của bạn bằng cách quét từng hình ảnh, loại bỏ dữ liệu không cần thiết, sau đó đặt kích thước lý tưởng. Sau khi hoàn tất, mỗi hình ảnh được lưu trong Thư viện phương tiện.

Để chia tỷ lệ hình ảnh của bạn, bạn có thể đặt nó tự động thay đổi kích thước hình ảnh trên các kích thước nhất định để phù hợp với yêu cầu của trang web của bạn.

Ngoài ra, plugin có khả năng ‘làm mờ’ tối đa 50 hình ảnh cùng một lúc và bạn có thể đặt nó tự động tối ưu hóa từng hình ảnh khi nó được tải. Hơn nữa, bạn có thể đặt nó để nén hình ảnh trong bất kỳ thư mục nào, kể cả những hình ảnh được lưu trữ trên dịch vụ đám mây.

Vì lý do này, phiên bản miễn phí là một nơi tuyệt vời để bắt đầu và sẽ tối ưu hóa hình ảnh không giới hạn, mặc dù kích thước từng hình ảnh không được vượt quá 5 MB.

3. Ảnh ngắn

Đề xuất cuối cùng của chúng tôi là ShortPixel. Plugin này là sự lựa chọn hoàn hảo cho những người đang tìm kiếm một giải pháp nén và chia tỷ lệ hình ảnh chất lượng với ngân sách. Nó có thể tối ưu hóa miễn phí tối đa 100 hình ảnh mỗi tháng. Thêm vào đó, nó rất đơn giản và dễ sử dụng.

Cụ thể, ShortPixel có thể giúp bạn tự động chia tỷ lệ hình ảnh WordPress khi bạn tải chúng lên các kích thước mà bạn chỉ định.

Đọc thêm  So sánh 5 plugin tiếp thị liên kết WordPress tốt nhất

ShortPixel cũng đi kèm với tính năng nén hình ảnh không mất dữ liệu và mất dữ liệu cho JPEG, PNGGIF hình ảnh – bạn cũng có thể tối ưu hóa các tệp PDF. Nó cung cấp cho bạn tùy chọn tự động chuyển đổi hình ảnh (bao gồm cả WebP) khi bạn tải chúng lên hoặc xử lý chúng theo cách thủ công.

Như đã đề cập ở trên, phiên bản miễn phí cho phép bạn tối ưu hóa tối đa 100 hình ảnh mỗi tháng. Ngoài ra, các gói trả phí bắt đầu ở mức 4,99 đô la mỗi tháng để tối ưu hóa tối đa 5.000 hình ảnh mỗi tháng.

Cách phục vụ hình ảnh được chia tỷ lệ trong WordPress mà không cần sử dụng plugin (3 phương pháp)

Nếu bạn muốn cung cấp hình ảnh được chia tỷ lệ mà không cần plugin, thì có nhiều cách khác để thực hiện. Ví dụ: bạn có thể cắt hình ảnh trong thư viện phương tiện của mình, điều chỉnh chúng trong cài đặt phương tiện quản trị hoặc sử dụng trình chỉnh sửa hình ảnh chẳng hạn như GIMP hoặc Photoshop nguồn mở.

Tuy nhiên, trước khi chúng tôi thảo luận về cách cung cấp hình ảnh được chia tỷ lệ mà không cần sử dụng plugin, chúng tôi nên đề cập đến một tính năng gốc đi kèm với WordPress được gọi là srcset. Tính năng cốt lõi này làm cho hình ảnh của bạn phản ứng nhanh với các kích thước màn hình khác nhau. Nó hoạt động bằng cách cung cấp cho trình duyệt ba tùy chọn khác nhau, sau đó sẽ sử dụng tùy chọn được tối ưu hóa nhất cho người dùng đó. Tất nhiên, điều này sẽ giúp phần nào thời gian tải trang, nhưng việc chia tỷ lệ hình ảnh sẽ mang lại cho bạn hiệu suất cao hơn nữa.

Nói về điều này, chúng ta hãy xem phương pháp đầu tiên của chúng tôi – cắt xén hình ảnh trong WordPress.

1. Cắt ảnh trong thư viện phương tiện của bạn

Cổng cuộc gọi đầu tiên của bạn để đạt được phương pháp này là hướng đến phần cuối WordPress của bạn. Tại một trong các bài đăng hoặc trang của bạn, hãy bắt đầu bằng cách nhấp vào hình ảnh bạn muốn chia tỷ lệ và chọn chỉnh sửa hình ảnh:

Nút 'Chỉnh sửa hình ảnh' trong WordPress.

Từ đó, bạn sẽ cần phải đi đến Thư viện phương tiện màn hình, chọn hình ảnh của bạn và nhấp vào Chỉnh sửa hình ảnh liên kết. Trên màn hình tiếp theo là tùy chọn để chia tỷ lệ hình ảnh của bạn:

Cách phục vụ thủ công hình ảnh được chia tỷ lệ từ bảng điều khiển WordPress

Bạn sẽ được cung cấp các kích thước ban đầu cho hình ảnh và một hộp để nhập các kích thước được chia tỷ lệ mới của bạn. Tuy nhiên, lưu ý rằng tên tệp thường được lưu với một chuỗi ký tự bổ sung, điều này có thể ảnh hưởng đến bạn nếu bạn đang sử dụng một chiến lược SEO hình ảnh cụ thể.

2. Điều chỉnh kích thước hình ảnh trong Cài đặt > Phương tiện màn hình

Bạn cũng có thể chia tỷ lệ hình ảnh của mình bằng cách điều chỉnh trực tiếp các cài đặt trong WordPress. Để thực hiện việc này, hãy điều hướng đến WordPress, sau đó truy cập Cài đặt > Phương tiện:

Tùy chọn Cài đặt > Phương tiện trong WordPress.” width=”1376″ height=”470″/><noscript><img decoding=

Sử dụng kích thước hình thu nhỏ của WordPress để phục vụ hình ảnh được chia tỷ lệ

Tại đây, bạn có thể thay đổi chiều rộng và chiều cao cho kích thước hình thu nhỏ, trung bình và lớn.

Sau đó, WordPress sẽ tự động tạo các phiên bản được chia tỷ lệ của từng hình ảnh bằng các kích thước này. Bạn có thể chọn kích thước bạn muốn chèn từ trình chỉnh sửa WordPress.

Tuy nhiên, cần lưu ý rằng mặc dù bạn có thể cải thiện thời gian tải trang trong một số trường hợp bằng cách sử dụng các cài đặt này, nhưng chúng sẽ không tối ưu hóa hoàn hảo hình ảnh của bạn trong mọi trường hợp. Đối với điều này, bạn có thể xem xét phương pháp thủ công cuối cùng.

3. Sử dụng trình chỉnh sửa hình ảnh (chẳng hạn như GIMP hoặc Photoshop)

Tất nhiên, phương pháp cuối cùng của chúng tôi để chia tỷ lệ hình ảnh của bạn theo cách thủ công là sử dụng trình chỉnh sửa hình ảnh ngoại tuyến. Bạn có thể coi phương pháp này là rõ ràng nhất, mặc dù nó được cho là tùy chọn hiệu quả nhất hiện có. Ví dụ, trong Photoshop, bạn có thể đi đến Hình ảnh trên thanh công cụ và chọn Kích thước ảnh:

Cách thay đổi kích thước ảnh Photoshop để chia tỷ lệ ảnh

Một màn hình bật lên sẽ xuất hiện với kích thước cơ bản cho hình ảnh của bạn. Sau đó, bạn sẽ có thể chia tỷ lệ hình ảnh theo ý muốn trước khi tải nó lên WordPress.

Cách phục vụ hình ảnh được chia tỷ lệ trong Photoshop

Ngoài chiều rộng và chiều cao, bạn cũng có một số tùy chọn khác tại đây. Chẳng hạn, độ phân giải của hình ảnh có thể được đặt cao hơn hoặc thấp hơn tùy thuộc vào nhu cầu của bạn (72 PPI thường là tiêu chuẩn cho web).

Phần kết luận

Cho dù trang web của bạn đang chạy chậm hay đơn giản là bạn đang tìm kiếm một cách khác để tối ưu hóa hiệu suất của trang web, thì việc học cách cung cấp hình ảnh được chia tỷ lệ một cách hiệu quả là điều bắt buộc. Với các thông số kỹ thuật hoàn hảo tại chỗ, trang web của bạn có thể chạy rất nhanh.

Trong bài viết này, chúng tôi đã thảo luận về cách chia tỷ lệ hình ảnh theo cách thủ công và cung cấp ba plugin hữu ích để thực hiện việc này. Như một bản tóm tắt nhanh chóng, chúng là:

  1. tối ưu: Plugin này cung cấp phương pháp thiết lập và quên để phục vụ hình ảnh được chia tỷ lệ.
  2. đánh lén: Một giải pháp phổ biến và được đánh giá cao để tối ưu hóa hình ảnh.
  3. ShortPixel: Đối với những người thích một tùy chọn nhẹ, plugin này là sự lựa chọn hoàn hảo.

Bạn có bất kỳ câu hỏi nào về việc cung cấp hình ảnh được chia tỷ lệ hoặc ý nghĩa của việc cung cấp hình ảnh được chia tỷ lệ không? Hãy hỏi họ trong phần bình luận bên dưới!

hướng dẫn miễn phí

5 mẹo cần thiết để tăng tốc
Trang web WordPress của bạn

Giảm thời gian tải xuống thậm chí 50-80%
chỉ bằng cách làm theo các mẹo đơn giản.



Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status