Mà size của một Website = Size code (HTML/CSS/JS) + Size Media Files (ảnh – video..).
Nên việc tối ưu ảnh để đảm bảo size trang web 1 -> 5MB và vẫn giữ được chất lượng và mục đích biểu thị của ảnh là vấn đề cần lưu tâm với mọi Webmaster.
Nhiều người nghĩ tối ưu ảnh Website là thực hiện ‘nén’ ảnh để giảm dung lượng trang web và giúp tải trang nhanh hơn. Nhưng thực ra, tối ưu ảnh Website gồm nhiều việc chứ không chỉ là nén ảnh:
Dùng ảnh có kích thước phù hợp với từng loại nội dung
Dùng định dạng ảnh phù hợp mục đích: png, jpg hay gif?Tối ưu dung lượng ảnh (nén) hợp lý – giúp cân bằng giữa kích cỡ & chất lượng ảnh
Sai lầm thường thấy của rất nhiều người dùng WordPress là cứ upload bất kỳ ảnh nào mình thích rồi sau đó dùng các plugin như SmushIT, reSmushIT,… để nén sau. Việc này khiến dung lượng Website phình to – khiến Server hoạt động quá nhiều để nén ảnh & chất lượng ảnh nén không đạt
Chúng ta sẽ khảo sát từng phần một:
Dùng ảnh có kích thước phù hợp với nội dung
Ít người dùng thực sự để ý rằng ứng với mỗi theme bạn dùng, thì kích thước ảnh phù hợp cho từng loại nội dung sẽ khác nhau.Dù bạn có upload một image kích thước lớn đến bao nhiêu đi nữa thì trước khi hiển thị, theme (hoặc các plugin ảnh – slideshow…) sẽ tạo ra các thumbnail thích hợp để hiển thị, chứ không dùng ảnh gốc bạn upload lên.
Nhưng khi hiển thị, theme sẽ tự tạo ra các ảnh thumbnail thích hợp làm Featured images chứ không dùng ảnh trên, bao gồm:
Một ảnh khi hiển thị dạng Slider Post ở đầu trang – kích thước 696 * 385 px
Một ảnh hiển thị trong list bài viết danh mục – kích thước 218 * 150 px – xem chi tiết ảnh này >>
Và còn nhiều ảnh nữa được sinh ra để hiển thị tùy vào cách thiết kế của trang chứa bài viết này.
Vậy, nếu lúc upload ảnh Featured Image, VHW Team dùng ảnh có kích thước 4000* 4000px (size 2 MB – 2000 kb) thì các vấn đề như thế này sẽ phát sinh:
- Ảnh gốc size 2MB không hề được sử dụng, nhưng nó vẫn nằm trên thư mục wp-contents/ uploads trên website, làm tăng tổng dung lượng code website dù không dùng: khiến lưu trữ trên hosting tăng thêm, khiến code website tăng thêm gây khó khăn khi backup & restore websites.
- Vì kích thước của ảnh thumbnails tạo ra dạng hình chữ nhật (tỉ lệ 4/3 hoặc 5/3…) nhưng kích thước ảnh gốc lại là hình vuông (1/1) nên khi crop để tạo ảnh thumbnails – nhiều phần trên ảnh gốc sẽ bị cắt đi – làm giảm giá trị biểu thị của ảnh.
- Nếu ta dùng các plugins nén ảnh như SmushIT, reSmushIT… thì dù ảnh 2 MB trên không dùng, nó vẫn được nén và tạo ra thêm phiên bản tối ưu: và file gốc + file nén đều tốn khá nhiều dung lượng lưu trữ.
- Với ảnh 4000* 4000 px, sau khi dùng plugin tối ưu ảnh (nén) thì ảnh sau khi tối ưu hiển thị rất kém – vì kích cỡ ảnh quá lớn so với so với kích cỡ thông thường của trang web trên máy tính, tablet, mobile.
Hầu hết các theme chất lượng hiện nay trong Theme Option hoặc Documentation đều có hiển thị về kích thước ảnh khuyên dùng cho từng loại nội dung trên theme như ảnh featured image trong bài viết, ảnh cho sản phẩm, cho slider hay background… Bạn cần tham khảo trước để resize ảnh thích hợp.
Sau một thời gian có kinh nghiệm, bạn có thể đối chiếu ảnh trên demo của theme để xác định kích thước tương tự để resize mà không cần phải tham khảo tài liệu tác giả nữa.
Làm sao Resize ảnh?
- Cách tốt nhất để Resize ảnh là dùng phần mềm Photoshop – không chỉ resize mà nó có thể giúp tối ưu ảnh cực tốt qua tính năng Save for Web.
- Nếu bạn không thể cài Photoshop, thì phần mềm miễn phí GIMP là giải pháp thay thế rất tốt. Một cái khá OK – free là Paint.NET
- Hoặc có thể dùng các dịch vụ resize online như ImageResizer
- Một dịch vụ khác cực tốt cho chỉnh sửa ảnh là Canva, chúng ta sẽ sớm có một topic hướng dẫn riêng!
2.Chọn định dạng ảnh phù hợp
Có nhiều định dạng ảnh trên Website được các trình duyệt hỗ trợ, nhưng có 3 cái phổ biến nhất là PNG, JPG (hoặc JPEG) và GIFT. Trong đó:- JPG hay JPEG: là định dạng ảnh nén lossy & lossless – đây là định dạng phổ biến nhất trên website vì nó cho phép bạn cân đối giữ size & chất lượng ảnh.
- PNG: định dạng nén lossless – tức là không làm giảm chi tiết quá nhiều, đây là định dạng phổ biến thứ 2 sau JPG
- GIF: định dạng ảnh động, lossless, không thể tối ưu bằng các plugin nén ảnh
- Lossless: nén không làm mất chất lượng (thật ra có mất nhưng ít)
- Lossy: nén có làm mất chất lượng – có thể tùy chỉnh giữa tỉ lệ nén/ chất lượng ảnh
- Glossy: cái này trung gian – nén có mất chất lượng nhưng không quá nhiều như Lossy. Cái này ít dùng vì nó thực sự không nén được nhiều, nhưng có thể giúp qua mặt các công cụ Speed Test như Google PageSpeed Insight để nâng điểm test tốc độ.
Khi nào dùng JPG (JPEG)?
Định dạng JPG có tỉ lệ nén tốt nhất nên được sử dụng nhiều nhất cho ảnh trên Websites.Khi nén hoặc lưu ảnh dưới dạng JPG, chất lượng ảnh sẽ mất đi một phần chi tiết. Do đó chúng ta thường dùng định dạng này cho những ảnh không cần quá chi tiết & tỉ mỉ.
Ví dụ: ảnh nền, ảnh sự vật & chân dung không cận cảnh, ảnh sản phẩm không cận cảnh… hoặc bất kỳ ảnh nào không đòi hỏi phải hiển thị quá chi tiết hoặc cần phải quá ‘đẹp’.
Tỉ lệ nén ảnh JPG có thể đạt đến hơn 90%, nhưng nó có thẻ làm chất lượng ảnh mất đi khá nhiều – mờ dần.
Trở lại việc resize ảnh, nếu bạn không resize ảnh hợp lý, mà dùng ảnh JPG có kích cỡ quá lớn – sau khi nén xong nó hiển thị trên Website khá mờ.
Nói chung định dạng JPG là ưu tiên hàng đầu khi dùng ảnh trên Website, nó có size rất nhỏ + khả năng tối ưu để đạt được tỉ lệ chất lượng/ size hợp lý nhất.
Khi nào dùng PNG?
PNG là định dạng ảnh sau khi nén chi tiết không bị mất đi quá nhiều.
Cần hiển thị rõ các chi tiết trong ảnh, ví dụ ảnh dạng vector, Logo, Favicon, ảnh chân dung & sự vật & sản phẩm chụp cận cảnh muốn giữ các chi tiết trong ảnh nén
Ảnh trong suôt (transparent) bắt buột phải dùng định dạng PNG
Khi nào dùng ảnh GIF?
Ảnh GIF rất đặc thù – vì nó là ảnh động, dạng lossless & tỉ lệ nén hầu như bằng 0.
Hiện nay GIF chủ yếu dùng cho ảnh troll, biểu thị cảm xúc, hay biểu thị tăng giảm chỉ số & biểu đồ…
Ảnh GIF có kích cỡ lớn (có khi tới 10 MB) nên bạn chỉ dùng khi cảm thấy thực sự cần thiết.
Với sự bùng nổ của SVG, thì hiện nay rất nhiều người chọn giải pháp dùng định dạng SVG để biểu thị các thông số chuyển động thay cho GIF.
3.Tối ưu ảnh trước khi upload lên Website
Tối ưu ảnh, có 2 trường hợp:- Thực hiện tối ưu trước khi upload lên Website – đây là giải pháp tốt nhất, bạn không cần dùng thêm plugin tối ưu nữa.
- Tối ưu bằng plugin nén ảnh: áp dụng khi trên Website bạn có quá nhiều ảnh chưa được tối ưu, hoặc bạn thích plugin tự động tối ưu giúp bạn trong quá trình upload.
Chọn ảnh & tập hợp ảnh cần dùng.
- Chọn định dạng thích hợp cho ảnh: JPG, PNG hay GIF. Có thể đổi ảnh PNG sang JPG để giảm dung lượng, dùng Photoshop, GIMP hay các dịch vụ chuyển đổi free như PNG to JPG.
- Resize & Crop để có dược kích thước phù hợp với loại nội dung hiển thị
- Tối ưu (nén) bằng Photoshop (tùy chọn)
- Tối ưu ảnh bằng dịch vụ Compress miễn phí của ShortPixel
- Công cụ tốt nhất để Crop & Resize ảnh là Photoshop, bạn có thể cài đặt trên máy tính rất dễ dàng từ các bài hướng dẫn có sẵn trên mạng (tất nhiên là hàng crack).
- Nếu bạn mua bản quyền dịch vụ Adobe Creative Cloud thì quá tốt – bạn có lên Google tìm mua từ các nhà phân phối (Reseller) với giá khá rẻ. Tuy nhiên các phiên bản Photoshop CC (từ bộ Creative Cloud) đòi hỏi cấu hình máy tính khá cao để hoạt động mượt (RAM cỡ 4GB trở lên).
- Nên chỉ với nhu cầu sử dụng Resize – Crop – Convert và Tối ưu ảnh, bạn chỉ cần dùng các bản Photoshop CS2 hay CS5 là dư dùng rồi, cả việc thiết kế banner cũng rất dễ dàng. Đặc biệt nó cần máy tính cấu hình rất thấp, chỉ từ 1GB RAM và CPU Celeron là đủ chạy.
Bước 1 – Tìm ảnh cho bài viết
Search trên Kho ảnh của Envato Elements, tìm ảnh chủ đề kiếm tiền và tải về:
Vậy ta cần resize lại và crop bớt (nếu thích) trước khi upload dùng cho Featured Image.
Bước 2 – Mở ảnh và Resize bằng Photoshop
Kéo ảnh cần resize vào của sổ Photoshop để chỉnh sửa:
Nếu tỉ lệ Rộng/ Cao chưa đáp ứng với tỉ lệ hiển thị trên Theme, nên ta sẽ làm thêm bước Crop.
Bước 3 – Crop ảnh đã Resize
Để vào chế độ Crop, ta dùng Phím tắt C, hoặc nhấp vào icon Crop ở Menu trái.
Sau khi kéo các điểm neo để có tỉ lệ ảnh thích hợp, ta nhấn Crop hoặc gõ Enter:
Do đó, ta cần Convert nó sang các định dạng PNG, JPG hay GIF. Tất nhiên GIF chỉ áp dụng khi chúng ta có file ảnh động, còn đa số trường hợp ta sẽ Convert sang PNG hoặc JPG – tính năng convert này gọi là Save For Web, vì ngoài việc chuyển định dạng, nó còn hỗ trợ nén ảnh để tối ưu cho Web.
Bước 4 – Save For Web
Chúng ta có 3 tùy chọn Save For Web:
- GIF: dùng khi bạn tạo ảnh động, hiện nay rất ít dùng, và bạn cũng nên hạn chế dùng nếu nó không quá cần thiết vì file GIF thường có size lớn, khiến trang web load chậm.
- PNG : phiên bản nén lossless, chỉ dùng khi bạn cần giữ chất lượng cao – ảnh trong suốt (transparent) hoặc ảnh chú trọng tới các chi tiết (nhe công thức toán học, hình vector, ảnh chân dung – sự vật cận cảnh).
- Có 2 định dạng con là PNG-24 và PNG 8, trong đó PNG-24 cho chất lượng & chi tiết tốt nhất. Ảnh PNG-8 nén với tỉ lệ cao và làm mất đi nhiều chi tiết trên ảnh, nên hiện nay ít người dùng PNG-8.
Nếu ảnh JPG bạn chọn chất lượng 100, thì chất lượng ảnh có thể tốt như PNG, nhưng size cũng gần tương đương.
Photoshop cho phép chúng ta xem lại bản gốc – xem trước bản tối ưu – size ảnh tối ưu , trước khi Save lại, nên bạn có thể quyết định cân chỉnh hoặc chọn lại định dạng PNG hay JPG:
Bạn có thể chọn chế độ 4-Up và chọn định dạng cho từng Ô, sau đó quyết định phiên bản tốt nhất muốn dùng. Ví dụ như hình bên dưới, bạn có thể phân biệt chất lượng ảnh ở định dạng PNG 24, PNG 8, JPG (chất lượng 100) và JPG (chất lượng 58):
Tối ưu ảnh trước khi Upload bằng ShortPixel Compress
Các ảnh đã được Save For Web bởi Photoshop thì ta có thể nén thêm được khá nhiều bằng các plugin nén ảnh hoặc dịch vụ tối ưu ảnh cho Website.- Cũng dễ hiểu vì ‘chuẩn’ của Photoshop và chuẩn của các dịch vụ nén ảnh cho web không giống nhau, trong đó Photoshop cho phép xuất ảnh (Save for Web) với chất lượng vẫn còn tốt với tỉ lệ nén vừa phải. Còn với các dịch vụ chuyên nén ảnh cho Web như ShortPixel hay SmashIT, Imagify… thì họ còn tối ưu với mức độ cao hơn, cho phép chất lượng ảnh giảm đi đôi chút vì mục tiêu tối ưu tốc độ load trang.
Chúng ta có thể sử dụng ShortPixel qua 3 cách:
- Cài Plugins và dùng Plugin nén ảnh với Credits miễn phí
- Cài Plugins & dùng Plugin nén ảnh với Credits trả phí – theo tháng hoặc theo số lượng
- Dùng dịch vụ nén ảnh online miễn phí ShortPixel Compress
Đăng ký Free ShortPixel & nhận 200 Free Credits
Sau khi đăng ký & xác nhận Email, bạn không cần phải dùng Free Credits nếu không nén ảnh trên WordPress bằng Plugin ShortPixel. Ta sẽ vào mục Compress và Upload ảnh cần tối ưu, chọn các chế độ Lossy – Glossy & Lossless tùy chất lượng & tỉ lệ nén bạn muốn.
Mỗi lần bạn được upload tối đa 50 ảnh, nén và tải về xong bạn có thể upload tiếp, nói chung dịch vụ này dư sức đáp ứng nhu cầu của đa số Website.
Kích vào icon Eye để xem chất lượng ảnh trước và sau khi nén:
Bạn có thể thấy ảnh PNG sau khi tối ưu – vùng môi cô gái bên phải mất đi một ít chi tiết – nhưng ảnh vẫn rất đẹp
Bạn có thể xem 4 ảnh gốc được tối ưu bởi Photoshop sau đây, gồm các định dạng JPG (chất lượng 50 và 100), PNG (gồm PNG-8 và PNG-24):
JPG-100, Size 319 KB
JPG-100, Size 319 KB
JPG-50, Size 61 KB
PNG-24 – Size 705 KB
PNG-8, Size 245 KB- Chế độ Lossy cho phép nén cao nhất, và JPG-100 (71%) và PNG-24 (63%) được có tỉ lệ nén cao nhất – dễ hiểu vì 2 cái này khi Save For Web có chất lượng tốt hơn so với JPG-50 và PNG-8, tức là có thể nén được thêm khá nhiều.
- Chế độ Glossy – nén it hơn Lossy & giữ chất lượng tốt hơn Lossy, nhưng vẫn nén rất tốt với JPG-100 (37%) – đặc biệt PNG-24 vẫn nén được 63% – Chế độ này nén JPG ít hơn, nhưng vẫn giúp cho các công cụ Speed Test khó tính như Google PageSpeed Insight không đánh dấu ảnh là chưa tối ưu – nhờ đó giữ được chất lượng ảnh mà điểm Speed Test vẫn tốt.
- Chế đọ Lossless – thì tỉ lệ nén quá thấp, rõ ràng vì ta đã nén ở Photoshop trước đó, bây giờ mà yêu cầu Lossless (không mất chi tiết) thì không thể nén thêm được nhiều.
4.Tối ưu ảnh trên WordPress bằng Plugins
Đôi khi trên Web bạn có nhiều ảnh chưa được tối ưu, hoặc bạn không thích làm ‘thủ công’ như trên, thì các plugins nén ảnh sẽ giúp chúng ta ‘xử lý’ tự động mọi thứ:Nén ảnh ngay khi bạn upload lên Website
Nén tất cả các ảnh chưa được tối ưu hiện có trên Website
Lưu ý khi dùng Plugins nén ảnh
- Như đã nói, cả 2 việc đều ảnh hưởng đến hoạt động của máy chủ: tốn RAM và cần CPU hoạt động mạnh hơn bình thường.
- Nếu bạn dùng shared hosting cấu hình yếu, thì dùng các plugin nén ảnh thì quá trình hoạt động sẽ khiến website load ì ạch, chưa kể một số trường hợp down-time luôn.
- Nên bạn chỉ nên dùng Plugins nén ảnh khi:
- Trên Website có quá nhiều ảnh chưa được tối ưu
- Hoặc mỗi lần đăng bài, bạn upload số lượng lớn ảnh – mà không có thời gian để upload lên ShortPixel Compress để nén trước.
- Khi cho Plugin nén toàn bộ ảnh – bạn cần chọn khung giờ ít người truy cập nhất để tránh ảnh hưởng tới người dùng, và đặc biệt, bạn có thể chạy tối ưu nhiều lần trước khi toàn bộ ảnh trên Website đã được nén.
- Sau đó, plugin chỉ phải hoạt động mạnh mỗi lần bạn upload ảnh mới, nên bình thường nó không cần nhiều tài nguyên máy chủ nữa.
- Plugin nén ảnh sẽ sinh ra phiên bản nén & backup phiên bản gốc của ảnh, do đó dung lượng lưu trữ trên Hosting sẽ tăng lên đáng kể – thường là gấp đôi dung lượng bình thường – vì ảnh chiếm phần lớn lưu trữ của toàn bộ Website.
- Việc nén ảnh tự động theo một qui chuẩn chất lượng chung cho toàn bộ Website chắc chắn không mang đến chất lượng ảnh ‘đồng đều’ cho tất cả các ảnh, vì nó phụ thuộc vào kích cỡ ảnh khi bạn upload phù hợp thế nào với ảnh hiển thị.
- Đa số các plugin đều có lựa chọn để bạn xóa ảnh gốc nhằm tiết kiệm dung lượng. Nhưng vì vấn đề ‘chất lượng không đồng đều’ nói trên, bạn nên backup thư mục ảnh gốc về thay vì xóa hẳn chúng đi, để sau này bạn không hài lòng với ảnh ‘đã tối ưu’ nào thì dùng ảnh gốc và tối ưu thủ công để up lên thay thế.
Các Plugin nén ảnh tốt nhất cho WordPress
Hiện nay có rất nhiều plugin nén ảnh cho WordPress, miễn phí & trả phí, một số lựa chọn uy tín là:- 1.SmushIT: plugin miễn phí số 1 cho nén ảnh WordPress, cho phép nén ảnh số lượng lớn – tỉ lệ nén khá cao. Nhược điểm là chất lượng ảnh nén không cao lắm & hoạt động khá nặng nề, chỉ nên tối ưu vào khung giờ ít người truy cập Web.
- 2.Image Optimization & Lazyload: plugin miễn phí, khá mới nhưng được người dùng đánh giá cao nhất, ít lỗi và cho tỉ lệ nén/ chất lượng ảnh rất tốt.
- 3.reSmushit: dù cái tên khá giống với SmushIT, nhưng plugin miễn phí này gây ấn tượng mạnh với tỉ lệ nén cực tốt, vẫn còn một ít lỗi nhỏ nhưng nhiều người đánh giá reSmushit cao hơn cả SmushIT.
- Ngoài ra, các plugin trả phí sau đây rất đáng để bạn bỏ tiền ra, nếu Website có số lượng ảnh lớn hoặc cần tự động tối ưu liên tục, đặc biệt dành cho blog ảnh hay shop bán hàng nhiều ảnh sản phẩm:
- ShortPixel – dịch vụ được đánh giá tối ưu ảnh tốt nhất cho WordPress hiện nay – Chỉ $10 bạn có thể tối ưu tự động tới 10.000 images, không giới hạn thời gian. Xem chi tiết ShortPixel One-time Credits.
- Imagify – dịch vụ của WP-Media, chủ sở hữu của WP-Rocket lừng danh, Imagify là đối thủ trực tiếp của ShortPixel hiện nay, cung cấp các gói tối ưu theo dung lượng ảnh. Xem chi tiết!
- Swift Image Optimization: là dịch vụ tối ưu ảnh không giới hạn – miễn phí dành riêng cho khách hàng của Swift Performance Pro – plugin tăng tốc là đối thủ của WP-Rocket. Xem khuyến mãi Swift Performance giảm 90%.
Chúc thành công!
Đăng nhận xét