Tin tức WP Smush - Bài viết, hướng dẫn WP Smush

Hướng dẫn cài đặt và sử dụng WP Smush – plugin tối ưu hình ảnh hàng đầu hiện nay với vô số những tính năng mạnh mẽ cho website.

1. Kích hoạt WP Smush miễn phí

Trong phần quản trị WordPress, ta cần chuyển đến Plugins > Add New. Tiếp đến ở góc trên cùng bên phải, tìm kiếm ‘wp smush’ sau đó bạn sẽ nhận được một kết quả tương tự như hình mô tả dưới đây – Smush.
Nhấp vào nút Install Now, sau đó kích hoạt plugin Smush.

Hướng dẫn cài đặt và sử dụng plugin WP Smush (1)

Hướng dẫn kích hoạt plugin WP Smush

2. Hướng dẫn sử dụng plugin WP Smush

Sau khi kích hoạt plugin này, bạn sẽ thấy một mục menu mới là Smush ngay bên dưới phần Settings. Click vào mục menu này và đi tới Dashboard.

Khi sử dụng phiên bản miễn phí, bạn sẽ thấy thông báo ở trên cùng đề cập đến các quyền hạn của phiên bản pro mà bạn cần phải trả phí để sử dụng thêm các tính năng. Trong phần dưới đây, bạn có thể thấy rằng cài đặt plugin được sắp xếp thành 7 tab như sau:

Bulk Smush.
Directory Smush.
Integrations.
Lazy Load.
CDN.
Tools.
Settings.

2.1 Bulk Smush (Free)

Bulk Smush settings sẽ là tính năng được đề cập đến đầu tiên trong Smush:

Hướng dẫn cài đặt và sử dụng plugin WP Smush (2)

Hướng dẫn cài đặt và sử dụng plugin WP Smush (2-1)

Bulk Smush (Free)

Ở Bulk Smush (Free), ta có thể thấy các tùy chọn sau để cài đặt:

Image sizes: Bạn có thể chọn nén tất cả các hình trong quá trình bulk smush hay chỉ chọn các hình thu nhỏ. Không nên cài đặt quá nhiều kích thước hình thu nhỏ, điều đó có thể tốn rất nhiều thời gian để hoàn thành, thay vì đó ta nên bỏ chọn các kích thước không cần thiết.
Automatic compression: Tự động nén image khi người dùng tải chúng lên để bạn không phải làm mờ theo cách thủ công.
Metadata: Loại bỏ hoặc giữ lại image metadata. Các photographer có thể muốn giữ lại metadata hoặc việc loại bỏ nó có thể làm giảm kích thước hình ảnh.
Image resizing: Ở mục này giúp đề cập đến chiều rộng và chiều cao tối đa của hình ảnh để WP Smush tự động thay đổi kích thước của chúng. Bạn nên đặt setting này nếu ảnh được tải lên từ máy ảnh hoặc điện thoại có độ phân giải cao.

Bước cuối cùng, bạn cần click vào Update Settings ở ngay bên dưới để lưu giữ những cài đặt.

Sau khi đã hoàn thành bước Update Settings, bạn cần tiến hành nén bằng cách cuộn lên đầu và click vào Bulk Smush Now để bắt đầu quá trình.

Hướng dẫn cài đặt và sử dụng plugin WP Smush (3)

Bulk Smush Now

Quá trình Bulk Smush Now có thể sẽ mất một khoảng thời gian tùy thuộc vào số lượng hình ảnh mà bạn đã có trên trang web. Vì vậy bạn hãy giữ máy tính của mình được mở cho đến khi quá trình hoàn tất. Để tiết kiệm thời gian trong lúc chờ nén, bạn có thể xem tiến trình cùng với việc tiết kiệm kích thước và các image còn lại.

Hướng dẫn cài đặt và sử dụng plugin WP Smush (4)

Quá trình running Bulk Smush

Khi quá trình nén hoàn tất, bạn có thể thấy tổng số total savings được tính theo phần trăm và KB/MB. Bạn cũng có thể thấy tổng số No. của images smushed, bao gồm cả hình thu nhỏ.

Hướng dẫn cài đặt và sử dụng plugin WP Smush (5)

Tổng số Total Saving và No. trong Bulk Smush

Ở đây, người dùng có thể thấy 5.8% chính là con số kích thước đã tiết kiệm được khi nén 31 image bao gồm cả hình thu nhỏ được thực hiện bằng cách sử dụng kỹ thuật lossless. Tuy nhiên, ta cần lưu ý rằng các image gốc full size sẽ không được nén ở phiên bản miễn phí, thay vào đó ta cần nâng cấp tài khoản lên phiên bản pro để thực hiện tính năng này.

