Hotline: 0971 93 39 73

6 mẹo tối ưu hóa hình ảnh trong WordPress

Cho dù trang web của bạn được tối ưu hóa đến đâu, hình ảnh sẽ luôn là một trong những yếu tố tải chậm nhất trên trang. Nếu bạn muốn tăng tốc WordPress lên mức tối đa, bạn cần thực hiện một chiến lược nhắm mục tiêu hình ảnh cụ thể - hay còn gọi là tối ưu hóa hình ảnh trong WordPress.

Bài đăng hôm nay chia sẻ 6 mẹo nhanh để tối ưu hóa hình ảnh bằng cách giảm kích thước tệp - tất cả đều dựa trên tốc độ. Nếu bạn muốn có một trang web WordPress nhanh như chớp, hãy đọc tiếp!

Tối ưu hóa hình ảnh trong WordPress mẹo # 1: Chọn loại tệp phù hợp

Khi sử dụng Photoshop và các phần mềm chỉnh sửa hình ảnh khác, bạn có thể chỉ định bạn muốn lưu dưới dạng loại tệp nào. Phần lớn hình ảnh trực tuyến thuộc hai định dạng tệp - JPEG và PNG.

JPEG - JPEG là lựa chọn tốt nhất để chụp ảnh và cho các hình ảnh hiển thị nhiều màu sắc. Chúng cũng có thể được nén, giảm chất lượng để giảm kích thước tệp.

PNG - PNG giành chiến thắng cho đồ họa, bản vẽ, văn bản và một số ảnh chụp màn hình. Chúng cũng hỗ trợ chuyển đổi, không giống như JPEG. Định dạng này sử dụng tính năng nén không mất dữ liệu, mang lại chất lượng cao hơn nhưng các tệp cũng lớn hơn.

Thông thường, định dạng tệp được xác định bởi loại hình ảnh đã được xác định trên. Tuy nhiên, hậu quả của việc chọn sai định dạng tệp, về kích thước tệp là gì?

Ảnh chụp màn hình kích thước đầy đủ này của bảng điều khiển WordPress của tôi là 150kb ở định dạng PNG, nhưng 259kb dưới dạng JPEG. Hãy nhớ rằng, ảnh chụp màn hình thường là miền của PNG - JPEG nặng hơn khoảng 75%.

Tối ưu hóa hình ảnh trong ví dụ WordPress - Ảnh chụp màn hình PNG

Lưu ý: PNG làm rất tốt hầu hết các ảnh chụp màn hình, nhưng không phải tất cả chúng. Nếu bạn có ảnh chụp màn hình của thứ gì đó sử dụng nhiều màu hơn - tức là khi ảnh chụp màn hình của bạn có ảnh ở đâu đó - bạn vẫn tốt hơn với JPG.)

Ngược lại, bức ảnh được chụp này ở định dạng JPEG là 1,26mb; PNG là một con số khổng lồ 7,23mb. Điều đó có nghĩa là PNG lớn hơn 550% (rất tốt!).

Tối ưu hóa hình ảnh trong ví dụ WordPress - Ảnh JPEG

Điều này cho thấy định dạng tệp phù hợp quan trọng như thế nào đối với kích thước hình ảnh của bạn. Hãy tuân thủ quy tắc sau: Ảnh và nội dung có nhiều màu định dạng là JPEG; khác thì là PNG.

Tối ưu hóa hình ảnh trong WordPress mẹo # 2: Thay đổi kích thước hình ảnh

Khi bạn thu nhỏ kích thước của hình ảnh, bạn sẽ giảm kích thước tệp của nó. chắc chắn rồi!

Để giữ cho trang web của bạn nhẹ nhàng và nhanh, hãy đảm bảo bạn giảm kích thước của hình ảnh nhiều nhất có thể. Nếu chiều rộng tối đa của trang web của bạn là 1000 pixel, thì không có lý do gì để tải lên một hình ảnh rộng hơn 1000 pixel.

Mặc dù tính năng hình thu nhỏ của WordPress có thể hiển thị hình ảnh ở kích thước nhỏ hơn, nhưng điều đó không thay đổi kích thước tệp cơ bản của hình ảnh được đề cập. Rõ ràng, một ngoại lệ có thể được thực hiện cho các nhiếp ảnh gia và các nghệ sĩ khác, những người có thể muốn hiển thị hình ảnh có kích thước đầy đủ, độ phân giải cao của họ.

