Hình ảnh màu xám css

Hãy tin chúng tôi, bạn không muốn Google ghét trang web của mình. May mắn thay, bạn có thể giảm kích thước tệp hình ảnh của mình để giúp cải thiện hiệu suất trang web của bạn. Một vấn đề với việc định dạng chúng là các sửa đổi thường làm giảm chất lượng của chúng (do đó có thể khiến khách truy cập ghét trang web của bạn). Đó không phải là điều xấu miễn là bạn không làm cho chúng trở nên xấu xí. Có một số thủ thuật và kỹ thuật cho phép bạn giảm kích thước tệp của hình ảnh mà vẫn giữ cho chúng đủ đẹp để tự hào hiển thị chúng trên trang web của bạn. Vì vậy, hãy xem cách định dạng hình ảnh của bạn mà không làm cho chúng trở nên xấu xí, cũng như cách tối ưu hóa hình ảnh cho trang web và hiệu suất

Tối ưu hóa hình ảnh có nghĩa là gì?

Hình ảnh lớn làm chậm các trang web của bạn, điều này tạo ra trải nghiệm người dùng kém tối ưu. Tối ưu hóa hình ảnh là quá trình giảm kích thước tệp của chúng, sử dụng plugin hoặc tập lệnh, từ đó tăng tốc thời gian tải trang. Nén mất dữ liệu và không mất dữ liệu là hai phương pháp thường được sử dụng

Ủng hộ


Xem Hướng dẫn bằng video của chúng tôi để tối ưu hóa hình ảnh cho SEO

Lợi ích của việc định dạng hình ảnh của bạn

Đầu tiên, tại sao bạn cần định dạng hình ảnh của mình? . Theo HTTP Archive, kể từ tháng 11 năm 2018, hình ảnh chiếm trung bình 21% tổng trọng lượng của trang web. Vì vậy, khi nói đến việc tối ưu hóa trang web của bạn, sau nội dung video, hình ảnh là nơi đầu tiên bạn nên bắt đầu

Xem cách Kinsta chống lại đối thủ. So sánh

Nó quan trọng hơn chữ viết và phông chữ. Và trớ trêu thay, quy trình tối ưu hóa hình ảnh tốt lại là một trong những điều dễ triển khai nhất, nhưng rất nhiều chủ sở hữu trang web lại bỏ qua điều này

Hình ảnh màu xám css
Số byte trung bình trên mỗi trang (KB)

Dưới đây là một cái nhìn về những lợi ích chính

  • Nó sẽ cải thiện tốc độ tải trang của bạn (xem nghiên cứu điển hình của chúng tôi bên dưới để biết mức độ ảnh hưởng của nó đến tốc độ của bạn). Nếu trang của bạn mất quá nhiều thời gian để tải, khách truy cập của bạn có thể cảm thấy mệt mỏi vì phải chờ đợi và chuyển sang thứ khác. Để biết thêm thông tin về cách tối ưu hóa thời gian tải trang của bạn, hãy xem hướng dẫn chuyên sâu về tối ưu hóa tốc độ trang của chúng tôi
  • Kết hợp với một plugin SEO WordPress tuyệt vời, nó cải thiện SEO của bạn. Trang web của bạn sẽ xếp hạng cao hơn trong kết quả của công cụ tìm kiếm. Các tệp lớn làm chậm trang web của bạn và các công cụ tìm kiếm ghét các trang web chậm. Google cũng có khả năng thu thập dữ liệu và lập chỉ mục hình ảnh của bạn nhanh hơn cho tìm kiếm hình ảnh của Google. Tò mò về bao nhiêu phần trăm lưu lượng truy cập của bạn đến từ tìm kiếm hình ảnh của Google?
  • Tạo bản sao lưu sẽ nhanh hơn
  • Kích thước tệp hình ảnh nhỏ hơn sử dụng ít băng thông hơn. Mạng và trình duyệt sẽ đánh giá cao điều này
  • Yêu cầu ít dung lượng lưu trữ hơn trên máy chủ của bạn (điều này phụ thuộc vào số lượng hình thu nhỏ bạn tối ưu hóa)
Hình ảnh chiếm trung bình 21% trọng lượng tổng thể của trang web. 😮 Tối ưu hóa chúng. Nhấp để Tweet

Cách tối ưu hóa hình ảnh cho Web và hiệu suất

