Sử dụng WP Smush.it nén ảnh wordpress tối ưu tốc độ tải trang

WordPress Plugin

{ 18 comments }

Hình ảnh là một phần cực kỳ quan trọng trong mỗi bài viết trên các trang tin điện tử, các diễn đàn, các blog… Tuy nhiên sử dụng hình ảnh thế nào cho chuẩn và làm sao để hình ảnh có kích cỡ nhỏ nhất nhưng lại đạt chất lượng nhất mới là vấn đề quan trọng.

WP Smush.it Plugin

WP Smush.it Plugin

Trong một bài viết trước mình đã viết về cách tối ưu hóa hình ảnh để giảm tối thiểu thời gian tải trang web. Hôm nay mình tiếp tục giới thiệu tới các bạn Plugin nén ảnh WP Smush.it cực kỳ hữu ích để các bạn tối ưu toàn bộ các hình ảnh đã tải lên trước đó.

1. Giới thiệu Plugin WP Smush.it

WP Smush.it được phát triển bởi WP-MUDEV một trong những nhà phát triển Theme, Plugin hàng đầu cho WordPress. Plugin này sử dụng tính năng nén ảnh và tối ưu ảnh của Yahoo Smush.it – Một dịch vụ nén ảnh trực tuyến được phát triển bởi chính Yahoo và được các developer sử dụng các hàm API tích hợp vào WordPress để nén ảnh giúp ảnh có dung lượng nhỏ nhất nhưng vẫn đảm bảo chất lượng.

2. Tính năng chính của WP Smush.it

  • Loại bỏ các meta data của file ảnh có định dạng JPEGs
  • Nén ảnh JPEG một cách tối ưu nhất
  • Chuyển định dạng ảnh GIFs sang PNGs
  • Loại bỏ các gam màu thừa từ ảnh.
Xem thêm  Điều hướng Wordpress Dashboard bằng phím tắt với WP Hotkeys

[wp-pic type=”plugin” slug=”wp-smushit” align=”right” ]

3. Sử dụng WP Smush.it nén ảnh

Việc đầu tiên là bạn tải Plugin WP Smush.it về tại đây. Sau đó vào bảng quản trị để cài đặt và kích hoạt Plugin.
Sau khi được kích hoạt Plugin sẽ chỉ hoạt động trong khu vực Media và trang đăng bài viết. Có hai cách để bạn nén ảnh:

Nén từng ảnh trong thư viện

Để thực hiện thao tác này bạn truy cập vào Media–>Library Nhìn sang phía bên phải của thư viện ảnh bạn sẽ thấy có thêm một cột Smush.it Với các hình ảnh chưa được nén sẽ hiển thị Not Processed – Smush.it now! Và các hình ảnh đã được nén sẽ hiển thị Reduced xx% (xxKB) – Re-smush.

Nén ảnh với WP Smush.it

Nén ảnh với WP Smush.it

Nhấn Smush.it now! để bắt đầu nén hình ảnh. Nhấn Re-smush để nén lại một lần nữa.

Nén toàn bộ ảnh đã tải lên

Với thao tác này toàn bộ hình ảnh đã tải lên trước đó sẽ được nén. Ngoại trừ những hình ảnh đã được nén trước đó trong Library.
Qui trình làm việc của công cụ này:

  • Yahoo sẽ download toàn bộ hình ảnh chưa được nén thông qua URL
  • Yahoo sẽ nén toàn bộ ảnh và trả về một bản mới của hình ảnh đã được nén thông qua URL
  • Hình ảnh mới sẽ được tải về và thay thế bản gốc của hình ảnh trước đó.

Các hình ảnh đạt đủ điều kiện sau sẽ được nén:

  • Ảnh có dung lượng nhỏ hơn 1Mb.
  • Ảnh phải được truy cập thông qua giao thức http chứ không phải https. Nếu website của bạn đang bật ssl thì vui lòng disable trước khi thực hiện.
  • Ảnh phải được cho phép hiển công cộng. Tức là hiển thị công khai trên web chứ không phải từ máy tính của bạn.
  • Ảnh phải được lưu trữ trong thư viện ảnh của website. Plugin này không thể cập nhật các ảnh được lưu trữ bởi các dịch vụ CDN.
  • Cuối cùng mình khuyến khích các bạn nên download toàn bộ ảnh về máy tính trước khi thực hiện.
Xem thêm  Thiết lập trạng thái hết hạn tự động cho bài chia sẻ Coupon

Sau khi đã đảm bảo những yêu cầu trên được thực hiện. Bạn hãy nhấn Rull all my images through WP Smush.it right now để bắt đầu.

Nén toàn bộ ảnh trên Media Library

Nén toàn bộ ảnh trên Media Library

Đợi một khoảng thời gian tùy thuộc vào số lượng ảnh có trên Media Library của bạn sau khi kết thúc bạn sẽ thấy hiển thị thông tin:

Kết thúc nén ảnh

Kết thúc nén ảnh

