Tối ưu hóa hình ảnh của bạn với kích thước hình ảnh được xác định trước [Mẹo WordPress]

Tối ưu hóa hình ảnh trên một trang web là một nhiệm vụ khó khăn. Bạn có thể chọn sử dụng ít hình ảnh hơn, hình ảnh nén, họa tiết hoặc svg; Danh sách cứ kéo dài. Một nơi mà nhiều trang web WordPress tăng gấp ba là xác định kích thước hình ảnh, đó là một khía cạnh quan trọng của việc tối ưu hóa các trang web nặng nội dung.

Kích thước hình ảnh rất quan trọng vì hình ảnh được tạo tự động theo kích thước được đưa ra khi hình ảnh được tải lên. Điều này đảm bảo rằng ngay cả khi bạn có hình ảnh gốc rộng 3000px, nó sẽ không bao giờ được sử dụng nếu hình ảnh 600px là đủ. Lý tưởng nhất là một không gian rộng 600px nên sử dụng hình ảnh rộng 600px thay vì thu nhỏ lại một hình lớn hơn.

Trong bài viết này tôi sẽ hướng dẫn bạn qua kích thước hình ảnh là gì và làm thế nào để xác định chúng.

WordPress xử lý hình ảnh như thế nào

Nếu bạn đã từng chèn một hình ảnh trong một bài viết WordPress, bạn nên đến bằng bộ chọn kích thước hình ảnh. Điều này cho phép bạn chèn các phiên bản nhỏ, vừa và lớn của hình ảnh. Kích thước thực tế cho những có thể được sửa đổi trong cài đặt WordPress.

Bất cứ khi nào bạn tải lên một hình ảnh thông qua WordPress, nó sẽ tạo ra các phiên bản của những hình ảnh này và lưu trữ chúng một cách riêng biệt. Ví dụ: nếu bạn tải lên hình ảnh 1200 × 800, WordPress có thể tạo các phiên bản 100 × 100, 600 × 400 và 900 × 600. Khi bạn chèn một hình ảnh và chọn "trung bình", phiên bản trung bình thực tế sẽ được sử dụng, trái ngược với phiên bản thu nhỏ của bản gốc.

Điều này cực kỳ có lợi vì nó bảo toàn băng thông trên máy chủ và thời gian xử lý trên máy khách. Tôi nghĩ không có gì ngạc nhiên khi tải xuống hình ảnh 600 × 400 nhanh hơn tải xuống hình ảnh 1200 × 800.

Nếu một hình ảnh lớn hơn được sử dụng cần phải thu nhỏ lại, trình duyệt cần phải tính toán để thực hiện điều này. Mặc dù điều này sẽ không mất nhiều giờ, nhưng nó có thể đáng chú ý trên các trang web nặng hình ảnh.

Hình ảnh phù hợp ở đúng nơi

Mục tiêu cuối cùng là luôn luôn sử dụng kích thước hình ảnh phù hợp. Nếu bạn cần một hình ảnh 440 × 380, sau đó lấy một hình ảnh với kích thước chính xác từ máy chủ. Có hai nơi chính bạn sẽ sử dụng hình ảnh được tải lên: hình ảnh nổi bật và hình ảnh trong bài - Tôi sẽ khuyên bạn nên tập trung vào hình ảnh nổi bật trước tiên.

Trong tất cả các bài viết ngoại trừ trực quan nhất, nó không thực sự quan trọng nếu một hình ảnh trong bài có chiều rộng 220px hoặc 245px. Bất kỳ phiên bản nào bạn có sẵn đều có thể sử dụng như nhau. Hình ảnh nổi bật tuy nhiên thường được hiển thị ở kích thước phổ biến. Đối với danh sách bài viết, bạn có thể sử dụng hình thu nhỏ 178 × 178, đối với tiêu đề bài viết, bạn có thể sử dụng hình ảnh rộng 1200 × 600.

Ngoài những thứ này, bạn cũng có thể muốn giữ một hình thu nhỏ / kích thước trung bình / lớn riêng biệt như được xác định trong cài đặt để cung cấp cho bạn dễ dàng truy cập vào kích thước cụ thể khi thêm hình ảnh vào bài viết.

Vì vậy, tất cả những gì nó rút ra là đây: Sẽ không tuyệt vời nếu chúng ta có thêm hai kích thước hình ảnh mà chúng ta có thể sử dụng cho các hình ảnh nổi bật? Các kích thước hình ảnh này sẽ được tạo ngay bên cạnh phần còn lại khi hình ảnh được tải lên. Tin vui là WordPress cung cấp cho bạn một chức năng khá đơn giản.

Tạo kích thước hình ảnh

Bằng cách sử dụng Hàm add_image_size () bạn có thể xác định tất cả các kích thước hình ảnh trang web của bạn cần. Hãy tạo hai ví dụ được đề cập ở trên. Đặt mã bên dưới vào tệp tin.php của chủ đề hoặc trong tệp của plugin.

 add_image_size ('đặc trưng_thumbnail', 178, 178, đúng); add_image_size ('nổi bật trên toàn thế giới', 1200, 600); 