Mục tiêu chính của việc định dạng hình ảnh của bạn là tìm sự cân bằng giữa kích thước tệp thấp nhất và chất lượng chấp nhận được. Có nhiều hơn một cách để thực hiện hầu hết tất cả các tối ưu hóa này. Một trong những cách phổ biến nhất là chỉ cần nén chúng trước khi tải lên WordPress. Thông thường, điều này có thể được thực hiện trong một công cụ như Adobe Photoshop hoặc Affinity Photo. Một số tác vụ này cũng có thể được thực hiện bằng cách sử dụng plugin, chúng tôi sẽ đi sâu vào bên dưới

Hai điều cơ bản cần xem xét là định dạng tệp và loại nén bạn sử dụng. Bằng cách chọn kết hợp đúng định dạng tệp và kiểu nén, bạn có thể giảm kích thước hình ảnh của mình tới 5 lần. Bạn sẽ phải thử nghiệm với từng định dạng hình ảnh hoặc tệp để xem định dạng nào hoạt động tốt nhất

Thay đổi máy chủ WordPress của bạn để tối ưu hóa hình ảnh của bạn và xem tốc độ tải trang tăng hơn 45%. Dùng thử Kinsta miễn phí

Chọn định dạng tệp phù hợp

Trước khi bạn bắt đầu sửa đổi hình ảnh của mình, hãy đảm bảo rằng bạn đã chọn loại tệp tốt nhất. Có một số loại tệp bạn có thể sử dụng

  • PNG – tạo ra hình ảnh chất lượng cao hơn nhưng cũng có kích thước tệp lớn hơn. Được tạo dưới dạng định dạng hình ảnh không mất dữ liệu, mặc dù nó cũng có thể bị mất dữ liệu
  • JPEG – sử dụng tối ưu hóa lossy và lossless. Bạn có thể điều chỉnh mức chất lượng để có sự cân bằng tốt giữa chất lượng và kích thước tệp
  • GIF – chỉ sử dụng 256 màu. Đó là sự lựa chọn tốt nhất cho hình ảnh động. Nó chỉ sử dụng nén không mất dữ liệu

Có một số định dạng khác, chẳng hạn như JPEG XR và WebP, nhưng chúng không được tất cả các trình duyệt hỗ trợ phổ biến. Tốt nhất bạn nên dùng JPEG hoặc JPG cho ảnh nhiều màu và PNG cho ảnh đơn giản.
(Đọc gợi ý. JPG so với JPEG. Hiểu định dạng tệp hình ảnh phổ biến nhất)

Chất lượng nén so với kích thước

Đây là một ví dụ về điều có thể xảy ra nếu bạn nén hình ảnh quá nhiều. Đầu tiên là sử dụng tỷ lệ nén rất thấp, dẫn đến chất lượng cao nhất (nhưng kích thước tệp lớn hơn). Thứ hai là sử dụng tốc độ nén rất cao, dẫn đến hình ảnh có chất lượng rất thấp (nhưng kích thước tệp nhỏ hơn). Ghi chú. Ảnh gốc chưa chỉnh sửa là 2. 06 MB

Hình ảnh màu xám css
JPG nén thấp (chất lượng cao) – 590 KB
Hình ảnh màu xám css
JPG nén cao (chất lượng thấp) – 68 KB

Như bạn có thể thấy hình ảnh đầu tiên ở trên là 590 KB. Đó là khá lớn cho một bức ảnh. Nói chung, tốt nhất là bạn có thể giữ cho tổng trọng lượng của trang web có kích thước dưới 1 hoặc 2 MB. 590 KB sẽ là một phần tư trong số đó rồi. Hình ảnh thứ hai rõ ràng trông rất kinh khủng, nhưng sau đó nó chỉ có 68 KB. Những gì bạn muốn làm là tìm một phương tiện hài lòng giữa tốc độ nén (chất lượng) và kích thước tệp

Vì vậy, chúng tôi đã chụp lại ảnh ở tốc độ nén trung bình và như bạn có thể thấy bên dưới, chất lượng hiện có vẻ tốt và kích thước tệp là 151 KB, có thể chấp nhận được đối với ảnh có độ phân giải cao. Ảnh này nhỏ hơn gần 4 lần so với ảnh gốc với độ nén thấp. Thông thường, các hình ảnh đơn giản hơn như PNG phải dưới 100 KB trở xuống để có hiệu suất tốt nhất

Hình ảnh màu xám css
Nén trung bình (chất lượng cao) JPG – 151 KB

Tối ưu hóa Lossy vs Lossless

Cũng cần hiểu rằng có hai loại nén mà bạn có thể sử dụng, mất dữ liệu và không mất dữ liệu

