Cách tối ưu hình ảnh cho website chuẩn SEO
Hãy đọc ngay bài viết sau đây nếu bạn không muốn Google đưa website của mình vào danh sách các trang web không được ưu ái trên bảng xếp hạng tìm kiếm. Muốn làm hài lòng người dùng và Google, bạn hãy giảm kích thước tệp hình ảnh để cải thiện hiệu suất website. Một vấn đề không mong muốn hay xảy ra khi chúng ta tiến hành sửa đổi images đó là sự giảm đi về mặt chất lượng của hình ảnh (lí do khiến người dùng không cảm thấy hứng thú với website nữa vì nó "xấu").
Vì vậy, Bizfly Cloud chia sẻ những điều bạn cần làm ngay đó là thực hiện các kĩ thuật và các tips cho phép giảm kích thước tệp hình ảnh nhưng vẫn giữ chúng đủ đẹp để có thể tự tin đưa chúng hiển thị lên website cho người dùng của mình.
Lợi ích của việc tối ưu hình ảnh cho website
Trước tiên, hãy cùng tìm hiểu tại sao bạn cần phải định dạng hình ảnh của mình? Lợi ích của việc này là gì?
Có rất nhiều lợi ích về mặt hiệu suất của việc tối ưu hóa hình ảnh. Theo đánh giá từ các trang công nghệ lớn, hình ảnh chiếm trung bình 54% 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, hình ảnh sẽ là đối tượng đầu tiên bạn nên bắt đầu! Điều này quan trọng hơn cả scripts và fonts. Một quy trình tối ưu hình ảnh tốt rất dễ dàng để thực hiện, nhưng rất nhiều chủ sở hữu website đều bỏ qua điều này.
Dung lượng bytes trung bình trên mỗi trang
Các lợi ích chính có thể kể đến là:
- Cải thiện tốc độ tải trang: Nếu website của bạn mất quá nhiều thời gian để tải, khách truy cập cảm thấy mệt mỏi vì chờ đợi và họ sẽ nhanh chóng chuyển sang một trang web khác tải nhanh hơn. Về tốc độ tải trang, bạn có thể tham khảo tại link sau để tìm hiểu nhiều hơn.
- Kết hợp plugin WordPress tối ưu hóa hình ảnh, nó sẽ cải thiện SEO một cách hoàn hảo. Website sẽ được 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 góp phần làm chậm trang web và các công cụ tìm kiếm thì lại ghét các trang web chậm này. Google cũng có thể thu thập và chỉ mục hình ảnh của bạn nhanh hơn cho những tìm kiếm hình ảnh trên Google. Bạn tò mò về % traffic đến từ tìm kiếm hình ảnh của Google? Hãy sử dụng phân đoạn Google Analytics segment để kiểm tra lưu lượng này.
- Tạo bản sao lưu backup 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ẽ luôn đánh giá cao điều này.
- Yêu cầu dung lượng lưu trữ ít hơn trên server. Điều này phụ thuộc vào số lượng hình thu nhỏ (thumbnails) mà bạn tối ưu hóa).
>>> Đọc thêm: Top 6 công cụ giảm dung lượng ảnh mà vẫn giữ nguyên chất lượng hiển thị trên website
Cách tối ưu hình ảnh cho website
Mục tiêu chính của việc định dạng hình ảnh là cân bằng giữa kích thước tệp thấp nhất và một chất lượng chấp nhận được. Có khá nhiều cách để thực hiện việc cân bằng này. Một trong những cách phổ biến nhất là nén chúng trước khi tải lên Website. Thông thường, điều này có thể được thực hiện trong công cụ chỉnh sửa ảnh nổi tiếng như Adobe Photoshop hoặc Affinity Photo. Hoặc tiện lợi hơn, bạn có thể được thực hiện bằng cách sử dụng các plugin (sẽ được trình bày lần lượt bên dưới bài viết).
Hai yếu tố chính cần xem xét là định dạng tệp (file format) và loại nén (type of compression) bạn sử dụng. Bằng cách kết hợp đúng định dạng tệp và loại nén, bạn có thể giảm kích thước hình ảnh xuống tới 5 lần. Bạn sẽ phải thử nghiệm với từng hình ảnh hoặc định dạng tệp để xem cái nào hoạt động tốt nhất.
1. Chọn đúng định dạng tệp (File format)
Trước khi bắt đầu sửa đổi, hãy đảm bảo bạn đã chọn loại tệp tốt nhất. Có một số loại tệp thông dụng như sau:
- 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. Nó chỉ sử dụng nén lossless .
- 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 sao cho đạt được một cân bằng tốt về chất lượng và kích thước tập tin.
- GIF: chỉ sử dụng 256 màu. Đây là lựa chọn tốt nhất cho các hình ảnh động. Nó chỉ sử dụng nén lossless.
Ngoài 3 loại trên, còn một số loại tệp khác như JPEG XR và WebP, nhưng chúng không được hỗ trợ bởi tất cả các trình duyệt. Lý tưởng nhất, bạn nên sử dụng JPEG (hoặc JPG) cho hình ảnh nhiều màu sắc và PNG cho những hình ảnh đơn giản.
2. Chất lượng nén so với kích thước (Compression Quality vs Size)
Low compression (high quality) JPG – 590 KB
Ảnh thứ hai sử dụng tỉ lệ nén rất cao, dẫn đến chất lượng rất thấp (nhưng kích thước tệp nhỏ hơn). Lưu ý: Hình ảnh gốc chưa bị chỉnh sửa là 2,06 MB.
High compression (low quality) JPG – 68 KB
Như bạn có thể thấy, hình ảnh đầu tiên là 590 KB, một kích thước tệp khá lớn cho một bức ảnh! Tốt nhất bạn nên cố gắng giữ tổng trọng lượng của trang web ở mức dưới 1 hoặc 2 MB. Vậy thì 590 KB đã chiếm một phần tư số đó rồi.
Hình ảnh thứ hai rõ ràng trông quá khủng khiếp vì quá xấu, nhưng vì thế mà nó chỉ nặng có vỏn vẹn 68 KB. Vậy nên bạn mong muốn tìm được một phương pháp sao cho cân bằng hài hòa cả chất lượng và kích thước tệp của bạn.
Vì vậy, bức ảnh ngay sau đây chính là bức ảnh đạt sự cân bằng mong muốn đó, với dung lượng tệp là 151 KB, chất lượng hình ảnh có thể chấp nhận được (đối với ảnh có độ phân giải cao). Ảnh mới này nhỏ hơn 4 lần so với ảnh gốc. Đối với các hình ảnh đơn giản hơn như PNGs, chỉ nên dưới 100 KB để đạt hiệu suất tốt nhất.
Medium compression (great quality) JPG – 151 KB
3. Nén hình ảnh bằng Lossy và Lossless
Có hai loại nén bạn có thể sử dụng, lossy và lossless.
1. Lossy
Đây là một bộ lọc sẽ tiến hành loại bỏ đi một số dữ liệu. Điều này sẽ làm giáng cấp hình ảnh, vì vậy bạn phải cẩn thận về việc giảm đi bao nhiêu. Kích thước tập tin có thể được giảm xuống một lượng khá 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 khác để điều chỉnh cài đặt chất lượng của hình ảnh đó. Ví dụ mà chúng tôi đã sử dụng ở trên là sử dụng tính năng nén mất dữ liệu lossy.
2. Lossless
Đây là một bộ lọc nén dữ liệu. Điều này sẽ không làm giảm chất lượng nhưng nó sẽ yêu cầu các hình ảnh phải được giải nén trước khi chúng được hiển thị. Bạn có thể thực hiện nén lossless trên máy tính bằng các công cụ như Photoshop hoặc ImageOptim (https://imageoptim.com/mac).
Tốt nhất là bạn nên tự mình thử nghiệm cách nén hình ảnh để xem cái nào sẽ hiệu quả nhất cho mỗi hình ảnh hoặc mỗi định dạng cụ thể. Nếu công cụ của bạn có tùy chọn Save image for Web, hãy sử dụng nó. Đây là một tùy chọn có sẵn trong khá nhiều trình chỉnh sửa hình ảnh, nó cung cấp cho bạn các điều chỉnh chất lượng để thực hiện việc nén được tối ưu nhất. Chất lượng của ảnh sẽ giảm đi, vì vậy hãy thử nghiệm để tìm sự cân bằng tốt nhất mà không làm cho hình ảnh trở nên quá xấu xí.
4. Công cụ và chương trình tối ưu hình ảnh
Có rất nhiều công cụ và chương trình trực tuyến, cả mất phí và miễn phí để bạn sử dụng cho việc tối ưu hình ảnh. Một số ứng dụng cung cấp cho bạn các công cụ để thực hiện tối ưu của riêng mình, trong khi đó những ứng dụng còn lại sẽ thực hiện luôn công việc đó cho bạn. Affinity Photo (https://affinity.serif.com/en-us/photo/) là lựa chọn tuyệt vời vì nó khá rẻ và mang đến cho bạn các tính năng gần như giống hệt với Adobe Photoshop.
Nén ảnh bằng Affinity Photo
Dưới đây là một số công cụ và chương trình bổ sung bạn sẽ muốn dùng thử ngay để tối ưu hình ảnh cho web:
- Adobe Photoshop (http://www.photoshop.com/)
- Gimp (http://www.gimp.org/)
- Paint.NET (http://www.getpaint.net/index.html)
- GIFsicle (http://www.lcdf.org/gifsicle/)
- JPEGtran (http://jpegclub.org/jpegtran/)
- JPEG Mini (http://www.jpegmini.com/)
- OptiPNG (http://optipng.sourceforge.net/)
- pngquant (http://pngquant.org/)
- FileOptimizer (http://netm.ag/optimize-263)
- ImageOptim (http://imageoptim.com/)
- TinyPNG (https://tinypng.com/)
- Trimage (http://trimage.org/)
5. Thay đổi kích thước hình ảnh thành tỷ lệ (Resizing Images to Scale)
Trong quá khứ, điều quan trọng là bạn tải lên hình ảnh theo tỉ lệ và không cho phép CSS thay đổi kích thước của chúng. Tuy nhiên, điều này không còn quan trọng vì WordPress 4.4 hiện hỗ trợ responsive images (https://make.wordpress.org/core/2015/11/10/responsive-images-in-wordpress-4-4/) (không bị thu nhỏ bằng CSS). Về cơ bản, WordPress tự động tạo một vài kích cỡ của mỗi hình ảnh được tải lên thư viện media. Bằng cách gom nhóm các kích thước có sẵn của một hình ảnh vào thuộc tính srcset, 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ề mã bên dưới.
Ví dụ về srcset responsive images bằng code
6. Tối ưu hình ảnh tự động so với thủ công
Ngoài các nền tảng truyền thông xã hội, các trang web thương mại điện tử, các website sản phẩm, bán hàng, nội dung số… cũng đều chứa một lượng không lồ các hình ảnh dung lượng lớn hoặc có cấu trúc phức tạp. Các trang web phụ thuộc vào nội dung do người dùng tạo không thể buộc người dùng của họ tối ưu hóa hình ảnh trước khi tải lên. Thật khó để tưởng tượng Instagram hoặc Facebook yêu cầu người dùng tối ưu hình ảnh của họ và giảm kích thước trước khi tải lên.
Khi công nghệ tiến bộ, các phương pháp nén và định dạng hình ảnh mới dẫn đến nhu cầu cần phải chuyển đổi hoặc sắp xếp lại toàn bộ kho dữ liệu hình ảnh.
Vậy làm thế nào để chủ sở hữu trang web hoặc nền tảng có thể quản lý tối ưu hóa hình ảnh tốt hơn? Câu trả lời rất đơn giản: Sử dụng nhà cung cấp CDN với khả năng tối ưu hóa hình ảnh tự động. Tìm hiểu cách CDN tối ưu hình ảnh như thế nào tại đây!
Các nhà cung cấp như Bizfly Cloud cung cấp dịch vụ CDN giúp điều chỉnh toàn bộ quá trình nén hình ảnh theo trang web, hình ảnh và đối tượng cụ thể. Ngoài ra, các máy chủ CDN cũng có thể quản lý nội dung do người dùng tạo theo cách tuân thủ cấu trúc trang web, mã nguồn và thư viện phương tiện hiện có. Tìm hiểu thêm về CDN do Bizfly Cloud cung cấp.
Kết luận
Vậy là bạn đã hiểu cơ bản về Các cách tối ưu hình ảnh và tại sao phải tối ưu ảnh cho website. Hãy thực hiện ngay các bước được hướng dẫn.
Chúc các bạn thành công!
>> Có thể bạn quan tâm: Hướng dẫn nén ảnh bằng Công cụ compressor.io
Nguồn: Bizfly Cloud chia sẻ
Bizfly Cloud là hệ sinh thái điện toán đám mây được vận hành bởi VCCorp - Công ty dẫn đầu trong lĩnh vực công nghệ và truyền thông tại Việt Nam. Với đội ngũ kỹ thuật viên trình độ cao và kinh nghiệm lâu năm làm việc trên các công nghệ khác nhau như cloud, mobile, web..., chúng tôi có đủ khả năng để hỗ trợ đưa ra những giải pháp và công nghệ toàn diện giúp doanh nghiệp chuyển đổi số thành công. Dành cho độc giả quan tâm tới các dịch vụ đám mây do Bizfly Cloud cung cấp có thể truy cập tại đây.