2.2 Nén các hình ảnh riêng lẻ

Để tiết kiệm thời gian thay vì chỉ nén các hình ảnh cụ thể ta có thể sử dụng WP Smush để nén hàng loạt những hình ảnh này. Để làm được điều này, mời bạn cùng tham khảo hướng dẫn dưới đây nhé:

Trước tiên, bạn cần chuyển đến Media Library, tiếp theo chọn giao diện danh sách.

Trong màn hình tiếp theo, ta có thể thấy một cột mới – Smush phía bên phải của mỗi hình ảnh. Lúc này, ta chỉ cần nhấp vào nút Smush đối với hình ảnh bạn muốn nén.

Hướng dẫn cài đặt và sử dụng plugin WP Smush (6)

Nén hình ảnh trong WP Smush

2.3 Kích hoạt WP Smush Pro

WPMU Dev cung cấp bản dùng thử miễn phí 7 ngày cho plugin WP Smush Pro tạo điều kiện cho người dùng có thể trải nghiệm và quyết định xem nó có phù hợp với trang web đang sử dụng không.

Nhấp vào nút ‘Try Smush Pro Free’ trên trang cài đặt, sẽ đưa bạn đến trang định giá của Smush trên WPMU.

Hướng dẫn cài đặt và sử dụng plugin WP Smush (7)

Kích hoạt WP Smush Pro

WPMU Dev còn có cả kế hoạch hàng tháng và hàng năm với gói hàng tháng bắt đầu từ $6/tháng. Để được trải nghiệm thử miễn phí 7 ngày, bạn hãy nhấp vào nút trial ở dưới cùng để bắt đầu.

Hướng dẫn cài đặt và sử dụng plugin WP Smush (8)

Dùng thử 7 ngày miễn phí WP Smush Pro

Hướng dẫn cài đặt và sử dụng plugin WP Smush (9)

Thiết lập tài khoản WP Smush Pro

Quá trình thiết lập tài khoản này, bạn chỉ cần cung cấp email, tên và mật khẩu để có thể bắt đầu sử dụng WP Smush Pro.

Hướng dẫn cài đặt và sử dụng plugin WP Smush (10)

Thiết lập WP Smush Pro

Như vậy, bạn đã hoàn tất quá trình đăng ký dùng thử WP Smush Pro, tuy nhiên bạn có thể hủy dùng thử bất cứ lúc nào.

Với phiên bản dùng thử, người dùng phải cung cấp chi tiết thanh toán để kích hoạt plugin. Tuy nhiên, nhược điểm lớn của WP Smush hiện tại vẫn chưa có hỗ trợ nào dành cho chính sách thanh toán bằng PayPal.

Hướng dẫn cài đặt và sử dụng plugin WP Smush (11)

Quy trình thanh toán WP Smush

Trong màn hình phía trên, bạn cần nhập chi tiết thanh toán của mình theo hướng dẫn. Tiếp theo là Quick Setup. Đây là nơi người dùng có thể kết nối WPMU DEV với trang web của mình. Để tiếp tục hãy nhập URL của trang web.

Cuối cùng, nhập tên người dùng và mật khẩu trang web WordPress của bạn để WPMU DEV có thể truy cập trang web. Sau đó chỉ cần click vào ‘Activate Smush Pro Now’.

Lưu ý rằng, bạn hãy nhấp vào ‘Use plugin method’ trong trường hợp không muốn ghi nhớ thông tin đăng nhập tại đây. Sau đó người dùng sẽ được dẫn đến trang để tải xuống WPMU dashboard plugin. Và như vậy bạn đã có thể kết nối thủ công với WPMU.

Hướng dẫn cài đặt và sử dụng plugin WP Smush (12)

Kích hoạt WP Smush Pro

Hướng dẫn cài đặt và sử dụng plugin WP Smush (13)

Quá trình kích hoạt Smush Pro

Quay lại WordPress dashboard, bạn sẽ thấy một mục menu mới – WPMU DEV cùng với đó là Smush đã được nâng cấp lên phiên bản Smush Pro.

Hướng dẫn cài đặt và sử dụng plugin WP Smush (14)

Chúng ta sẽ cùng xem lại những thay đổi ở tab setting Bulk Smush ở phiên bản Pro so với phiên bản miễn phí nhé.

2.4 Bulk Smush (Pro)

Ở Bulk Smush Pro chúng ta sẽ có nhiều tùy chọn hơn so với phiên bản miễn phí:

Super-smush: Bật tính năng này để kích hoạt tính năng nén hình ảnh, giúp tối ưu tốc độ tải trang web và tiết kiệm kích thước hơn.
Compress/backup original images: Khi sử dụng tùy chọn này, bạn có thể nén hình ảnh gốc với kích thước full size bằng phiên bản Pro.
Chuyển đổi PNG sang JPEG: Đối với một số hình ảnh, PNG tốt hơn JPEG nhưng cũng sẽ ngược lại trong một số trường hợp.

Lưu ý một điều rằng, nếu hình ảnh hiện có của bạn đã ở định dạng thích hợp thì không cần phải chọn tùy chọn này. Nếu không, hãy bật tùy chọn để có thể tiết kiệm một số kích thước.

Hướng dẫn cài đặt và sử dụng plugin WP Smush (15)

Hướng dẫn cài đặt và sử dụng plugin WP Smush (15-1)

Bulk Smush (Pro)

Sau khi nhấp vào update setting, bạn phải nén lại hình ảnh một lần nữa.

Hướng dẫn cài đặt và sử dụng plugin WP Smush (16)

Nén hình ảnh

Như bạn có thể thấy, tính năng nén dữ liệu với Super-smush đã giảm gần 61% kích thước tổng thể.

Hướng dẫn cài đặt và sử dụng plugin WP Smush (17)

Tính năng nén dữ liệu với Super-smush đã giảm gần 61% kích thước tổng thể

Như vậy, tính năng Bulk Smush Pro sẽ có thêm rất nhiều tính năng hữu ích mà bạn nên nâng cấp cho website của mình. Chúng ta cùng tìm hiểu thêm một số công cụ khác trong phần dưới đây.

2.5 Directory Smush

Theo mặc định, Smush chỉ nén các hình ảnh trong thư mục tải lên của WordPress.

Nhưng bạn có thắc mắc rằng điều gì sẽ xảy ra nếu một số thư mục khác có chứa hình ảnh? Bạn hoàn toàn có thể chọn các thư mục đó với tính năng Directory Smush.

2.6 Integrations

Ngoài các cài đặt trên, Smush còn cung cấp các tích hợp sau:

Hướng dẫn cài đặt và sử dụng plugin WP Smush (18)

Những cài đặt khác trong Smush

Gutenberg: Khi được bật tùy chọn này, người dùng có thể xem thống kê nén cùng với các khối hình ảnh trong trình chỉnh sửa Gutenberg. Tuy nhiên đối với các hình ảnh chưa được tối ưu hóa, nó cũng phải hiển thị nút Smush thủ công.
WPBakery: Nếu sử dụng WPBakery để tạo trang, Smush có thể nén các hình ảnh được tải lên trình tạo trang.
Amazon S3: Nếu giảm tải hình ảnh lên kho lưu trữ đối tượng cloud như Amazon S3 hoặc DigitalOcean Spaces bằng cách sử dụng plugin WP Offload Media, Smush cũng có thể tối ưu hóa những hình ảnh đó. Thậm chí, Smush hoàn toàn có thể hoạt động ngay cả khi xóa image khỏi server.
NextGen gallery: Người dùng nên sử dụng NextGen để tạo gallery, Smush có thể nén hình ảnh được tải trực tiếp lên đó.

2.7 Lazy Load

Hiện nay có một số plugin chuyên dụng trong WordPress cho phép việc tải chậm như W3 Total Cache. Nhưng khi sử dụng Smush Pro, người dùng không cần phải thêm bất kỳ plugin nào cho phép tải chậm hình ảnh cũng như ngăn cảnh báo “defer offscreen images” trong Google PageSpeed.

Hướng dẫn cài đặt và sử dụng plugin WP Smush (19)

Hướng dẫn cài đặt và sử dụng plugin WP Smush (19-1)

Tính năng trong WP Smush Pro

2.8 CDN

Tương tự như tùy chọn Lazy Load , bạn cũng không cần tìm CDN khác. Smush Pro cho phép bạn có thể kích hoạt CDN trong ít phút, những CDN này được cung cấp bởi StackPath.

Tuy nhiên, so với các tính năng mà bạn nhận được khi sử dụng trực tiếp với StackPath thì Smush cung cấp những tính năng khá cơ bản. Có thể kể đến như: không thể thêm miền tùy chỉnh,… Tuy nhiên, điểm cộng bù lại chính là việc người dùng có thể sử dụng mà không cần trả thêm phí.

Hướng dẫn cài đặt và sử dụng plugin WP Smush (20)

CDN trong Smush Pro

WebP