Lossy – đây là bộ lọc loại bỏ một số dữ liệu. Điều này sẽ làm giảm chất lượng hình ảnh, vì vậy bạn sẽ phải cẩn thận về mức độ giảm chất lượng hình ảnh. Kích thước tệp có thể được giảm một lượng lớn. Bạn có thể sử dụng các công cụ như Adobe Photoshop, Affinity Photo hoặc các trình chỉnh sửa hình ảnh khác để điều chỉnh cài đặt chất lượng của hình ảnh. Ví dụ chúng tôi sử dụng ở trên là sử dụng nén mất dữ liệu

Lossless – đây là bộ lọc nén dữ liệu. Điều này không làm giảm chất lượng nhưng sẽ yêu cầu hình ảnh phải được giải nén trước khi có thể hiển thị. Bạn có thể thực hiện nén không mất dữ liệu trên máy tính để bàn của mình bằng các công cụ như Photoshop, FileOptimizer hoặc ImageOptim

Tốt nhất bạn nên thử nghiệm các kỹ thuật nén của mình để xem cách nào hoạt động tốt nhất cho từng hình ảnh hoặc định dạng. Nếu các công cụ của bạn có tùy chọn này, hãy đảm bảo bạn lưu hình ảnh cho web. Đây là một tùy chọn trong nhiều trình chỉnh sửa hình ảnh và sẽ cung cấp cho bạn các điều chỉnh về chất lượng để bạn có thể thực hiện nén tối ưu. Bạn sẽ giảm một số chất lượng, vì vậy hãy thử nghiệm để tìm ra sự cân bằng tốt nhất mà bạn có thể mà không làm cho hình ảnh trở nên xấu xí

Công cụ và chương trình tối ưu hóa hình ảnh

Có rất nhiều công cụ và chương trình, cả cao cấp và miễn phí, mà bạn có thể sử dụng để tối ưu hóa hình ảnh của mình. Một số cung cấp cho bạn các công cụ để thực hiện tối ưu hóa của riêng bạn và những người khác thực hiện công việc cho bạn. Cá nhân chúng tôi là những người hâm mộ lớn của Ảnh có liên quan, vì nó rẻ và cung cấp cho bạn các tính năng gần như giống hệt với Adobe Photoshop

Đăng kí để nhận thư mới

Bạn muốn biết làm thế nào chúng tôi tăng lưu lượng truy cập của mình hơn 1000%?

Tham gia cùng hơn 20.000 người khác nhận bản tin hàng tuần của chúng tôi với các mẹo nội bộ về WordPress

Theo dõi ngay

Hình ảnh màu xám css
Nén ảnh trong Affinity Photo

Dưới đây là một số công cụ và chương trình bổ sung để kiểm tra

  • AdobePhotoshop
  • gimp
  • Sơn. MẠNG LƯỚI
  • ảnh GIF
  • jpegtran
  • JPEG nhỏ
  • OptiPNG
  • pngquant
  • Trình tối ưu hóa tệp
  • ImageOptim
  • hình ảnh
  • Trình thay đổi kích thước hình ảnh. tổ chức

Thay đổi kích thước hình ảnh theo tỷ lệ

Trước đây, điều rất quan trọng là bạn tải hình ảnh lên để chia tỷ lệ và không để CSS thay đổi kích thước chúng. Tuy nhiên, điều này không còn quan trọng nữa kể từ WordPress 4. 4 hiện hỗ trợ hình ảnh phản hồi (không bị thu nhỏ bởi CSS). Về cơ bản, WordPress tự động tạo một số kích thước của mỗi hình ảnh được tải lên thư viện phương tiện. Bằng cách bao gồm các kích thước có sẵn của hình ảnh vào thuộc tính srcset, giờ đây, các trình duyệt có thể chọn tải xuống kích thước phù hợp nhất và bỏ qua các kích thước khác. Xem ví dụ về giao diện thực sự của mã bên dưới

Hình ảnh màu xám css
ví dụ về hình ảnh phản hồi srcset trong mã

Vì vậy, với ngày càng nhiều màn hình HiDPI hiện nay, thật tốt khi tìm được một phương tiện phù hợp. Giả sử gấp 2 hoặc 3 lần kích thước cột hoặc div của trang web của bạn, nhưng vẫn nhỏ hơn kích thước ban đầu. Trình duyệt sẽ hiển thị đúng dựa trên độ phân giải của thiết bị

Thư viện phương tiện WordPress tạo hình thu nhỏ dựa trên cài đặt của bạn. Tuy nhiên, bản gốc vẫn được giữ lại và nguyên vẹn. Nếu bạn muốn thay đổi kích thước hình ảnh của mình và tiết kiệm dung lượng ổ đĩa bằng cách không lưu ảnh gốc, bạn có thể sử dụng plugin miễn phí như Imsanity

