Định dạng hình ảnh tốt nhất cho WordPress là WebP dành cho ảnh và đồ họa, với JPG và PNG làm bản dự phòng tự động và SVG cho logo và biểu tượng. WordPress chiếm một phần rất lớn trên web và hình ảnh thường là thứ nặng nhất trên bất kỳ trang nào nó phục vụ, vì vậy định dạng bạn tải lên sẽ trực tiếp xác định tốc độ tải trang web của bạn và xếp hạng của nó như thế nào. WordPress xử lý rất nhiều thứ cho bạn, tạo ra nhiều kích thước cho mỗi lần tải lên, nhưng nó sẽ không chọn định dạng lý tưởng trừ khi bạn thiết lập nó. Hướng dẫn này bao gồm định dạng nào sẽ sử dụng, cách WordPress xử lý hình ảnh cũng như các cài đặt và plugin giúp trang web WordPress hoạt động nhanh chóng.

Tại sao định dạng hình ảnh lại quan trọng đến vậy trên WordPress

Trên một trang WordPress thông thường, hình ảnh chiếm phần lớn số byte mà khách truy cập tải xuống. Điều đó có nghĩa định dạng hình ảnh là đòn bẩy lớn nhất về tốc độ trangvà tốc độ trang được cung cấp trực tiếp vào Core Web Vitals mà Google sử dụng làm tín hiệu xếp hạng. Một chủ đề có thể gọn gàng và lưu trữ nhanh, nhưng một trang chứa nhiều ảnh JPG quá khổ vẫn sẽ thu thập dữ liệu. Chọn một định dạng hiệu quả và cho phép WordPress cung cấp các phiên bản có kích thước phù hợp là cách tối ưu hóa có tác động cao nhất mà hầu hết các trang web có thể thực hiện và không tốn gì ngoài một chút thiết lập.

Cách WordPress xử lý tải lên hình ảnh

Khi bạn tải lên một hình ảnh, WordPress không chỉ lưu trữ nó. Nó tự động tạo ra một số bản sao đã thay đổi kích thước, hình thu nhỏ, trung bình, lớn và đầy đủ để nó có thể phân phát kích thước phù hợp với từng ngữ cảnh. Nó cũng xây dựng đánh dấu srcset đáp ứng để trình duyệt chọn kích thước phù hợp cho mỗi thiết bị. Điều này rất mạnh mẽ nhưng nó hoạt động từ bất cứ thứ gì bạn tải lên, vì vậy bản gốc 5000 pixel sẽ tạo ra các bản sao cồng kềnh ở mọi kích thước. Tải lên bản gốc được nén hiệu quả, có kích thước hợp lý có nghĩa là mọi phiên bản được tạo ra cũng đều gọn gàng.

WebP: mặc định hiện đại

WebP là định dạng để chuẩn hóa. Nó tạo ra các tập tin Nhỏ hơn 25 đến 35% so với JPG ở cùng chất lượng, hỗ trợ độ trong suốt như PNG và hiện được mọi trình duyệt hiện tại hỗ trợ. WordPress đã hỗ trợ tải lên WebP kể từ phiên bản 5.8 và với plugin phù hợp, nó có thể tự động cung cấp các phiên bản WebP của JPG và PNG hiện có của bạn, quay lại bản gốc cho bất kỳ trình duyệt nào không thể hiển thị nó. Di chuyển thư viện phương tiện sang WebP thường là tốc độ nhanh nhất mà một trang WordPress có thể đạt được.

JPG và PNG làm dự phòng

WebP không có nghĩa là từ bỏ các định dạng cũ. JPG vẫn là giải pháp dự phòng an toàn cho ảnh và PNG cho đồ họa cần độ trong suốtvà một plugin tối ưu hóa tốt sẽ giữ nguyên bản gốc để bất kỳ trình duyệt nào thiếu hỗ trợ WebP vẫn có được hình ảnh hoạt động. Trong thực tế, bạn tải lên JPG hoặc PNG như bình thường và plugin sẽ tạo và phân phối WebP cùng với nó, phân phối tệp nhỏ hơn nếu có thể. Điều này giúp bạn tiết kiệm WebP mà không gặp rủi ro về khả năng tương thích, đó là lý do tại sao đây là thiết lập được đề xuất thay vì chỉ dành cho WebP.

SVG cho logo và biểu tượng

Đối với logo và biểu tượng giao diện của bạn, SVG đánh bại mọi định dạng raster. Đó là vector, nhờ đó nó luôn sắc nét ở mọi mật độ màn hình từ một tệp nhỏ. Theo mặc định, WordPress không cho phép tải lên SVG vì lý do bảo mật, vì SVG có thể chứa tập lệnh, vì vậy bạn kích hoạt nó bằng một plugin giúp dọn dẹp các tệp khi tải lên. Sau khi được bật, logo được phân phát dưới dạng SVG sẽ nhỏ hơn và sắc nét hơn PNG tương đương và không bao giờ cần tạo nhiều kích thước. Dành riêng SVG cho logo, biểu tượng và đồ họa đơn giản, không bao giờ cho ảnh.