Lấy một ví dụ để chứng minh điều này. Phiên bản kích thước đầy đủ của bức ảnh trước của tôi có kích thước 2592 x 1456 pixel và 1,26mb. Tuy nhiên, hãy xem kích thước tệp thu nhỏ bao nhiêu khi thay đổi kích thước hình ảnh thành một số chiều rộng phổ biến.

Một ví dụ về tối ưu hóa hình ảnh trong WordPress:

Rộng 1200 pixel: 394kb

Rộng 1000 pixel: 298kb

Rộng 800 pixel: 219kb

Rộng 600 pixel: 154kb

Như bạn có thể thấy, kích thước tiết kiệm được thực sự đáng kinh ngạc!

Để thay đổi kích thước hình ảnh theo cách tiết kiệm thời gian, bạn có thể cài đặt Optimole trên trang WordPress của mình và nó sẽ thực hiện mọi thứ tự động. Hơn nữa, nó đi kèm với tính năng thay đổi kích thước hình ảnh để hiển thị tối ưu, có nghĩa là hình ảnh không được tải ở kích thước đầy đủ, nhưng chúng được điều chỉnh cho phù hợp với khung nhìn của từng người dùng. Nói cách khác, Optimole tải kích thước hình ảnh hoàn hảo cho dù bạn đang sử dụng thiết bị hoặc kích thước màn hình nào .

Tối ưu hóa hình ảnh Optimole trong WordPress

Tối ưu hóa hình ảnh trong WordPress mẹo #3: Cắt hình ảnh

Thay đổi kích thước hình ảnh là cách nhanh chóng và dễ dàng để giảm kích thước tệp. Nó tạo ra một bản sao chính xác của hình ảnh của bạn, nhưng một bản sao mà mọi thứ đều nhỏ hơn.

Cắt xén là giải pháp thay thế cho việc thay đổi kích thước. Thay vì thu nhỏ toàn bộ hình ảnh, về cơ bản bạn đang cắt tỉa xung quanh các cạnh - giống như sử dụng một chiếc kéo trên một bức ảnh. Phần hình ảnh bạn đang cố hiển thị trở nên nổi bật hơn và bạn loại bỏ tất cả các yếu tố gây xao nhãng khỏi nền.

Dưới đây là một minh chứng về cách cắt một hình ảnh có thể tốt hơn thay vì chỉ đơn giản là thay đổi kích thước, bằng cách sử dụng ảnh chụp màn hình WordPress đáng tin cậy.

Hình ảnh thay đổi kích thước

Hình ảnh đã Cắt

Tất nhiên, lợi ích của việc cắt xén là, cũng giống như thay đổi kích thước, nó làm giảm kích thước hình ảnh, cắt kích thước tệp và do đó là một cách tuyệt vời để thực hiện tối ưu hóa hình ảnh trong WordPress.

Tối ưu hóa hình ảnh trong WordPress mẹo # 4: Chất lượng hình ảnh thấp hơn (nén mất dữ liệu)

Khi bạn đã hoàn tất việc cắt xén và thay đổi kích thước hình ảnh của mình, bạn có thể giảm kích thước tệp hơn nữa bằng cách nén chúng. Kỹ thuật này đặc biệt hiệu quả và phổ biến đối với JPEG, mặc dù PNG cũng có thể được nén.

Giờ đây, JPEG hỗ trợ một kiểu nén được gọi là nén mất dữ liệu. Điều này có nghĩa là một số dữ liệu hình ảnh bị loại bỏ để giảm kích thước tệp.

Ví dụ: nếu hai pixel liền kề cho thấy sự khác biệt về màu sắc nhỏ nhất , chúng ta có thể làm cho chúng giống nhau. Sự thay đổi hầu như không thể phát hiện được bằng mắt thường, nhưng việc có ít màu hơn sẽ khiến kích thước tệp ở mức thấp.

Khi lưu tệp JPEG bằng phần mềm chỉnh sửa hình ảnh, bạn sẽ được yêu cầu chọn điểm chất lượng từ 0-100. Đây thực chất là sự cân bằng giữa chất lượng hình ảnh và kích thước tệp.

Điểm cao hơn: nén thấp hơn; chất lượng cao; kích thước tệp lớn hơn.

Điểm thấp hơn: độ nén cao hơn; chất lượng thấp hơn; kích thước tệp nhỏ hơn.

Nói chung, những thay đổi nhỏ về điểm chất lượng sẽ tạo ra sự khác biệt nhỏ đối với chất lượng tổng thể của hình ảnh của bạn. Nó thay đổi đáng kể kích thước tệp nhưng người xem hầu như không nhận thấy nhiều sự khác biệt.