Hình ảnh màu xám css
Cài đặt phương tiện WordPress

Imsanity cho phép bạn đặt giới hạn độ tỉnh táo để tất cả các hình ảnh tải lên sẽ bị giới hạn ở kích thước hợp lý, vẫn đủ lớn cho nhu cầu của một trang web thông thường

Imsanity móc vào WordPress ngay sau khi tải lên hình ảnh, nhưng trước khi xử lý WordPress xảy ra. Vì vậy, WordPress hoạt động giống hệt nhau theo mọi cách, ngoại trừ việc người đóng góp đã thu nhỏ hình ảnh của họ thành một kích thước hợp lý trước khi tải lên

Dọn dẹp thư viện phương tiện của bạn

Nếu bạn đang tìm kiếm một công cụ để tiết kiệm dung lượng đồng thời dọn dẹp thư viện phương tiện của mình, bạn có thể sử dụng Media Cleaner để tìm các tệp phương tiện không sử dụng. Plugin sẽ quét tất cả các tệp phương tiện của bạn và liệt kê những tệp không sử dụng trong Bảng điều khiển Media Cleaner để bạn có thể duyệt qua và xóa chúng

Media Cleaner thực hiện một hệ thống thùng rác thông minh. khi các tệp bị xóa, chúng sẽ được chuyển đến thư mục thùng rác. Bằng cách đó, bạn có thể kiểm tra trang web của mình trong một thời gian và đảm bảo mọi thứ đều ổn. Nếu một tệp hoặc mục phương tiện bị thiếu, bạn có thể dễ dàng khôi phục nó bằng một cú nhấp chuột hoặc chỉ cần dọn sạch thùng rác nếu tất cả đều ổn với bạn

Plugin tối ưu hóa hình ảnh bạn có thể sử dụng

Rất may, với WordPress, bạn không phải thực hiện tất cả các thao tác định dạng hoặc nén thủ công. Bạn có thể sử dụng plugin để tự động thực hiện ít nhất một số công việc cho mình. Có một số plugin sẽ tự động tối ưu hóa các tệp hình ảnh của bạn khi bạn tải chúng lên. Họ thậm chí sẽ tối ưu hóa hình ảnh mà bạn đã tải lên. Đây là một tính năng tiện dụng – đặc biệt nếu bạn đã có một trang web chứa đầy hình ảnh. Dưới đây là một số plugin tốt nhất để định dạng hình ảnh của bạn để có hiệu suất tốt hơn

Điều quan trọng là bạn không chỉ dựa vào các plugin. Ví dụ: bạn không nên tải hình ảnh 2 MB lên thư viện phương tiện WordPress của mình. Điều này có thể dẫn đến việc ngốn dung lượng ổ đĩa máy chủ web của bạn rất nhanh. Phương pháp tốt nhất là nhanh chóng thay đổi kích thước hình ảnh trong một công cụ chỉnh sửa ảnh trước, sau đó tải nó lên và sử dụng một trong các plugin sau để giảm thêm

Imagify Trình tối ưu hóa hình ảnh

Hình ảnh màu xám css
Plugin Trình tối ưu hóa hình ảnh Imagify

Imagify được tạo bởi cùng một nhóm đã phát triển WP Rocket, điều mà hầu hết các bạn có thể đã quen thuộc. Nó tương thích với WooC Commerce, NextGen Gallery và WP Retina. Nó cũng có tính năng tối ưu hóa hàng loạt và bạn có thể chọn giữa ba mức độ nén khác nhau, bình thường, tích cực và cực cao. Nó cũng có tính năng khôi phục, vì vậy nếu bạn không hài lòng với chất lượng, bạn có thể khôi phục bằng một cú nhấp chuột và nén lại ở mức phù hợp hơn với nhu cầu của bạn. Có một phiên bản miễn phí và cao cấp. Bạn bị giới hạn ở hạn mức 25 MB hình ảnh mỗi tháng với tài khoản miễn phí

Loại bỏ hình ảnh gốc và thay đổi kích thước hình ảnh lớn hơn của bạn cũng có thể được thực hiện với plugin này

Hình ảnh màu xám css
Thay đổi kích thước hình ảnh trong Imagify

Imagify cũng nén hình ảnh trên máy chủ bên thứ ba của họ, không phải của bạn, điều này rất quan trọng khi nói đến hiệu suất. Imagify không nên làm chậm trang web WordPress của bạn

Trình tối ưu hóa hình ảnh ShortPixel