Chọn kích thước hình ảnh phù hợp

WordPress tạo ra một số kích thước, nhưng bạn kiểm soát kích thước. Đặt kích thước lớn đến không rộng hơn khu vực nội dung của bạn, thường khoảng 1200 đến 1600 pixel, vì vậy hình ảnh có chiều rộng đầy đủ không cần thiết phải lớn. Tải lên ảnh 4000 pixel khi cột nội dung của bạn rộng 800 pixel sẽ gây lãng phí băng thông ngay cả sau khi WordPress thay đổi kích thước, vì bản sao được tạo lớn nhất vẫn quá khổ. Hãy khớp kích thước hình ảnh đã đăng ký của bạn với bố cục thực tế của chủ đề và mọi hình ảnh mà trang web cung cấp vẫn tương ứng với vị trí nó xuất hiện.

Plugin nén và tối ưu hóa

Một plugin tối ưu hóa tự động hóa toàn bộ quy trình. Tùy chọn phổ biến nén mọi video tải lên, tạo phiên bản WebP và có thể loại bỏ siêu dữ liệu không cần thiết, tất cả đều không cần bạn phải chạm tay vào hình ảnh. Nhiều người cũng tối ưu hóa hàng loạt thư viện hiện có của bạn, chuyển đổi JPG và PNG tích lũy nhiều năm sang WebP chỉ trong một lần. Một số chuyển quá trình xử lý sang máy chủ của họ để tiết kiệm dịch vụ lưu trữ của bạn. Cho dù bạn chọn cách nào thì hiệu quả đều giống nhau: hình ảnh được nén tự động đến trang và ở định dạng tốt nhất, điều này đáng tin cậy hơn nhiều so với việc nhớ tối ưu hóa từng hình ảnh theo cách thủ công.

Lười tải hình ảnh

Tải chậm sẽ trì hoãn hình ảnh cho đến khi khách truy cập cuộn đến gần chúng, do đó tải ban đầu của trang chỉ tìm nạp những gì hiển thị ngay lập tức. WordPress cho phép tải lười biếng theo mặc định trên các hình ảnh bên dưới màn hình đầu tiên, tự động thêm thuộc tính tải. Điều này tăng tốc đáng kể lần sơn đầu tiên trên các trang có nhiều hình ảnh. Một ngoại lệ là hình ảnh lớn nhất trong màn hình đầu tiên của bạn, thường là hình ảnh chính, phải tải nhanh để không làm chậm chỉ số Thời gian hiển thị nội dung lớn nhất. Hầu hết các plugin tối ưu hóa đều cho phép bạn loại trừ hình ảnh đó khỏi việc tải từng phần bằng một cài đặt duy nhất.

Loại bỏ siêu dữ liệu

Các bức ảnh mang theo siêu dữ liệu, kiểu máy ảnh, vị trí GPS, cấu hình màu mà một trang web hiếm khi cần và điều này làm tăng thêm sức nặng. Việc loại bỏ siêu dữ liệu này sẽ thu nhỏ từng tệp không có thay đổi rõ ràng nào và hầu hết các plugin tối ưu hóa đều thực hiện việc đó như một phần của quá trình nén. Xóa dữ liệu GPS cũng mang lại lợi ích về quyền riêng tư vì bạn có thể không muốn công bố nơi chụp ảnh. Siêu dữ liệu duy nhất đáng lưu giữ là cấu hình màu nếu độ chính xác của màu có vấn đề. Mặt khác, việc loại bỏ nó là một cách giảm kích thước vô hình, miễn phí trên toàn bộ thư viện.

Thiết lập hình ảnh WordPress được đề xuất

Đặt nó lại với nhau và việc thiết lập rất đơn giản. Đăng ký kích thước hình ảnh phù hợp với bố cục chủ đề của bạn. Cài đặt plugin tối ưu hóa để nén nội dung tải lên, tạo và phân phối WebP với các dự phòng cũng như loại bỏ siêu dữ liệu. Bật SVG đã được làm sạch cho logo và biểu tượng của bạn. Giữ chế độ tải chậm mặc định của WordPress nhưng tải hình ảnh anh hùng của bạn một cách háo hức. Sau đó, chỉ cần tải lên các bản gốc có kích thước hợp lý và để quy trình thực hiện phần còn lại. Với tính năng này, mọi hình ảnh trên trang web đều được nén, có kích thước chính xác và tự động phân phát ở định dạng tốt nhất, đồng thời trang web vẫn hoạt động nhanh khi thư viện phát triển.