Để bật chức năng tự động nén ảnh khi upload thì bạn truy cập Settings–>Media ở phần Smush.it bạn chọn Automatically Process on upload và nhấn Save changes. Như vậy mỗi khi bạn upload, ảnh sẽ được WP Smush.it nén tự động.

Bật chức năng tự động nén ảnh

Bật chức năng tự động nén ảnh

Bạn sẽ không còn phải lo ngại về việc hình ảnh chưa được tối ưu và quá cồng kềnh nữa. Điều này sẽ làm giảm Page Size đáng kể khi bạn load trang đó.
Nếu bạn không muốn dùng Plugin, không muốn nén tự động thì có thể dùng sử dụng Smush.it trực tuyến tại: Yahoo! Smush.it

Góp ý cho Tô Triều

  • Thien 03/09/2016, 19:42

    Cảm ơn bạn, plugins này hay nè

    Reply
  • Quang Pham 19/05/2016, 15:18

    cảm ơn anh nhiều , em có cái size hình ảnh nhiều quá nên load chậm như rùa , dùng cách này của anh có tiến triển hơn hẳn

    Reply
  • Nguyễn Khả 16/01/2015, 07:16

    Thanks bạn nhiều nha, mình làm bên BĐS hình ảnh nhiều, nên web cứ ì ạch ra ấy. Mình không thích dùng nhiều plugins , nhưng thật sự cái này đáng dùng !

    Reply
  • Luyen Tran 15/12/2014, 09:36

    Bài này được bạn ngoctu.net giới thiệu qua 🙂 Đang ngâm cứu, Web của mình cái thumnail cũng đến gần 50kb (180X180) phải xem tối ưu cho nó, chạy ỳ ạch quá chú à.

    Reply
  • Cao Minh 15/08/2014, 08:31

    Thay vì dùng Smush.it vì hay bị lỗi, mình dùng EWWW Image Optimizer. Bạn đánh giá 2 plugin này thế nào?
    EWWW Image Optimizer thì không bị lỗi khi upload, nhưng mình cảm giác không nén bằng Smush.it thì phải

    Reply
    • Hải Triều 15/08/2014, 13:17

      Nếu bị lỗi bạn cần kiểm tra lại xem có bị disable hàm nào của php hay không. Ngoài ra nếu ảnh hơn 1mb thì smushit cũng không nén đâu. Đó là điều trong bài cũng cảnh báo rồi mà. Plugin EWWW Image Optimizer mình chưa sử dụng nhưng Smushit là sự kết hợp của Yahoo và WPMU DEV nên cứ tin tưởng và xài thôi.

  • Cao Minh 13/08/2014, 11:48

    Bạn ơi cho mình hỏi tắt chức năng tự động nén khi upload của Smushit kiểu gì? Mình toàn bị báo lỗi http error.

    Reply
    • Hải Triều 13/08/2014, 23:32

      Chào Cao Minh
      Để tắt chức năng tự động nén khu upload của Smushit bạn vào Settings–>Media–>Use Smush.it on upload?–>Do not Process on upload.

  • Tran Ngoc Quy 10/06/2014, 21:52

    Cái này ngon nè trang mình nhiều hình ảnh cứ thấy chậm rề ah 🙂

    Reply
  • Thành Thái 06/03/2014, 23:31

    Trước mình đã dùng cái này, gặp phải vấn đề đó là khi viết bài, upload ảnh lên sau đó phải đợi rất lâu thì ảnh mới đc upload xong. Chính vì thế mà mình lại gỡ nó ra :-s

    Reply
    • Tô Hải Triều 07/03/2014, 09:22

      Bạn tắt chức năng nén ngay khi up load đi sđó vào media nén 1 loạt cho nhanh

  • Doan Duc Long 05/03/2014, 23:19

    đang có cái quan ngại, vớ được bài này như cá gặp nước. :)))

    Reply
  • Ngọc Tú 13/02/2014, 19:10

    Quá tuyệt anh ạ, Smush.It là plugin bắt buộc phải có cho website WordPress rồi 😀

    Reply
    • Tô Hải Triều 13/02/2014, 22:32

      Đúng vậy. Ko có nó là một thiếu sót cực lớn khi sử dụng wordpress

  • Thế Hùng 13/02/2014, 17:16

    Em thì dùng PTS lưu định dạng ảnh phù hợp rồi mới up lên 😀

    Reply
    • Tô Hải Triều 13/02/2014, 22:31

      Dùng pts nặng lắm. Nhưng dùng pts rồi dùng smush.it cũng ok.

  • Phạm Hữu Dư 13/02/2014, 06:36

    Cái này ngon nè, bài viết bên em thường chứa nhiều ảnh lắm 😀

    Reply
    • Tô Hải Triều 22/02/2014, 02:12

      Có nó lợi hẳn đó bác. Tiết kiệm được 1 mớ khi load trang. À quên. Bữa nào phải thỉnh giáo bác về Google Adsense