Hình ảnh màu xám css
plugin ShortPixel

ShortPixel Image Optimizer là một plugin miễn phí sẽ nén 100 hình ảnh mỗi tháng và sẽ nén nhiều loại tệp bao gồm tệp PNG, JPG, GIF, WebP và thậm chí cả tệp PDF. Nó sẽ thực hiện cả nén ảnh mất dữ liệu và không mất dữ liệu. Nó sẽ chuyển đổi CMYK sang RGB. Nó đưa hình ảnh và hình thu nhỏ của bạn vào đám mây để xử lý, sau đó đưa chúng trở lại trang web của bạn để thay thế bản gốc. Nó tạo một bản sao lưu của các tệp gốc để bạn có thể khôi phục chúng theo cách thủ công nếu muốn. Nó sẽ chuyển đổi hàng loạt tập tin thư viện. Không có giới hạn về kích thước tập tin

tối ưu

Hình ảnh màu xám css
plugin tối ưu

Optimole là một plugin WordPress tối ưu hóa hình ảnh tự động giảm kích thước hình ảnh của bạn mà không cần bất kỳ công việc nào từ phía bạn. Nó có một lợi thế lớn khi nói đến tốc độ tải trang web của bạn vì nó hoàn toàn dựa trên đám mây và không bao giờ phục vụ hình ảnh lớn hơn mức bình thường, hay còn gọi là nó hiển thị kích thước hình ảnh hoàn hảo cho chế độ xem và trình duyệt của khách truy cập

Hơn nữa, plugin cung cấp tải chậm và thay thế hình ảnh hiệu quả – nó hạ thấp chất lượng hình ảnh nếu khách truy cập có kết nối internet chậm hơn – điều này làm cho nó nổi bật so với đám đông. Nó cũng tự động phát hiện trình duyệt của người dùng và phục vụ WebP nếu nó được hỗ trợ

Tất cả hình ảnh mà Optimole nén được cung cấp qua CDN nhanh. Bạn có thể dùng thử Optimole miễn phí hoặc nâng cấp lên gói cao cấp nếu cần thêm băng thông và không gian xử lý

Trình tối ưu hóa hình ảnh Optimus

Hình ảnh màu xám css
Trình tối ưu hóa hình ảnh Optimus

Trình tối ưu hóa hình ảnh Optimus WordPress sử dụng nén không mất dữ liệu để tối ưu hóa hình ảnh của bạn. Lossless có nghĩa là bạn sẽ không thấy bất kỳ sự giảm chất lượng nào. Nó hỗ trợ WooCoomerce và nhiều trang web và có tính năng tối ưu hóa hàng loạt tuyệt vời cho những người có thư viện phương tiện lớn hiện có. Nó cũng tương thích với plugin WP Retina WordPress. Có một phiên bản miễn phí và cao cấp. Trong phiên bản cao cấp, bạn trả tiền mỗi năm một lần và bạn có thể nén số lượng hình ảnh không giới hạn. Nếu bạn kết hợp nó với plugin Cache Enabler của họ, bạn cũng có thể đi sâu vào các hình ảnh WebP, đây là một định dạng hình ảnh nhẹ mới của Google

WP Smush

Hình ảnh màu xám css
Plugin WP Smush

WP Smush có cả phiên bản miễn phí và trả phí. Nó sẽ giảm thông tin ẩn từ hình ảnh để giảm kích thước mà không làm giảm chất lượng. Nó sẽ quét hình ảnh và thu nhỏ chúng khi bạn tải chúng lên trang web của mình. Nó cũng sẽ quét các hình ảnh mà bạn đã tải lên và giảm bớt những hình ảnh đó. Nó sẽ gửi hàng loạt tối đa 50 tệp cùng một lúc. Bạn cũng có thể thủ công nếu muốn. Nó sẽ làm mờ các loại hình ảnh JPEG, GIF và PNG. Kích thước tệp được giới hạn ở 1MB

  • Nó tương thích với một số plugin thư viện phương tiện phổ biến nhất như WP All Import và WPML
  • Tất cả tối ưu hóa hình ảnh được thực hiện với các kỹ thuật nén không mất dữ liệu, giữ cho hình ảnh của bạn có chất lượng cao
  • Không quan trọng bạn lưu hình ảnh của mình vào thư mục nào. Smush tìm thấy chúng và nén chúng
  • Smush có một tùy chọn để tự động đặt chiều rộng và chiều cao cho tất cả các hình ảnh, vì vậy tất cả các hình ảnh của bạn đều được thay đổi kích thước theo tỷ lệ giống hệt nhau