Hình ảnh có chất lượng 80%

Hình ảnh có chất lượng 100%

Khi so sánh giữa 2 hình ảnh A và B, thật khó để nhận ra sự khác biệt, phải không? Tuy nhiên, khi nói đến kích thước tệp, sự khác biệt là đêm và ngày: 418kb so với 90kb.

Hình ảnh chất lượng thấp 20%

Tuy nhiên, bạn không thể tiếp tục giảm chất lượng mãi mãi, vì đến một lúc nào đó, chất lượng sẽ khiến hình ảnh trở nên rất kém ảnh hưởng đến trải nghiệm người dùng trên trang web của bạn. Chất lượng hình ảnh 20% cho kích thước chỉ 28kb, nhưng bạn sẽ không muốn điều này trên trang web của mình, phải không?

Bây giờ, không có quy tắc vàng cho mức độ nén hoàn hảo. Tuy nhiên, ngược lại, hình ảnh càng phức tạp càng nhiều chi tiết, bạn nên giữ cho hình ảnh ở chất lượng cao hơn để tối ưu hóa hình ảnh cuối cùng trong WordPress.

Tối ưu hóa hình ảnh trong WordPress mẹo # 5: Cung cấp hình ảnh trên CDN

Mọi thứ trực tuyến diễn ra trong tích tắc, phải không? Thực ra thì không. Khoảng cách địa lý giữa vị trí của khách truy cập và máy chủ của trang web của bạn có ảnh hưởng đến tốc độ trang web - khoảng cách càng lớn thì thời gian chờ càng lâu.

Để giải quyết vấn đề độ trễ này, hãy xem xét cài đặt CDN. CDN lưu trữ trang web của bạn trên nhiều máy chủ trải rộng trên toàn cầu, sau đó kết nối khách truy cập của bạn với máy chủ gần họ nhất về mặt địa lý. Các vấn đề về độ trễ được giải quyết, trang web của bạn được phục vụ nhanh chóng hơn.

Nếu bạn muốn tăng tốc WordPress, bạn sẽ hài lòng khi biết rằng plugin Optimole đi kèm với CDN miễn phí của riêng nó - chỉ dành cho hình ảnh.

Tất cả những gì bạn cần làm là cài đặt và kích hoạt Optimole.

Tối ưu hóa hình ảnh trong WordPress mẹo # 6: lazy loading

Theo mặc định, phần mềm WordPress xử lý tất cả các hình ảnh như nhau. Tuy nhiên, đây rõ ràng là cách sử dụng tài nguyên không hiệu quả và đặc biệt nếu bạn muốn thực hiện bất kỳ tối ưu hóa hình ảnh nào trong WordPress.

Rốt cuộc, một hình ảnh ở cuối trang sẽ không được nhìn thấy hoặc muộn hơn hình ảnh ở đầu trang - Có phải hình ảnh đầu tiên đáng được ưu tiên?

Ưu tiên hình ảnh chính là điều mà lazy loading đạt được. Hình ảnh ở đầu trang được ưu tiên, trong khi hình ảnh dưới màn hình đầu tiên chỉ được tải khi khách truy cập cuộn xuống trang.

Nếu bạn muốn sử dụng lazy loading để tăng tốc WordPress, Optimole sẽ giúp bạn một lần nữa. Điều thú vị về plugin này là nó cung cấp tính năng giữ chỗ hình ảnh chất lượng thấp hay còn gọi là tải chậm hình ảnh chất lượng thấp trung bình cho đến khi hình ảnh kích thước đầy đủ được hiển thị hoàn toàn. Nó cũng hoàn toàn miễn phí .

Kết luận

Hy vọng 6 mẹo nhanh của tôi sẽ giúp bạn tối ưu hóa hình ảnh trong WordPress. Như bạn thấy, bằng cách kết hợp một số chiến lược này, bạn có thể tiết kiệm đáng kể kích thước tệp hình ảnh của mình. Khách truy cập của bạn sẽ yêu thích bạn vì điều này - và trang web của bạn sẽ tải nhanh hơn đáng kể!

Tối ưu hóa hình ảnh của bạn thực sự rất đơn giản nếu bạn đang sử dụng một plugin như Optimole , plugin sẽ tự động thực hiện tất cả công việc cho bạn (và hầu hết là miễn phí).

Page updated

Google Sites

Report abuse