AVIF: cái

bước tiếp theo ngoài WebP

AVIF là định dạng hiệu quả mới nhất và WordPress cũng hỗ trợ nó. Nó nén thậm chí còn nhỏ hơn WebP, thường nhỏ hơn 20%, với cùng chất lượng hình ảnh, hỗ trợ độ trong suốt và màu sắc rộng. Hỗ trợ trình duyệt hiện đã rộng rãi nhưng hơi chậm so với WebP, vì vậy AVIF hoạt động tốt nhất với dự phòng WebP hoặc JPG. Một số plugin tối ưu hóa có thể tự động tạo AVIF cùng với WebP. Đối với một trang web muốn tiêu tốn vài kilobyte cuối cùng của mỗi hình ảnh, AVIF đáng được kích hoạt, mặc dù hiện tại WebP vẫn là định dạng chính an toàn.

Thư viện phương tiện và công việc dọn phòng

Theo thời gian, thư viện phương tiện WordPress chứa đầy các hình ảnh không sử dụng, các phiên bản cũ và các bản sao làm cho các bản sao lưu trở nên cồng kềnh và làm quản trị viên bối rối. Định kỳ dọn sạch các phương tiện không sử dụng giúp thư viện có thể quản lý được và bản sao lưu của bạn nạc. Plugin có thể xác định hình ảnh không được đính kèm với bất kỳ bài đăng hoặc trang nào, mặc dù vậy, bạn nên xem lại trước khi xóa vì một số hình ảnh được sử dụng theo cách mà quá trình quét không thể phát hiện. Một thư viện phương tiện gọn gàng sẽ dễ làm việc hơn và sau khi được tối ưu hóa sẽ mang lại một bức tranh rõ ràng về lượng không gian mà hình ảnh của bạn thực sự chiếm.

Tạo lại hình thu nhỏ sau khi thay đổi chủ đề

Khi bạn chuyển chủ đề hoặc thay đổi kích thước hình ảnh đã đăng ký, các ảnh tải lên hiện tại vẫn có kích thước được tạo cũ. Tái tạo hình thu nhỏ xây dựng lại mọi kích thước từ bản gốc để phù hợp với các kích thước mới mà một plugin chuyên dụng thực hiện hàng loạt trên toàn bộ thư viện. Bỏ qua điều này và hình ảnh có thể bị kéo dài hoặc phân phát ở kích thước sai trong chủ đề mới. Đây là bước thực hiện một lần sau bất kỳ thay đổi nào đối với kích thước hình ảnh của bạn và việc chạy nó sẽ giúp toàn bộ thư viện nhất quán với cách chủ đề hiện tại thực sự hiển thị hình ảnh.

Phân phối CDN cho hình ảnh

Mạng phân phối nội dung tăng tốc độ phân phối hình ảnh bằng cách phân phối tệp từ máy chủ gần mỗi khách truy cập. CDN lưu trữ hình ảnh của bạn ở các vị trí biên trên toàn thế giới, do đó, đầu đọc ở xa máy chủ của bạn vẫn nhận được hình ảnh một cách nhanh chóng. Nhiều plugin bộ nhớ đệm và tối ưu hóa WordPress tích hợp CDN và một số CDN dành riêng cho hình ảnh cũng chuyển đổi và thay đổi kích thước nhanh chóng, tự động xử lý định dạng và kích thước. Đối với một trang web có lượng khán giả toàn cầu hoặc lưu lượng truy cập lớn, CDN sẽ loại bỏ việc phân phối hình ảnh như một nút thắt cổ chai và đồng thời loại bỏ tải khỏi máy chủ gốc của bạn.

Hình ảnh nổi bật và xem trước trên mạng xã hội

Hình ảnh nổi bật của mỗi bài đăng đều thực hiện hai nhiệm vụ: nó xuất hiện trong chủ đề của bạn và thông qua thẻ Open Graph, dưới dạng bản xem trước khi bài đăng được chia sẻ. Đặt hình ảnh nổi bật ở kích thước phù hợp với bản xem trước trên mạng xã hội, khoảng 1200 x 630, vì vậy các liên kết được chia sẻ trông sắc nét trong nguồn cấp dữ liệu. Plugin SEO thường tự động ánh xạ hình ảnh nổi bật vào thẻ Open Graph. Làm đúng điều này có nghĩa là mọi bài đăng được chia sẻ đều hiển thị hình ảnh rõ ràng, có kích thước chính xác thay vì hình thu nhỏ bị cắt hoặc không có gì cả.

Kiểm tra hiệu suất hình ảnh của bạn

