Giảm dung lượng ảnh trên WordPress với plugin TP Image Optimizer

Nen anh cho website - anh minh hoa

Nén ảnh cho website – ảnh minh họa

Hôm nay mình sẽ chia sẻ với anh em về cách giảm dung lượng ảnh (nén ảnh) cho website WordPress. Mục đích của nó thì chắc anh em cũng biết rồi đúng không nào ? Mà thôi sẵn nói luôn cho anh em nào chưa biết 😄

Giảm dung lượng ảnh là làm gì vậy?

Giảm dung lượng ảnh hay còn gọi là nén ảnh, là việc chúng ta dùng công cụ nào đó làm giảm kích thước tập tin của file ảnh nhưng không làm giảm chất lượng ảnh đi quá nhiều.

Ví dụ một ảnh có kích thước 100kb thì sau khi nén nó có thể còn 30kb, như vậy việc tải một trang web có 10 ảnh 100kb chắc chắn sẽ lâu hơn 10 ảnh 30kb đúng không nào ?

Web tải trang nhanh thì người dùng thích, Google thích và được đánh giá cao, dễ lên tóp hơn, điểm Google page speed insight cũng cao lên nữa, thích quá còn gì 😊

Làm cách nào để giảm dung lượng ảnh ?

Có bao nhiêu cách mình ko biết, hồi giờ mình xài 02 cách để giảm như sau:

  • Nén thủ công: Cách này khá đơn giản, trước khi úp hình lên website thì mình dùng cái công cụ nén ảnh trực tuyến này để giảm dung lượng là Optimizilla .Cái này làm bằng tay, để nén ảnh bạn phải úp load và nén từng cái một nên mình gọi là nén thủ công.
  • Nén hàng loạt: Cái này mình chỉ cần cài plugin có tính năng nén ảnh vào, cho nó chạy và đợi thành quả thôi. Tất nhiên trong bài viết này mình chỉ nói về cách nén ảnh hàng loạt thôi, cách trên các bạn tự mò nhé !😄

Nén ảnh sử dụng plugin TP Image Optimizer

Plugin để nén khá nhiều, bao gồm cả miễn phí và trả phí. Và ở đây mình sẽ giới thiệu các bạn một plugin nén ảnh mạnh mẽ và hoàn toàn miễn phí có tên là TP Image Optimizer, phải nói là rất tuyệt vời .

Plugin này được phát triển bởi bác Thành Nguyễn và được chia sẻ lên kho plugin của WordPress trong thời gian gần đây và được rất nhiều anh em ủng hộ cũng như đánh giá tích cực.

Để tải về, anh em cứ gõ trong khung tìm kiếm plugin tên TP Image Optimizer là thấy thôi, sau khi cài và kích hoạt thì giao diện nó sẽ trông như thế này:

Giao dien plugin TP Image Optimizer

Giao diện plugin TP Image Optimizer

Chỉ một cú click chuột thôi là nó sẽ nén tất cả các ảnh mà bạn đã úp lên trong thư viện. Nhưng trước khi nén bạn có thể tùy chọn chất lượng ảnh đầu ra ở mục Quality setting như hình bên dưới.

Tuy chon chat luong anh sau khi nen

Tùy chọn chất lượng ảnh sau khi nén

Tác giả có để 4 cấp chất lượng mà bạn có thể lựa chọn, chất lượng càng cao thì mức chênh lệch kích thước tập tin càng nhỏ, ví dụ ảnh gốc 100kb, nén mức standard thì xuống 30kb, nén very high thì 100kb xuống còn 70kb chẳng hạn.

  • Standard: chất lượng tiêu chuẩn (mặc định);
  • Medium: chất lượng bình thường;
  • High:  chất lượng cao;
  • Very high: chất lượng rất cao:

Bên dưới nó là mục Size setting, ở mục này chúng ta sẽ lựa chọn các loại ảnh nào cần nén. Cái nào muốn nén thì tick vào. Ví dụ bạn không muốn nén ảnh thumbnail (featured image) thì bỏ tick nó đi. Vì nếu nén ảnh này nữa nó sẽ mờ và không đẹp. Tương tự cho các loại ảnh khác, tùy theme, plugin bạn đang cài mà số loại ảnh cũng khác nhau.