TinyPNG (cũng là JPG được nén)

Hình ảnh màu xám css
plugin TinyPNG

TinyPNG sử dụng dịch vụ TinyJPG và TinyPNG (tài khoản miễn phí cho phép bạn nén khoảng 100 hình ảnh mỗi tháng) để tối ưu hóa hình ảnh JPG và PNG của bạn. Nó sẽ tự động nén hình ảnh mới và nén hàng loạt hình ảnh hiện có của bạn. Nó sẽ chuyển đổi CMYK sang RGB để tiết kiệm dung lượng. Nó sẽ nén hình ảnh JPEG lên đến 60% và hình ảnh PNG lên đến 80% mà không làm giảm chất lượng hình ảnh. Nó không có giới hạn kích thước tệp

Hình ẢnhTái Chế

Hình ảnh màu xám css
ImageRecycle – Plugin tối ưu hóa hình ảnh & PDF

Plugin ImageRecyle là trình tối ưu hóa hình ảnh và PDF tự động. Plugin này không chỉ tập trung vào việc nén hình ảnh mà còn tập trung vào các tệp PDF. Một tính năng thực sự tiện dụng là khả năng đặt kích thước tệp tối thiểu để nén. Ví dụ: nếu bạn có hình ảnh có kích thước 80 KB, bạn có thể yêu cầu nó tự động loại trừ chúng khỏi quá trình nén. Điều này đảm bảo hình ảnh và tệp không bao giờ bị nén quá nhiều. Nó cũng bao gồm tối ưu hóa hàng loạt và tự động thay đổi kích thước hình ảnh. Ghi chú. Họ có bản dùng thử miễn phí 15 ngày, nhưng đây là dịch vụ cao cấp và hình ảnh được tải lên và nén bằng máy chủ của họ. Họ không tính phí theo tháng mà tính phí theo tổng số hình ảnh được nén, bắt đầu từ 10 đô la cho 10.000

EWWW Trình tối ưu hóa hình ảnh

Hình ảnh màu xám css
EWWW Trình tối ưu hóa hình ảnh

Trình tối ưu hóa hình ảnh EWWW giúp bạn làm cho hình ảnh của mình nhỏ hơn và trang web của bạn nhanh hơn với ít rắc rối hơn. Không có giới hạn kích thước và nhiều tính linh hoạt cho người dùng nâng cao, bạn có thể sử dụng các giá trị mặc định hoặc tùy chỉnh hoàn toàn plugin theo ý thích của mình

Chế độ miễn phí cho phép nén JPG và chuyển đổi WebP không giới hạn và rất phù hợp cho các trang web sở thích hoặc blog mới bắt đầu. Tất cả người dùng EWWW IO có thể sử dụng Trình tối ưu hóa hàng loạt để nén hình ảnh hiện có của họ hoặc sử dụng chế độ danh sách Thư viện phương tiện để chọn và chọn hình ảnh cụ thể để nén. Các thư mục bổ sung có thể được quét để đảm bảo mọi hình ảnh trên trang web của bạn đều được tối ưu hóa đúng cách

EWWW IO thậm chí còn cho phép bạn chuyển đổi hình ảnh của mình sang các định dạng thế hệ tiếp theo như WebP hoặc tìm định dạng hình ảnh tốt nhất cho một hình ảnh với các tùy chọn chuyển đổi đa định dạng

API nén cao cấp cho phép bạn nâng cấp độ nén lên một cấp độ hoàn toàn mới mà không làm giảm chất lượng và tiết kiệm trung bình 50%. Nó cũng mở khóa nén PDF và bao gồm các bản sao lưu hình ảnh trong 30 ngày tiện lợi. Với Easy IO CDN tùy chọn, hình ảnh được tự động nén, chia tỷ lệ để phù hợp với trang và kích thước thiết bị, tải chậm và chuyển đổi sang định dạng WebP thế hệ tiếp theo

Tối ưu hóa hình ảnh cho Web Case Study

Chúng tôi đã quyết định thực hiện các thử nghiệm và nghiên cứu điển hình nhỏ của riêng mình để cho bạn thấy mức độ tối ưu hóa hình ảnh của bạn cho web có thể ảnh hưởng đến tốc độ tổng thể của trang web WordPress của bạn như thế nào

JPG không nén

Trước tiên, chúng tôi đã tải 6 tệp JPG không nén, tất cả đều có kích thước trên 1 MB, lên trang web thử nghiệm của chúng tôi. (Xem các JPG gốc không nén). Sau đó, chúng tôi đã chạy 5 bài kiểm tra thông qua Pingdom và lấy điểm trung bình. Như bạn có thể thấy từ bài kiểm tra tốc độ bên dưới, tổng thời gian tải của chúng tôi là 1. 55 giây và tổng kích thước trang là 14. 7MB

