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
Hình ảnh là 1 trong số các thành phần có ảnh hưởng lớn đến tốc độ tải trang. Với những website sử dụng càng nhiều hình ảnh, thì mỗi hình ảnh được tối ưu 1 chút sẽ giúp làm tăng tốc khá đáng kể.
Một trong những tiêu chí tối ưu hình ảnh cho website, đó là tối ưu về kích thước hiển thị. Kích thước hiển thị được tối ưu, thường kéo theo dung lượng lượng ảnh cũng như chất lượng hình ảnh được tối ưu.
Ví dụ về ảnh hưởng của ảnh không đúng kích thước đối với hiệu năng website
Hình ảnh đại diện cho bài viết với kích thước hiển thị 100x100px
Hình 1: Kích thước ảnh đại diện sẽ hiển thị là 100 x 100
Do đó chúng ta chỉ cần 1 ảnh có kích thước đúng 100x100 thay vì sử dụng hình ảnh giống như trong bài viết, có kích thước lớn.
Hình 2: Ảnh có kích thước lớn 650x406 dung lượng 42,52KB
Chúng ta sẽ sử dụng hình ảnh nhỏ sau làm ảnh đại diện
Hình 3: Ảnh kích thước 100x100 dung lượng 5.50KB.
Ví dụ trên cho ta thấy, với việc sử dụng hình ảnh đúng kích thước hiển thị, ta có thể giảm được gần 37,02KB cho 1 ảnh (~87%) mà không làm giảm chất lượng hiển thị của hình ảnh.
Hơn nữa việc dùng đúng kích thước của ảnh còn tránh được việc ảnh bị vỡ hoặc không hiển thị được hết nội dung ảnh.
Sau đây, Bizfly Cloud sẽ giới thiệu 1 số công cụ đơn giản và hướng dẫn chỉnh sửa ảnh cho đúng kích thước.
Hướng dẫn giảm dung lượng ảnh, tối ưu kích thước hiển thị ảnh
Để website sử dụng hình ảnh đúng kích thước hiển thị, ta cần làm các bước sau:
Bước 1: Chuẩn bị ảnh
Bước 2: Xác định kích thước sẽ hiển thị trên website (dựa vào cấu hình, setup của web...)
Bước 3: Chỉnh kích thước ảnh cho phù hợp
Nén và giảm dung lượng ảnh online với Shrink Me
Là công cụ giúp giảm dung lượng hình ảnh, Shrink Me không giới hạn cả số lượng ảnh và dung lượng ảnh tải lên. Do đó, số dung lượng ảnh có thể giảm được là tương đối nhiều trong khi chất lượng so với ảnh gốc không bị thay đổi. Để sử dụng, bạn làm theo các bước:
1: Truy cập công cụ theo đường link: https://shrinkme.app/
2: Tìm và nhấn vào nút Select để tải ảnh lên. Công cụ hỗ trợ các định dạng gồm JPG, PNG và Webp. Cho phép tải nhiều ảnh cùng lúc.
3: Ngay khi hoàn tất tải ảnh lên, phần mềm sẽ thực hiện công việc giảm dung lượng ảnh. Dung lượng tối ưu mới và số % dung lượng giảm tương ứng sẽ được thể hiện để người dùng nắm được. Chọn Save để tải file.
File tải về máy sẽ ở định dạng zip và cần phải giải nén để lấy hình ảnh.
Compressnow nén dung lượng ảnh
Compressnow cũng là một trang hỗ trợ giảm dung lượng ảnh được sử dụng khá phổ biến vì miễn phí và sử dụng vô cùng đơn giản. Các định dạng ảnh được hỗ trợ đa dạng: JPG, GIF, JPEG, PNG. Thao tác rất đơn giản, bạn không cần tạo tài khoản mà có thể trực tiếp tải ảnh lên, sau đó chọn tỉ lệ bạn cần nén là xong. Tuy nhiên Compressnow chỉ hỗ trợ 9MB dung lượng ảnh tải lên.
1: Truy cập vào trang web theo đường link: http://compressnow.com/
Chọn click vào Upload Image để tải ảnh lên.
2: Khi tải ảnh hoàn tất, dung lượng của ảnh gốc cũng sẽ được hiển thị cho người dùng. Điều chỉnh thanh nén dung lượng bên trên để giảm dung lượng ảnh như mong muốn, điều chỉnh đến đâu thì dung lượng sẽ giảm tương ứng đến đấy. Compressnow có tỷ lệ nén mặc định là 20%, nếu bạn muốn nén càng nhiều thì chất lượng ảnh sẽ càng giảm và ngược lại.
Sau khi đã chọn xong tỷ lệ giảm dung lượng ảnh, click Compress now để thực hiện.
3: Tại khung hình bên phải trên trang, sẽ hiển thị hình ảnh sau khi đã nén kèm thông tin về dung lượng hiện tại và dung lượng đã giảm. Để lưu ảnh về máy, click Download hoặc click chuột phải vào ảnh, sau đó chọn Save lại.
Dùng Kraken để nén
Kraken cũng sở hữu nhiều đặc điểm tương đồng với Compressnow. Để nén ảnh bằng kraken, bạn thực hiện theo các bước sau:
1: Truy cập trang chủ của Kraken tại: https://kraken.io/web-interface
2: Tìm mục Select source of images và click vào File uploader để tải các ảnh cần nén lên. Ngoài ra, trang còn hỗ trợ tải ảnh theo link URL hoặc nén ảnh ngay trên web sử dụng Page cruncher. Tuy nhiên, để sử dụng 2 tùy chọn này, bạn cần đăng ký tài khoản.
Sau đó, click chuột vào mũi tên phía dưới ảnh để tải ảnh từ máy lên.
3: Để giảm dung lượng, chọn Resize your images, sẽ có tùy chọn nếu bạn vẫn muốn giảm kích thước ảnh hay không để bạn lựa chọn. Sau khi ảnh được nén, hình ảnh sẽ kèm theo các chi tiết dung lượng gốc, dung lượng sau khi nén và dung lượng ảnh đã giải nén. Để tải ảnh chọn nhấn vào Download File.
Công cụ WebResizer
Ngoài nén ảnh, giảm dung lượng mà vẫn giữ nguyên chất lượng ảnh như các nền tảng kể trên, WebResizer còn hỗ trợ thêm rất nhiều tùy chọn để chỉnh sửa ảnh như cắt ảnh, thêm viền, xoay ảnh,... Các thao tác với WebResizer như sau:
1: Truy cập website: http://webresizer.com/resizer/
2: Nhấp vào ô Chọn tệp và chọn các ảnh bạn cần nén để tải lên, sau đó chọn Upload image và ảnh của bạn sẽ được tải lên.
3: Khi thao tác đã hoàn thành, bạn sẽ nhận được Optimized Image là ảnh đã được giảm dung lượng và Original Image là hình ảnh gốc. WebResizer có thể hỗ trợ giảm tới hơn 90% dung lượng ảnh. Nếu bạn cần các hình ảnh có dung lượng cần nén tối đa thì có thể cân nhắc giải pháp này.
4. Bạn chọn Download this image, ảnh đã nén sẽ được tải về máy. 1 điểm cộng nữa của công cụ là hỗ trợ thêm 1 số tùy chọn như Border – tạo viền cho hình ảnh, hay Crop Image để cắt ảnh, và 1 số tùy chọn khác…Click apply changes để lưu các thay đổi bạn vừa thực hiện.
Dùng paint của windows để chỉnh sửa kích thước ảnh
Bước 1: Ảnh hiện có
Bước 2: Kích thước ảnh cần chỉnh thành 100x100
Bước 3: Mở bức ảnh cần chỉnh sửa bằng paint, sau đó chọn Resize
Paint cho 2 lựa chọn chỉnh kích thước, theo phần trăm, hoặc theo pixel. Ở đây ta sẽ chọn Pixel
Bạn có thể nhấn vào ô "Maintain aspect radio", để khi bạn điều chỉnh chiều ngang thì chiều dài cũng sẽ được điều chỉnh theo, khiến hình không bị méo.
Còn nếu fix cứng kích thước 2 chiều thì không tick vào ô này, ta sẽ nhập Horizontal – chiều ngang là 100 pixel, và Vertical -chiều dọc là 100 pixel.
Sau đó bấm OK và Save ảnh lại
Ta sẽ có kết quả
Ta có thể sử dụng ảnh này để dùng làm ảnh đại diện cho bài viết, và dùng ảnh ban đầu để làm ảnh bên trong nội dung bài.
Trên đây là hướng dẫn giảm dung lượng ảnh và tối ưu kích thước ảnh với các công cụ trực tuyến và thủ công phổ biến, dễ sử dụng đối với những người không có nhiều kinh nghiệm về chỉnh sửa ảnh.
Ngoài ra , các bạn cũng có thể sử dụng các công cụ khác như Photoshop ..., một số trang web chỉnh sửa ảnh online khác như https://resizeimage.net/ .... , hoặc sử dụng các plugin chỉnh sửa ảnh được hỗ trợ cho 1 số loại CMS.
Với cách làm thủ công như trên, chúng ta sẽ khá mất thời gian và công sức cho từng bức ảnh. Trong khi đó, hình ảnh là một thành phần cực kỳ quan trọng khi xây dựng và phát triển website. Trên thực tế, số lượng ảnh trên mỗi website có thể lên tới vài trăm thậm chí vài nghìn tấm, chưa kể đối với các website cập nhật nội dung hàng ngày, số lượng ảnh cũng có thể tăng lên từng giờ. Việc tối ưu thủ công lúc này có thể là không khả thi.
Để giải quyết vấn đề này, Bizfly Cloud giới thiệu giải pháp Bizfly CDN với tính năng tự động chỉnh kích thước ảnh cho phù hợp với kích thước hiển thị mà không làm giảm chất lượng.
Khi tích hợp CDN trên hệ thống toàn bộ hình ảnh của website sẽ được tự động resize lại theo đúng tiêu chuẩn mà không cần bất cứ thao tác thủ công nào. Điều quan trọng là chất lượng hình ảnh được đảm bảo khi đã resize ,không làm ảnh hưởng đến trải nghiệm xem trang của khách hàng. Kích thước ảnh giảm, kéo theo dung lượng ảnh giảm giúp tổng thể website "nhẹ hơn", và kết quả là tốc độ tải web được đẩy nhanh hơn. Khách hàng sẽ được tận hưởng những trải nghiệm lướt web mượt mà và thỏa mãn về mặt thị giác. Khách hàng ở lại lâu hơn, đồng nghĩa với việc hiểu biết về sản phẩm, thương hiệu nhiều hơn, ấn tượng tốt đẹp hơn và cuối cùng mua sắm nhiều hơn. Cảm tình thương hiệu gia tăng hứa hẹn cho những lần quay lại lần sau. Đây là một trong những yếu tố vô cùng quan trọng tạo đà cho việc xây dựng lòng trung thành của khách hàng để gắn kết và lan tỏa thương hiệu dài lâu.
>> Tìm hiểu thêm: Content Delivery Network - CDN là gì? Sử dụng CDN như thế nào?
Để giúp giúp khách hàng được trải nghiệm và cảm nhận chất lượng dịch vụ chân thực và trực tiếp nhất, Bizfly Cloud hiện đang hỗ trợ MIỄN PHÍ CDN bản dùng thử 100GB trong 30 ngày. Khách hàng có thể truy cập và đăng ký tài khoản ngay hôm nay tại: https://bizflycloud.vn/cdn/
Theo Bizfly Cloud chia sẻ
>>Có thể bạn quan tâm: 4 bước tăng tốc website nhiều ảnh dung lượng lớn