Anh em nhớ là sau khi chọn thì nhấn vào Update để các thiết lập được xác nhận nhé ! Như vậy là xong phần tùy chọn rồi, bây giờ để bắt đầu nén thì bạn chỉ cần nhấn vào cái nút ONE CLICK OPTIMIZE và ngồi đợi thôi.

Bên dưới nó có một tùy chọn nữa là Fore Re-Optimize, (nén lại tất cả các ảnh) cái này dùng trong trường hợp bạn lo lắng nó làm giảm chất lượng ảnh quá mức nên tiến hành nén ảnh theo từng cấp chất lượng, nếu tùy chọn nén Very high chưa có nhiều biến động thì bạn tiếp tục chọn nén lại lần lược với các cấp chất lượng thấp hơn.

Cap nhat anh khi moi up anh len website

Cập nhật ảnh khi mới úp lên website

Với việc nén ảnh như thế này thì đã tiết kiệm được kha khá không gian lưu trữ của hosting / Server của các bạn rồi đấy. Nếu bạn có 1GB hình ảnh mà nó nén xuống còn 300mb thì ngon quá rồi còn gì. Web chạy nhanh hơn nữa chứ 😅

Đấy, thì bài này mình chia sẻ đến các bạn 02 cách nén ảnh cho website. Nếu không thích nén tự động thì làm cách 1, nén thủ công. Còn muốn khỏe người thì chơi cách thứ 02, xài plugin TP Image Optimizer cho tiện. Anh em có điều gì thắc mắc hoặc phát biểu cảm nghĩ về plugin này, hãy để lại ý kiến bên dưới nhé ! Thén kiu 😜

Bản cập nhật plugin TP Image Optimizer:

Phiên bản: 1.0.8:

  • Sửa lỗi token
  • Cho phép nén ảnh mà không cần giữ nguyên trình duyệt. Tức là đưa ra lệnh nén và có thể tắt máy tính đi ngủ, quá trình nén vẫn được tiếp tục;
  • Tự động cập nhật danh sách ảnh hiện có mà không cần nhấn chữ update như trước đây.
  • Và sửa một số lỗi phát sinh khác

Phiên bản: 1.0.7:

  • Thêm trường nhập mã giảm giá (coupon) khi nâng cấp tài khoản lên trả phí và sử dụng được nhiều tính năng nén ảnh hơn;
  • Thêm trạng thái người dùng (miễn phí hay có phí);
  • Đã có thể nén được ảnh định dạng PNG;
  • Và sửa một số lỗi phát sinh khác.
Giảm dung lượng ảnh trên WordPress với plugin TP Image Optimizer
4.2 (83.03%) 66 votes
Nếu bạn thấy bài viết này hữu ích thì có thể chia sẻ nó qua:

62 bình luận

  • TruyenHot.vn ( 45 bình luận )

    Cách giảm dung lượng hình ảnh trên web của mình là :
    1. Giảm dung lượng + đóng dấu ảnh ngay trên pc trước khi upload lên web.
    2. Sử dụng CDN để giảm tải , cho ảnh load nhanh, nếu ảnh bắt buộc không cần giảm dung lượng thì đây là cách tối ưu nhất. Hiện giờ CDN mình thấy giá cũng kha khá là rẻ, nạp 1 cái card 100k thì web xài cả năm ( Đối với ít hình ảnh).
    Việc sử dụng các plugins nén hình ảnh có ưu điểm tuy nhiên cũng như các nhược điểm có thể nói đến như: chiếm 1 chỗ trong kho plugins, các plugins miễn phí thì có giới hạn, chiếm bớt 1 phần sức mạnh hosting, vps.Tốn time tối ưu hình ảnh….

    • Hocban.vn ( 1586 bình luận )

      Haha, cảm ơn bác đã chia sẻ giải pháp ! Khá công phu, hiện tại e ít ảnh nên tạm dừng xài plugin bác ạ.

      Ngày xưa xài plugin này là e nén mấy trăm ảnh mà trước đó chưa nén, phải nói là hơi bị sướng.

      Nói chung web ít ảnh thì nén thủ công thôi chứ cũng ko cần. Web nhiều thành viên, nhiều ảnh, sợ họ ko nén ảnh thì mình có thể xài plugin, vì đã đăng lên rồi mà tải về nén thủ công rồi mệt lắm 😀

  • Vỹ Spirit ( 78 bình luận )

    Bữa em có dùng thử mà chưa hài lòng lắm nên dùng lại EWWW rồi, ko biết giờ update có ngon hơn ko 😀

    • Hocban.vn ( 1586 bình luận )

      Lúc đầu em nén quả mấy trăm ảnh (trước đó chưa nén) là chính thôi chứ giờ e cũng ko để ý lắm :v Nói chung là dạo này (tháng 8-9/2017 cũng hay phát sinh một số lỗi).

    • Vỹ Spirit ( 78 bình luận )

      Em vẫn thấy EWWW tốt 😀 cũng đã dùng qua WP Smush rồi mà vẫn quay về với EWWW 😀

    • Hocban.vn ( 1586 bình luận )

      Thằng đó nhớ ngày xưa em cũng có xài qua mà ko nhớ nó có gì hạn chế mà không xài nữa 😀 Giờ em nén ảnh trước khi úp bác ạ, do ít đăng bài nhiều ảnh nên cũng chưa cần thiết 😀

    • Vỹ Spirit ( 78 bình luận )

      Nhu cầu của em thì chả thấy có hạn chế gì cả.
      Em cũng nén ảnh trước khi up nè, nhưng theme nó đẻ thêm nhiều ảnh khác quá nên vẫn phải dùng 🙁

    • Hocban.vn ( 1586 bình luận )

      Ò nhỉ, theme bác đang xài một ảnh nó đẻ ra làm mấy cái nữa ? :v

    • Vỹ Spirit ( 78 bình luận )

      Hơn 11 cái nha bác 😀 chỉ tính cái ảnh đầu bài viết vì nó đẻ nhiều nhứt :v

    • Hocban.vn ( 1586 bình luận )

      Khiếp thế bác, của em nó cắt ra 2 cái nữa, tổng cộng có 3 ảnh thôi à 😀 Em mới viết cái bài về vụ cắt ảnh trong mục Thủ Thuật WordPress, bác vào nghía thử 😀

    • Vỹ Spirit ( 78 bình luận )

      Kệ nó chứ giờ em đâu biết làm sao 😀

  • Sabo ( 22 bình luận )

    Dùng smush nén ảnh khi upload e thấy cũng ổn.

    • Hocban.vn ( 1586 bình luận )

      Cách này áp dụng cho việc lỡ úp lên quá nhiều ảnh mà chưa nén thì oke nè, còn web nào ít ảnh thì cứ nén thủ công trước khi úp là được 😀

  • ( 5 bình luận )

    Mấy cái plugin ngon bây giờ bắt trả phí hết rồi 🙁

    • Hocban.vn ( 1586 bình luận )

      Hề hề, đó là một hướng đi tốt đó bác. Vì nếu nhu cầu không lớn lắm thì chỉ cần dùng bản Free là đủ rồi, nhưng nếu site vài ngàn ảnh chưa nén trước đó thì cần đầu tư lắm chứ 😀

  • kien ( 12 bình luận )

    Cá nhân em thì thường nén ảnh thủ công trước khi up hơn.
    Hoặc quên thì vào PageSpeed Insights xem nó cảnh báo gì thì lấy về up trực tiếp vô host, cũng không mất thời gian mấy :p

    • Hocban.vn ( 1586 bình luận )

      Nếu ảnh ít quá thì không cần xài plugin chi cho mệt bác ạ, cứ nén thủ công rồi úp lên thôi. Còn nếu như site nhiều ảnh hoặc ảnh trước đây úp ảnh nhiều nhưng chưa có nén thì cái này xài rất ngon bác ạ. Nếu có hơn 1000 ảnh mà ngồi tải về, nén thủ công rồi úp lên lại thì hơi chua 😀

    • kien ( 12 bình luận )

      Ý em là có thể download cái optimized của PageSpeed Insights về rồi up hàng loạt lên host ấy. Chừng 100 ảnh thì em thử rồi, 1.000 ảnh thì chưa, hehe

    • Hocban.vn ( 1586 bình luận )

      Ò ò :v haha, hóa ra bác chơi chiêu này, cũng được. Nhưng mà trường hợp ảnh đã úp lên rồi mà quá nhiều thì nên dùng plugin vì nó sẽ nén tự động, tiết kiệm rất nhiều thời gian đó bác 😀

  • Duy Nam ( 1 bình luận )

    Mình đã update lên bản mới nhất mà sao vẫn không nén được ảnh png nhỉ?

  • iHuongDan Blog ( 1 bình luận )

    Quá tuyệt luôn. Hôm trước tải rồi mà chưa có sài. Hnay vào seomxh thấy share e và đc lại thấy khá ok. Mai test thử cho ihuongdan.vn thôi haha

    • Hocban.vn ( 1586 bình luận )

      Em nhớ bác bình luận mấy lần rồi mà, nay dùng níc khác nữa à ?

      Xài đi bác, web sẽ nhanh lên đáng kể đó. Em chạy một lần rồi, giờ khôn chạy nữa. Giờ mà úp ảnh lên thì tick vào những ảnh thật sự cần nén thôi.

  • NAD ( 32 bình luận )

    Thêm widget bài mới nữa thớt ơi, để ae thi thoảng ghé thăm còn biết vào chém 😀

  • Chuyên trang học luật ( 19 bình luận )

    Ukm mình cũng đang dùng plusgin này, khá ok nhưng thấy nó vẫn ko bằng WP SMUSH

  • Hữu Thuần ( 6 bình luận )

    Nén ở ngoài đi các bác cài vô chỉ được thêm cái Plugin 😀

    • Hocban.vn ( 1586 bình luận )

      Nếu trước giờ không chú trọng việc nén ảnh như em (những tháng đầu) thì nhiều ảnh nguyên gốc nặng phết. Cách này sẽ giải quyết được vấn đề đó bác ạ 😀

  • Phước Đt ( 26 bình luận )

    Hay đó bác. Chứ web em ảnh nặng lắm rồi.

    • Hocban.vn ( 1586 bình luận )

      Triển đi nào, chơi cái này nhẹ hơn khá nhiều đấy. Coi chứ nén mạnh quá chất lượng ảnh nó giảm quá thì ko ngon.

  • Học Luật ( 19 bình luận )

    Mới dùng wp, giờ mới biết nó có chức năng hay vậy các bác ạ, hocban.vn vs hocluat.vn của công ty em nghe nó cứ thân quen thế nào ấy

    • Hocban.vn ( 1586 bình luận )

      Xài thử đi bác xem tình hình có cải thiện hơn không nhé !

      Vụ tên miền có thân quen vì nó có các điểm chung:

      + Chung từ “học”
      + Từ thứ 02 cùng là thanh nặng. “Luật” và “Bạn”

      Do đó bác đọc sẽ thấy thân quen :v

    • Phước Đt ( 26 bình luận )

      Em có cái tên miền hocviec.com bác nào mua lại đầu cơ thì liên hệ em nhé!

  • Hoàng Vũ ( 51 bình luận )

    Dùng tinyPNG cho gọn lẹ :v

  • V An. ( 4 bình luận )

    Mọi thứ đều rất tuyệt, chỉ trừ điểm là nó chưa hỗ trợ nén PNG. Hi vọng tác giả plugin sẽ bổ sung sớm.

    • Hocban.vn ( 1586 bình luận )

      Đã sửa lại đoạn bình luận nhầm theo yêu cầu cậu nhé ! Mình chưa thử nó với ảnh PNG luôn, để lấy cái site demo trên localhost test thử thế nào. Hề hề !

      Có thể tác giả sẽ theo dõi post này. Anh em thấy có điểm nào góp ý cứ nhiệt tình nhé !

    • ( 53 bình luận )

      Đúng vậy Tịnh Nguyễn ak, PNG nó không hỗ trợ mới đau.
      Cái này có lẽ dùng kết hợp với tinyPNG.com trong thời gian chờ đợi tác giả phát triển.

    • Hocban.vn ( 1586 bình luận )

      Ò ò, em xài cũng khá nhiều ảnh JPG. Nhưng mà không sao, để em báo lại với tác giả để cậu ấy thêm tính năng này. Hy vọng trong bản cập nhật sắp tới sẽ bổ sung, sửa đổi và hoàn thiện hơn.

  • Lang thang Web ( 53 bình luận )

    Cái này so sánh với nén bằng tinyPNG thì thế nào nhỉ?

    • Hocban.vn ( 1586 bình luận )

      Em chưa xài cái đó nên cũng không oánh giá được bác ạ. Hình như cái tinyPNG là có giới hạn số lượng ảnh nén đúng không nhỉ ?

    • Lang thang Web ( 53 bình luận )

      Nó giới hạn số lượng ảnh mỗi lần up là 20 và file ảnh ko quá 5 mb. Cái này gần như là ko giới hạn. Nén ảnh từ 60-80% dung lượng.

    • Hocban.vn ( 1586 bình luận )

      À, như vậy thì cái plugin TP Image Optimizer này mạnh mẽ hơn rồi bác nhé ! Nó như một phiên bản trả phí nhưng lại không tính tiền thôi 😂

    • ( 53 bình luận )

      Anh đã cài và test thử rồi. Kết quả như sau:

      1. Ảnh 1: dung lượng 874 kB
      + TP image optimizer: nén 46%
      + tinyPNG: nén 60%

      2. Ảnh 2: dung lượng 93 kB
      + TP image optimizer: nén 24.5%
      + tinyPNG: nén 50%
      –> trong cả 2 trường hợp, tinyPNG đều nén tôt hơn nhiều.

    • Hocban.vn ( 1586 bình luận )

      Bác xem chớ nó có mấy cấp chất lượng ảnh nén trong đó nữa ấy. Chất lượng cao thì kích thước tập tin của ảnh sau khi nén giảm ko nhiều và ngược lại.

      Bác xem lại lần nữa, để có gì em báo lại với tác giả phát triển thêm.

    • ( 53 bình luận )

      Hi em, lúc nãy anh quên chọn chế độ nén –> chọn lại chế độ very high thì kết quả như sau:
      1. Ảnh 1: dung lượng 874 kB
      + TP image optimizer: nén 68%
      + tinyPNG: nén 60%

      2. Ảnh 2: dung lượng 93 kB
      + TP image optimizer: nén 60%
      + tinyPNG: nén 50%

      –> nếu chọn very high thì TP image optimizer nén tốt hơn!

    • Hocban.vn ( 1586 bình luận )

      Haha, thế là ngon rồi ! Bác cũng chịu khó ngâm cứu, vọc vạch gớm chớ bộ. Rất thích hợp để làm các bài chủ đề review, so sánh này nọ đó ! Như dịch vụ hosting chẳng hạn 🙂

    • ( 53 bình luận )

      Thank em. Hôm nay anh có làm bài so sánh mấy cái plug in nén ảnh, cũng vô tình thôi. Giờ mới phát hiện ra thằng này là tốt nhất. Nếu được anh xin phép bổ sung thằng này vào bài viết của anh nhé, có ghi rõ nguồn gốc xuất xứ + tôn vinh đàng hoàng

    • Hocban.vn ( 1586 bình luận )

      Bác cứ lấy đi, cứ thoải mái. Xong nhớ gửi link qua đây nhé ! Để anh em có đọc qua bình luận còn vào xem bài của bác nữa. Em hóng bài viết của bác 😜

    • ( 53 bình luận )

      Ok em,
      Đã có bài đây này:
      https://langthangweb.com/ban-nen-anh-cho-blog-wordpress-bang-gi/
      Anh em vào bình luận chém gió nhá.

    • Hocban.vn ( 1586 bình luận )

      Chấm cái… ! Để em vào xem thử thế nào nào 🙃 kaka

  • Lê Thắng ( 1 bình luận )

    Dùng cái này sướng thật, cám ơn bác nhé, mình cũng chấm qua trên cộng đồng wordpress mà chưa dùng

    • Hocban.vn ( 1586 bình luận )

      Ahihi, bác có cảm ơn thì cảm ơn tác giả plugin, bác Thành Nguyễn hoặc đánh giá 5 sao trên WordPress.org để ủng hộ bác ấy 😜

      Xài thử đi, có gì chia sẻ thêm quan điểm cho anh em tham khảo với ạ !

Viết bình luận theo mẫu

(Các mục bắt buộc được đánh dấu * )