Sau khi tối ưu hóa, đo lường kết quả. Các công cụ như PageSpeed Insights báo cáo các vấn đề liên quan đến hình ảnh, gắn cờ hình ảnh quá khổ, thiếu định dạng hiện đại và hình ảnh không có kích thước gây ra sự thay đổi bố cục. Họ liên kết trực tiếp với Core Web Vitals nên lời khuyên của họ sẽ ánh xạ tới những gì Google đo lường. Chạy thử nghiệm trước và sau khi vượt qua tối ưu hóa sẽ cho biết chính xác trang đã trở nên nhanh hơn bao nhiêu và làm nổi bật bất kỳ hình ảnh nào vẫn cản trở trang. Hãy coi những báo cáo này như một danh sách kiểm tra để loại bỏ phần trọng lượng cuối cùng ra khỏi hình ảnh của bạn.

Các lỗi hình ảnh WordPress phổ biến

Một vài thói quen âm thầm làm chậm các trang web WordPress. Tải lên hình ảnh camera có độ phân giải đầy đủ, bỏ qua quá trình nén và không bật WebP là phổ biến nhất, mỗi tệp để lại các tệp lớn ở vị trí mà các tệp nhỏ sẽ làm. Những vấn đề khác bao gồm quên đặt kích thước hình ảnh, điều này gây ra sự thay đổi bố cục và sử dụng plugin chậm, nhiều tính năng, khiến trọng lượng tăng thêm hơn mức tiết kiệm. Mọi lỗi này đều có thể dễ dàng khắc phục bằng cách thiết lập ở trên. Việc tránh chúng sẽ giúp trang web WordPress duy trì tốc độ nhanh khi nó phát triển, thay vì xem nó chậm lại từng năm khi thư viện lấp đầy.

Định dạng hình ảnh tốt nhất cho WordPress là gì?

WebP cho ảnh và đồ họa, với các dự phòng JPG và PNG và SVG cho logo. Các tệp WebP nhỏ hơn 25 đến 35% so với JPG ở cùng chất lượng và mọi trình duyệt hiện tại đều hỗ trợ chúng.

WordPress có hỗ trợ WebP không?

Vâng, kể từ WordPress 5.8. Bạn có thể tải WebP trực tiếp lên và một plugin tối ưu hóa có thể tự động phân phối các phiên bản WebP của JPG và PNG hiện có cùng với các dự phòng.

Tôi có thể tải tệp SVG lên WordPress không?

Không phải theo mặc định, vì lý do bảo mật. Một plugin dọn dẹp SVG khi tải lên kích hoạt nó một cách an toàn, sau đó các logo và biểu tượng được phân phát dưới dạng SVG sẽ nhỏ hơn và sắc nét hơn PNG.

Tôi có cần plugin tối ưu hóa hình ảnh không?

Nó được khuyến khích mạnh mẽ. Một plugin nén nội dung tải lên, tạo WebP và tự động loại bỏ siêu dữ liệu, điều này đáng tin cậy hơn nhiều so với việc tối ưu hóa từng hình ảnh bằng tay.

Tôi có nên thay đổi kích thước hình ảnh trước khi tải lên WordPress?

Đúng. Tải lên không rộng hơn khu vực nội dung của bạn, thường là 1200 đến 1600 pixel. Một bản gốc khổng lồ làm cho mọi kích thước mà WordPress tạo ra từ nó cũng trở nên quá khổ.

WordPress có hỗ trợ AVIF không?

Đúng. AVIF nén nhỏ hơn khoảng 20% so với WebP ở cùng chất lượng và một số plugin tối ưu hóa sẽ tự động tạo ra nó. Cung cấp nó với dự phòng WebP hoặc JPG để được hỗ trợ đầy đủ cho trình duyệt.

Tôi có nên sử dụng CDN cho hình ảnh WordPress không?

Đối với một trang web toàn cầu hoặc có lưu lượng truy cập cao thì có. CDN lưu trữ hình ảnh ở các vị trí biên trên toàn thế giới, để những khách truy cập ở xa có thể tải chúng nhanh chóng và tải về từ máy chủ gốc của bạn.

Tại sao hình ảnh của tôi trông không ổn sau khi thay đổi chủ đề?

Bởi vì các video tải lên hiện tại vẫn giữ nguyên kích thước được tạo cũ. Tái tạo hình thu nhỏ xây dựng lại mọi kích thước từ bản gốc để phù hợp với kích thước của chủ đề mới.

Tôi có nên lười tải hình ảnh WordPress không?

Vâng, và WordPress cho phép tải lười biếng theo mặc định trên các hình ảnh dưới màn hình đầu tiên. Hãy tiếp tục nhưng hãy tải hình ảnh anh hùng chính trong màn hình đầu tiên của bạn một cách háo hức để nó không làm trì hoãn Thời gian hiển thị nội dung lớn nhất.