WebP có thể được bật trong khi đang mở CDN. Không giống như ShortPixel hoặc Imagify, Smush không lưu trữ các hình ảnh WebP đã chuyển đổi trong thư mục tải lên trang web. Vì vậy, nếu thay đổi plugin hoặc muốn sử dụng một CDN khác, bạn sẽ mất hình ảnh WebP.

2.9 Tools

Tools bao gồm một tùy chọn để khôi phục hình ảnh ban đầu của bạn. Để nó hoạt động, bạn cần chọn tùy chọn “story a copy of my original images” trong tab setting Bulk Smush.

Kích hoạt Tool trong Smush Pro

2.10 Settings

Tab setting sẽ cung cấp thêm một số cài đặt khác. Lưu ý rằng hãy để các cài đặt ở chế độ mặc định.

Hướng dẫn cài đặt và sử dụng plugin WP Smush (22)

Setting

Mọi người cũng tìm kiếm: smush, wp smush, smush pro, wp smush pro, smush plugin, wp-smush wordpress plugin, plugin smush, smush cdn, bulk smush, smush wordpress plugin

Hình ảnh cũng là một trong số các yếu tố khiến tốc độ load trang chậm. Dưới đây là 4 cách tối ưu hóa hình ảnh giúp tăng tốc độ tải trang web.

Cách 1: Chọn đúng định dạng ảnh

Trước khi bắt đầu tối ưu ảnh, hãy chắc là bạn đã chọn đúng định dạng file. Định dạng file sẽ ảnh hưởng tới kích thước file và việc nén file ảnh đó.

4 Cách tối ưu hóa hình ảnh giúp tăng tốc độ tải trang web (1)

2 định dạng ảnh thông dụng nhất là JPEG và PNG.

JPEGs thường được dùng cho file ảnh, vì chúng:

Có dung lượng file nhỏ
Chất lượng ảnh tốt
Có thể được thu nhỏ, nén, mà không bị mất nhiều chất lượng ảnh

PNGs thì được dùng cho file ảnh dạng vectors, logos, ảnh chụp màn hình, và những ảnh cỡ nhỏ. Chúng có kích thước file lớn hơn, nên bạn nên dùng dạng này ít hơn.

Ngoài PNG và JPEG, bạn có thể thấy nhiều loại file ảnh khác nhau. Nhưng, chúng không được khuyên dùng cho việc tạo ảnh để chạy trên website.

Nhưng có một ngoại lệ là file GIFs. Có một sự bùng nổ về định dạng GIFs trong những năm gần đây. Những ảnh động này cũng có tể được dùng để làm giàu thêm cho nội dung của bạn. Nếu bạn có ý định chèn video, hãy dùng định dạng GIF, thay vì MP4 để nhẹ hơn.

Cách 2: Nén ảnh

Khi nén ảnh, bạn cần chú ý cân bằng giữa chất lượng và kích thước. Vì nếu nén càng ít, chất lượng hình sẽ cao hơn. Nếu tăng cấp độ nén lên, kích thước sẽ ngày càng nhỏ nhưng chất lượng sẽ ảnh hưởng.

Nó còn tùy vào loại website của bạn nữa. Ví dụ bạn đang có website về nhiếp ảnh, thì bạn cần chất lượng ảnh rất tốt. Nhưng ít nhất là bạn vẫn có thể lựa chọn một số thiết lập để nén ảnh phần nào đó cho nhỏ lại.

Bên dưới là các ứng dụng desktop, ứng dụng nền web, và plugin WordPress để giúp bạn nén ảnh mà không ảnh hưởng đến chất lượng tổng thể.

4 Cách tối ưu hóa hình ảnh giúp tăng tốc độ tải trang web (2)

1. Công cụ nén ảnh DIY (tự làm)

Các công cụ nền Desktop-based có nhiều lựa chọn nhất để tùy chỉnh các thiết lập nén ảnh. Nếu bạn đã từng dùng qua các phần mềm chỉnh ảnh như Photoshop, bạn có thể thích nén ảnh bằng cách này.

Một số phần mềm nén ảnh phổ biến nhất là:

Adobe Photoshop – Photoshop có công cụ nén ảnh mặc định để giúp tối ưu ảnh cho web.
Gimp – Một công cụ miễn phí thay thế cho photoshop để bạn tự học chỉnh ảnh, cũng có công cụ nén ảnh được tích hợp.
Affinity Photo – Đây là giải pháp rẻ hơn để thay thế cho Photoshop có công cụ tối ưu ảnh .
Paint.NET – Công cụ chỉnh sửa ảnh cho người dùng Windows. Là một lựa chọn rất tốt để thay thế cho Photoshop bao gồm khả năng tối ưu ảnh.