Hình ảnh màu xám css
Kiểm tra tốc độ với JPG không nén

JPG nén

Sau đó, chúng tôi đã nén các tệp JPG bằng cách sử dụng plugin Imagify WordPress, sử dụng “cài đặt tích cực. ” (Xem các tệp JPG nén mới, trông vẫn đẹp như cũ). Sau đó, chúng tôi đã chạy 5 bài kiểm tra thông qua Pingdom và lấy điểm trung bình. Như bạn có thể thấy từ bài kiểm tra tốc độ bên dưới, tổng thời gian tải của chúng tôi đã giảm xuống còn 476 mili giây và tổng kích thước trang đã giảm xuống còn 2. 9 MB. Tổng thời gian tải của chúng tôi đã giảm 54. 88% và kích thước trang đã giảm 80. 27%

Hình ảnh màu xám css
Kiểm tra tốc độ với JPG nén

Hầu như không có tối ưu hóa nào khác mà bạn có thể thực hiện trên trang web của mình để giúp bạn giảm hơn 50% thời gian tải. Đó là lý do tại sao tối ưu hóa hình ảnh rất quan trọng, quá trình trên hoàn toàn được tự động hóa bởi plugin. Đó là một cách tiếp cận thực tế để có một trang web WordPress nhanh hơn

Tối ưu hóa ấn tượng duy nhất khác mà bạn có thể thực hiện là thay đổi máy chủ của mình. Nhiều khách hàng chuyển sang Kinsta thấy tốc độ tăng hơn 45%. Hãy tưởng tượng chuyển sang Kinsta và tối ưu hóa hình ảnh của bạn

Bằng cách tối ưu hóa hình ảnh của bạn, cho dù đó là sử dụng công cụ chỉnh sửa ảnh hay plugin WordPress, bạn cũng có thể khắc phục cảnh báo “Tối ưu hóa hình ảnh” mà bạn nhận được trong Google PageSpeed ​​​​Insights (như hình bên dưới. )

Hình ảnh màu xám css
Cảnh báo PageSpeed ​​Insights tối ưu hóa hình ảnh

Nếu bạn có các cảnh báo tối ưu hóa khác từ các công cụ kiểm tra tốc độ, hãy nhớ xem bài đăng của chúng tôi trên Google PageSpeed ​​​​Insights và hướng dẫn chuyên sâu về Pingdom của chúng tôi

Chúng tôi đã sử dụng kiến ​​thức về quản lý trang web hiệu quả trên quy mô lớn và biến nó thành một khóa học điện tử và video. Nhấp vào đây để tải xuống Hướng dẫn quản lý hơn 40 trang web WordPress năm 2020

Sử dụng SVG

Một đề xuất khác là sử dụng các tệp SVG cùng với các hình ảnh khác của bạn. SVG là một định dạng vector có thể mở rộng, hoạt động tuyệt vời cho logo, biểu tượng, văn bản và hình ảnh đơn giản. Đây là một vài lý do tại sao

  • Các SVG có thể tự động mở rộng trong cả trình duyệt và công cụ chỉnh sửa ảnh. Điều này tạo nên giấc mơ của các nhà thiết kế web và đồ họa
  • Google lập chỉ mục các SVG, giống như cách Google lập chỉ mục cho các tệp PNG và JPG, vì vậy bạn không phải lo lắng về SEO
  • Theo truyền thống, SVG có kích thước tệp nhỏ hơn (không phải luôn luôn) so với PNG hoặc JPG. Điều này có thể dẫn đến thời gian tải nhanh hơn

Genki đã viết một bài báo tuyệt vời khi anh ấy so sánh kích thước của SVG với PNG với JPEG. Dưới đây là một vài điểm rút ra từ thử nghiệm của anh ấy, trong đó anh ấy so sánh ba loại hình ảnh khác nhau

JPG (kích thước được tối ưu hóa. 81. 4KB)

Hình ảnh màu xám css
hình ảnh JPG

PNG (kích thước được tối ưu hóa. 85. 1KB)

Hình ảnh màu xám css
hình ảnh PNG

SVG (kích thước được tối ưu hóa. 6. 1KB)

Hình ảnh màu xám css
hình ảnh SVG