Như bạn có thể thấy, hàm này có bốn tham số. Tham số đầu tiên cho phép bạn đặt tên cho kích thước. Tham số thứ hai là chiều rộng tối đa, thứ ba, chiều cao tối đa. Tham số thứ tư thiết lập cắt xén cứng. Nếu được đặt thành đúng, hình ảnh sẽ được tạo ở kích thước chính xác mà bạn chỉ định.

Khi điều này đã được thêm vào chủ đề hoặc plugin của bạn, hai phiên bản mới của mỗi tệp bạn tải lên sẽ được tạo bởi WordPress.

Sử dụng kích thước hình ảnh

Các kích thước hình ảnh này có thể được sử dụng trong một số chức năng liên quan đến truy xuất phương tiện truyền thông. Trước tiên hãy nhìn vào những hình ảnh đặc trưng. the_post_thumbnail () thường được sử dụng để hiển thị hình ảnh đặc trưng của bài viết. Đoạn mã sau có thể được đặt trong một vòng lặp WordPress:

 the_post_thumbnail ('đặc trưng_thumbnail'); 

Tham số đầu tiên của chức năng này cho phép bạn chỉ định kích thước hình ảnh sẽ sử dụng. Vì tôi đã chỉ định "đặc trưng_thumbnail", phiên bản 178 × 178 của tệp này sẽ được sử dụng.

Có một số chức năng khác như wp_get_attachment_image ()và wp_get_attachment_image_src () cũng sử dụng tham số kích thước hình ảnh. Bất cứ khi nào bạn sử dụng một chức năng như vậy, bạn phải luôn chỉ định một kích thước hình ảnh phù hợp.

Tái tạo hình thu nhỏ

Nếu bạn đã có một trang web tại chỗ, bạn sẽ không thể tối ưu hóa các bài viết của mình một cách hồi tưởng chỉ bằng cách xác định kích thước hình ảnh. Kích thước hình ảnh chỉ được tính đến khi hình ảnh mới được tải lên, vì vậy chúng không được áp dụng cho hình ảnh đã có trong hệ thống.

Đừng sợ, plugin Regenerate Thumbnails sẽ giúp mọi thứ tốt hơn! Plugin này có thể tạo lại hình thu nhỏ cho tất cả hình ảnh của bạn, có tính đến tất cả các kích thước hình ảnh được xác định. Nó cũng có thể nhắm mục tiêu một hình ảnh cụ thể, Điều này hữu ích nếu bạn chỉ có một vài hoặc bạn đang thực hiện một số thử nghiệm.

Khi hình thu nhỏ của bạn được tạo lại, bạn sẽ thấy các phiên bản tối ưu được tải trên trang web của mình. Bạn có thể kiểm tra điều này bằng cách xem nguồn của hình ảnh. Nếu bạn đã tải lên 'example.jpeg' và bạn thấy 'example.jpeg' là nguồn cho hình ảnh nổi bật của mình, điều gì đó không đúng. Nếu bạn thấy “ví dụ-178 × 178.jpeg” thế thì tất cả đều ổn; hình ảnh tối ưu hóa được hiển thị.

Hình ảnh phản hồi

Một khó khăn trong việc duy trì một trang web được tối ưu hóa là khả năng đáp ứng. Khi tôi xem một bài viết trên iPad, hình ảnh trong bài có kích thước lớn sẽ bị thu nhỏ vì chiều rộng tối đa sẽ là 786px hoặc hơn.

Giải pháp đơn giản nhất là sử dụng một plugin như Hammy. Hammy hoạt động dựa trên chiều rộng nội dung của chủ đề của bạn (trái ngược với chiều rộng cửa sổ của trình duyệt) và có thể phục vụ hình ảnh được tối ưu hóa dựa trên đó. Điều này đặc biệt hữu ích cho người dùng di động, nơi sức mạnh xử lý và băng thông có thể là một vấn đề.

Tối ưu hóa hình ảnh hơn nữa

Như tôi đã đề cập trong phần giới thiệu, có vô số cách để tối ưu hóa hình ảnh. Từ sprite đến nén hình ảnh, rất nhiều kỹ thuật có thể được sử dụng để giảm thời gian tải đi đôi với hình ảnh. Ashutosh KS đã viết một bài viết tuyệt vời giới thiệu 9 Plugin WordPress để cải thiện hiệu suất hình ảnh, tôi khuyên bạn nên đọc nó!

Tôi cũng khuyên bạn nên xem Hassle Free Responsive Images chỉ cho bạn cách thêm hỗ trợ cho thành phần hình ảnh, thứ gì đó bạn sẽ muốn sử dụng nếu bạn muốn viết mã của riêng mình.