Các trình chỉnh sửa ảnh ở trên cần một ít kiến thức chỉnh sửa ảnh, nhưng bù lại có khá nhiều lựa chọn cấu hình cho việc tối ưu hóa hình ảnh cho WordPress.

2. Ứng dụng tự động nén ảnh

Nếu bạn thích cách đơn giản hơn, vậy bạn nên sử dụng công cụ online để tự động tối ưu hóa hình ảnh cho WordPress.

Những tool sau sẽ giúp bạn đỡ mất thời gian để học cách sữ dụng phần mềm hơn.

Đầu tiên là những tools nền web phổ biến là JPEGmimi và TinyPNG. Bạn chỉ việc upload, phần mềm này sẽ tự chạy và bạn có thể tải về ảnh đã được tối ưu sau đó.
Tiếp theo là những phần mềm trên máy tính như là ImageOptim, OptiPNG, và Trimage.

3. Plugin nén ảnh WordPress

Như hầu hết các ứng dụng khác trên WordPress, bạn có thể dễ dàng tìm thấy một plugin để nén ảnh WordPress.

4 Cách tối ưu hóa hình ảnh giúp tăng tốc độ tải trang web (3)

Các plugin sau sẽ giúp bạn tối ưu ảnh WordPress ngay khi upload, rồi nén nó xuống để lưu lại trên thư viện ảnh:

Imagify Image Optimizer – Plugin này sẽ cung cấp nhiều mức độ nén khác nhau, nhiều cách thay đổi kích thước khác nhau, khôi phục hình ảnh, và hơn thế nữa.
ShortPixel Image Optimizer – Plugin miễn phí này cho phép bạn nén tới 100 bức ảnh mỗi tháng và có thể xử lý nhiều định dạng ảnh khác nhau. Hơn nữa, nó có công cụ khôi phục được tích hợp sẵn và có thể tối ưu nhiều ảnh cùng lúc.
WP Smush – Plugin này sẽ tối ưu ảnh khi bạn upload lên website, ngoài ra còn tối ưu ảnh cũ trên thư viện ảnh. Nó giảm dung lượng size ảnh xuống mà không làm ảnh hưởng chất lượng ảnh. Xem hướng dẫn cài đặt và sử dụng plugin WP Smush TẠI ĐÂY.
Optimus Image Optimizer – Plugin nhẹ này sẽ nén ảnh mà không làm mất chất lượng ảnh.

Cách 3: Thay đổi kích thước size ảnh để phù hợp mức độ hiển thị.

Trước khi bắt đầu tối ưu ảnh bạn nên chỉnh kích thước ảnh về đúng trước đã. Không có lý do gì để upload một ảnh cực lớn lên một trang web chỉ cần ảnh nhỏ, để rồi tự nó phải hạ kích thước hiển thị xuống để xem được.

Hãy xem kích thước ảnh của bạn có đúng chưa trước khi upload. Bằng cách này bạn chỉ cần xử lý size ảnh cỡ nhỏ ngay từ đầu.

4 Cách tối ưu hóa hình ảnh giúp tăng tốc độ tải trang web (4)

Ví dụ: Nếu bạn cần một ảnh với kích thước 300×300, nhưng bạn lại upload ảnh đến 3000×3000 pixel, việc này khiến cho WordPress theme phải thực hiện thao tác đổi kích thước ảnh xuống đúng 300×300 để hiển thị cho đẹp.

Hoạt động này không những tăng băng thông, còn khiến quá trình tải ảnh lên rất chậm khi truy cập website.

Cách tốt nhất là hãy cứ upload đúng y như kích thước cần thiết. Rồi chạy tool sau đó để Tối ưu hình ảnh WordPress.

Cách 4: Hãy crop ảnh (cắt ảnh) cho khớp

WordPress có công cụ mặc định để giúp bạn crop ảnh từ ngay trong dashboard. Mặc dù công cụ này hữu dụng, nhưng chúng tôi cũng khuyên bạn nên crop ảnh trước khi tối ưu và upload ảnh lên.

Nếu bạn cần ảnh được crop trước để khớp với stie của bạn? Vậy hãy xóa ảnh trên site, crop nó rồi tải ảnh lên lại. Vì nếu chỉnh sửa, thao tác nhiều trên dashboard, bạn sẽ vô tình tạo ra nhiều phiên bản của cùng một file. Vì vậy nó sẽ tăng thời gian tải server và tăng kích thước site của bạn.

Chúc bạn thành công!