Như bạn có thể thấy ở trên, SVG có kích thước tệp giảm 92. 51% khi so sánh với JPG. Và khi so sánh với PNG, 92. 83%. Xem hướng dẫn của chúng tôi về cách sử dụng SVG trên trang web WordPress của bạn

Thực hành tốt nhất

Dưới đây là một số phương pháp hay nhất về cách tối ưu hóa hình ảnh cho web

  • Nếu sử dụng plugin WordPress, hãy sử dụng plugin nén và tối ưu hóa hình ảnh bên ngoài trên máy chủ của họ. Điều này, đến lượt nó, làm giảm tải trên trang web của riêng bạn
  • Sử dụng hình ảnh vector bất cứ khi nào có thể cùng với PNG và JPG của bạn
  • Sử dụng CDN để cung cấp hình ảnh của bạn nhanh chóng cho khách truy cập trên toàn cầu. Kinsta CDN có tính năng thu nhỏ mã được tích hợp trực tiếp vào bảng điều khiển MyKinsta. Điều này cho phép khách hàng của Kinsta dễ dàng kích hoạt tính năng thu nhỏ CSS và JavaScript tự động chỉ bằng một cú nhấp chuột đơn giản
  • Xóa dữ liệu hình ảnh không cần thiết
  • Cắt khoảng trắng và tạo lại nó bằng cách sử dụng CSS để cung cấp phần đệm
  • Sử dụng các hiệu ứng CSS3 càng nhiều càng tốt
  • Lưu hình ảnh của bạn ở kích thước phù hợp. Mặc dù hãy nhớ rằng WordPress hiện hỗ trợ hình ảnh phản hồi để phục vụ chúng mà không cần thay đổi kích thước chúng bằng CSS
  • Luôn luôn sử dụng. định dạng tệp ico cho favicon của bạn
  • Sử dụng phông chữ web thay vì đặt văn bản trong hình ảnh – chúng trông đẹp hơn khi được thu nhỏ và chiếm ít không gian hơn
  • Chỉ sử dụng hình ảnh raster cho các cảnh có nhiều hình dạng và chi tiết
  • Giảm độ sâu bit xuống bảng màu nhỏ hơn
  • Sử dụng nén mất dữ liệu nếu có thể
  • Thử nghiệm để tìm cài đặt tốt nhất cho từng định dạng
  • Sử dụng GIF nếu bạn cần hoạt ảnh. (nhưng nén ảnh GIF động của bạn)
  • Sử dụng PNG nếu bạn cần độ chi tiết cao và độ phân giải cao
  • Sử dụng JPG cho ảnh chung và ảnh chụp màn hình
  • Xóa mọi siêu dữ liệu hình ảnh không cần thiết
  • Tự động hóa quy trình càng nhiều càng tốt
  • Trong một số trường hợp, bạn có thể muốn lười tải hình ảnh để hiển thị trang đầu tiên nhanh hơn
  • Lưu hình ảnh dưới dạng "được tối ưu hóa cho web" trong các công cụ như Photoshop
  • Sử dụng WebP trong Chrome để phân phối hình ảnh nhỏ hơn
Đừng quên tối ưu hóa hình ảnh của bạn, nếu không, trang web WordPress của bạn có thể bị chậm. Và bạn biết 'chậm' khó chịu như thế nào. 🐌Nhấp để Tweet

Khi bạn đã định dạng hình ảnh của mình để có hiệu suất tốt hơn và tuân theo các phương pháp hay nhất, trang web của bạn sẽ được các công cụ tìm kiếm, trình duyệt và mạng yêu thích hơn và sẽ tải nhanh hơn cho người đọc của bạn. Ồ, và đảm bảo xem hướng dẫn của chúng tôi về liên kết nóng để ngăn mọi người lấy cắp hình ảnh và băng thông của bạn

Bạn đã định dạng hình ảnh của mình để có hiệu suất tốt hơn chưa?


Tiết kiệm thời gian, chi phí và tối đa hóa hiệu suất trang web với

  • Trợ giúp tức thì từ các chuyên gia lưu trữ WordPress, 24/7
  • Tích hợp doanh nghiệp Cloudflare
  • Tiếp cận đối tượng toàn cầu với 35 trung tâm dữ liệu trên toàn thế giới
  • Tối ưu hóa với Giám sát hiệu suất ứng dụng tích hợp của chúng tôi

Tất cả những điều đó và hơn thế nữa, trong một gói không có hợp đồng dài hạn, hỗ trợ di chuyển và bảo đảm hoàn tiền trong 30 ngày. Kiểm tra các gói của chúng tôi hoặc nói chuyện với bộ phận bán hàng để tìm gói phù hợp với bạn