Nghe cứng quá nhỉ?! Nhưng đó là sự thật.
Nói về ảnh to quá cỡ, rất nhiều quản trị web mới vào nghề mắc lỗi này. Ví dụ ảnh chỉ hiển thị tối đa trên màn hình desktop là 600 – 800px nhưng lại dùng ảnh có kích cỡ lên đến hơn 2000px, làm dung lượng ảnh có thể tăng lên đến 4 – 5 lần. Điều này vừa làm chậm website, vừa làm dung lượng ổ SSD nhanh đầy.
SSD nhanh đầy làm bạn có hai thứ khổ: (1) bạn nhanh đến thời điểm phải nâng cấp lên gói hosting có dung lượng lưu trữ lớn hơn, đồng nghĩa với tốn tiền hơn; (2) mỗi khi bạn chuyển website sẽ mất thời gian, vất vả hơn.
OK, hiện chúng ta có nhiều plugin tốt để khắc phục các ảnh to quá mức trên trang mà trước đây đã up lên. Plugin ưa thích của tôi là Imsanity, nó free, chất lượng tốt.
Tuy nhiên vấn đề là nếu bạn dùng plugin để tối ưu hoàn toàn tự động cũng có nhược điểm. Vì có những ảnh chúng ta cần nó thực sự lớn. Ví dụ:
- Các ảnh sản phẩm, bạn muốn họ nhìn rõ ràng, và muốn để ảnh lớn khi người dùng click vào xem chi tiết;
- Nhiều ảnh chụp màn hình cần để lớn. Chẳng hạn như ngay trên website này, một số ảnh chụp màn hình tôi cố tình để lớn, bởi để nhỏ sẽ không chụp hết được toàn bộ khung hình cần thiết. Còn nếu chụp lớn rồi cố tình thu nhỏ nó lại thì nhìn sẽ không rõ.
Như vậy là có kha khá website có các ảnh lớn bao gồm cả dạng ảnh “cần để to” và ảnh “không cần để to”. Do vậy nếu sửa lại bạn sẽ phải sửa lại thủ công bằng plugin thay vì để plugin tự động hoàn toàn. Quá trình này có thể rất vất vả nếu bạn có nhiều ảnh, nhưng nếu phải làm thì nên làm, còn hơn để nó tự động hoá hoàn toàn & gây ra hạn chế cho người đọc trong các trường hợp họ cần nhìn to-rõ.
Một vấn đề khác mà tôi nhận thấy (dù là bạn bật tính năng tự động hoàn toàn để chỉnh kích cỡ cho ảnh cũ), đó là: ngay cả khi bạn sửa các ảnh to về ảnh nhỏ rồi và bật tính năng “Remove the large pre-scaled originals that WordPress retains for thumbnail generation” tức là để xoá ảnh gốc to đi và thay bằng ảnh nhỏ hơn, thì chỉ ảnh gốc to đó bị xoá. Các ảnh to “vừa vừa” khác tạo từ ảnh rất to đó không bị xoá (khi bạn up một ảnh rất to lên WordPress, nó sẽ tự động cắt ra các ảnh nhỏ hơn để tối ưu hiển thị trong các màn hình nhỏ hơn, đây là cách để giảm sai lầm của bạn, về tốc độ sẽ cải thiện, nhưng mặt khác nó càng làm vấn đề về dung lượng nghiêm trọng hơn).
Ngoài ra mã nguồn của ảnh trên trang trong nhiều trường hợp không thay đổi. Nó vẫn giữ mã nguồn ảnh cũ kiểu như thế này:
<img loading="lazy" width="1024" height="683" src="https://blank.ducanhplus.com/wp-content/uploads/2021/02/mountains-5842346-2-1024x683.jpg" alt="" class="wp-image-41" srcset="https://blank.ducanhplus.com/wp-content/uploads/2021/02/mountains-5842346-2-1024x683.jpg 1024w, https://blank.ducanhplus.com/wp-content/uploads/2021/02/mountains-5842346-2-300x200.jpg 300w, https://blank.ducanhplus.com/wp-content/uploads/2021/02/mountains-5842346-2-768x512.jpg 768w, https://blank.ducanhplus.com/wp-content/uploads/2021/02/mountains-5842346-2-1536x1024.jpg 1536w, https://blank.ducanhplus.com/wp-content/uploads/2021/02/mountains-5842346-2-2048x1365.jpg 2048w, https://blank.ducanhplus.com/wp-content/uploads/2021/02/mountains-5842346-2-1200x800.jpg 1200w, https://blank.ducanhplus.com/wp-content/uploads/2021/02/mountains-5842346-2-1980x1320.jpg 1980w" sizes="(max-width: 1024px) 100vw, 1024px">Bạn có thấy cái chỗ:
mountains-5842346-2-1024x683.jpgTức là ảnh lớn vừa vừa có cỡ 1024×683 vẫn đang còn trong mã nguồn chứ không phải ảnh nhỏ mà trong trường hợp này tôi đã thu về 600px.
Tức là giờ để sửa, bạn sẽ phải làm thêm hai việc:
- Tìm ảnh cũ to đùng trong thư viện media để xoá hoàn toàn nó đi;
- Thêm lại ảnh mới nhỏ hơn vào chỗ cũ.
Vất vả đấy chứ.
Có thể về sau có các plugin khác, hoặc chính plugin này phát triển tính năng giúp bạn sửa cả hai vấn đề trên. Nhưng có lẽ không đơn giản, vì xoá cả loạt ảnh, cũng như thay đổi mã nguồn ảnh trong nhiều bài viết chính xác 100% là một công việc chẳng dễ dàng gì. Cái gì liên quan đến xoá cũng phải cực kỳ cẩn thận.
OK, như vậy là chúng ta đã thấy ngay cả khi có các plugin hiện đại chất lượng cao trợ giúp việc chuyển ảnh to về ảnh nhỏ vất vả thế nào.
Đó là lý do vì sao, bạn càng sớm ý thức được quy trình chuẩn thì sẽ càng đỡ mệt mỏi trong chuyện sửa chữa hơn.
Đôi khi tôi cũng lười
Thành thật mà nói, tôi đôi khi cũng lười! Tức là đôi khi tôi có thể chụp màn hình nhỏ gọn hơn đấy, nhưng lại không làm và để nó hơi to.
Trời “chiên za” tối ưu mà thế à?!
=)))
Cái chuyện này là do hosting tôi dùng là loại VPS trên Vultr hoặc DigitalOcean vốn có dung lượng rất lớn. Ví dụ một hosting 60GB SSD có giá 12$, thế là nghĩ vài chục KB cũng thây kệ, đỡ mất công căn chỉnh!
Tuy nhiên, tôi đã phải thay đổi thói quen đó, vì phát hiện, nhiều hosting kiểu khác có dung lượng nhỏ hơn khá nhiều mà nhiều khi tôi hoặc khách hàng sẽ cần dùng đến dạng hosting đó (hosting dung lượng nhỏ thường được tối ưu nhiều thứ, có thể là giá rẻ hơn hoặc các tính năng khác bù vào, cài VPS bạn cần tìm hiểu nhiều về kỹ thuật chứ không ăn liền được như các gói hosting nhỏ như dạng share host đóng gói sẵn).
