Bạn đã lưu ảnh đúng cách chưa? Hầu hết mọi người đều không biết làm thế nào lưu ảnh đúng cách và việc này tác động rất nhiều đến tốc độ tải của trang web. Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách làm thế nào để tối ưu hoá hình hảnh cho website.
Các chuyên gia viết blog thường hay nói với bạn rằng hình ảnh sẽ giúp tăng mức độ tương tác. Tuy nhiên có những điều họ không nói với bạn, chẳng hạn như không tối ưu hóa hình ảnh cho web có thể làm chậm trang web của bạn.
Theo phân tích của Strangeloop, thời gian trễ một giây có thể khiến bạn mất 7% doanh số, số lần truy cập trang ít hơn 11% và giảm 16% sự hài lòng của khách hàng.
Làm thế nào để lưu ảnh đúng cách?
Khi lưu ảnh, bạn cần cân nhắc 2 điều sau đây: định dạng tập tin ảnh, và độ nén. Bằng việc chọn đúng sự kết hợp, bạn có thể giảm kích thước của ảnh xuống 5 lần.
Đối với chúng ta, chỉ có hai định dạng hình ảnh quan trọng là JPEG và PNG. Để cho đơn giản, bạn hãy sử dụng JPEG cho ảnh hoặc hình ảnh có nhiều màu và sử dụng PNG cho hình ảnh đơn giản hơn hoặc khi bạn cần ảnh có nền trong suốt.
Đối với những bạn không biết sự khác biệt giữa 2 định dạng ảnh, thì PNG là định dạng hình ảnh không nén, có nghĩa là hình ảnh PNG có chất lượng cao hơn. Nhược điểm là kích thước tệp lớn hơn nhiều. Mặt khác, JPEG là định dạng tệp nén do đó giúp giảm bớt chất lượng hình ảnh nhằm cung cấp kích thước tệp nhỏ hơn đáng kể.
Tại HaStudio, phần lớn hình ảnh chúng tôi sử dụng trên web là JPEG.
Phần tiếp theo, nén ảnh có nghĩa là chúng ta sẽ sử dụng một công cụ để lưu hình ảnh được tối ưu hóa cho web. Nén ảnh có thể tạo ra sự khác biệt lớn.
Bạn hãy xem bảng dưới đây để thấy kết quả về một số kết hợp mà chúng tôi đã thử nghiệm để lưu hình ảnh.
tối ưu hoá hình hảnh cho website
Công cụ nén ảnh cho người viết Blog
Bây giờ bạn đã thấy sự khác biệt mà mỗi cách nén ảnh tạo ra, dưới đây là các công cụ thể giúp bạn lưu hình ảnh được tối ưu hóa cho web và cải thiện tốc độ trang web của bạn.
Adobe Photoshop
Adobe Photoshop là phần mềm chỉnh sửa ảnh cao cấp đi kèm với một tính năng giúp lưu hình ảnh tối ưu hóa cho web. Chỉ cần mở hình ảnh của bạn và nhấp vào nút File> Save for Web & Devices.
Thao tác này sẽ mở màn hình lưu. Ở bên phải, bạn có thể chọn các định dạng hình ảnh khác nhau. Đối với định dạng JPEG, bạn sẽ thấy các tùy chọn chất lượng khác nhau. Khi bạn chọn các tùy chọn, nó cũng sẽ cho bạn thấy kích thước tập tin ở phía dưới bên phải.
Lưu ý: Chúng tôi biết rằng giá bản quyền Photoshop khá đắt, và chúng ta không thể mua Photoshop chỉ để lưu ảnh tối ưu cho web.
Vì vậy chúng ta có những lựa chọn miễn phí khác được liệt kê dưới đây cho bạn.
GIMP là một lựa chọn thay thế miễn phí mà bạn có thể sử dụng cho việc lưu ảnh tối ưu cho web. Các sản phẩm khác của Adobe như Fireworks cũng có thể thực hiện công việc tương tự.
TinyPNG
TinyPNG là một ứng dụng web miễn phí sử dụng kỹ thuật nén lossy thông minh để giảm kích thước tệp PNG của bạn. Tất cả những gì bạn phải làm là truy cập trang web của họ và tải lên hình ảnh của bạn. Họ sẽ nén hình ảnh và cung cấp cho bạn liên kết tải xuống.
Đối với nhà phát triển, họ cũng có API để chuyển đổi hình ảnh tự động.
JPEG Mini
JPEGmini sử dụng công nghệ nén recompression giúp giảm đáng kể kích thước hình ảnh mà không ảnh hưởng đến chất lượng cảm nhận của chúng. Bạn có thể sử dụng phiên bản web của họ miễn phí hoặc mua chương trình cho máy tính của bạn. Họ cũng có API trả phí để tự động hóa quy trình cho máy chủ của bạn.
ImageOptim
ImageOptim là một tiện ích trên máy Mac cho phép bạn nén hình ảnh mà không làm mất bất kỳ chất lượng nào bằng cách tìm các thông số nén tốt nhất và loại bỏ các cấu hình màu không cần thiết.
Tượng tự trên hệ điều hình Windows bạn có thể dùng phần mền thay thế là Trimage.
Như bạn thấy đó có một số công cụ bạn có thể sử dụng để tối ưu hóa hình ảnh cho web. Khi sử dụng tính năng nén của Photoshop, chúng tôi thấy kết quả tốt nhất về kích thước tuy nhiên chất lượng bị ảnh hưởng. TinyPNG là một lựa chọn tốt nhất để lưu định dạng ảnh PNG cho web.
Bạn có thể sử dụng kết hợp TinyPNG hoặc JPEG Mini và Image Optim để có kết quả tốt hơn. Tuy nhiên chạy hai công cụ riêng biệt để tối ưu hoá kích thước ảnh có thể sẽ tăng khối lượng công việc của bạn một chút vì vậy bạn nên cân nhắc.
Vài nhận xét sau cùng về việc tối ưu hóa hình ảnh
Nếu bạn chưa lưu hình ảnh tối ưu hóa cho web thì hãy bắt đầu làm ngay bây giờ. Nó có thể tạo ra sự khác biệt lớn về tốc độ trang web của bạn và người xem của bạn sẽ cảm ơn bạn vì điều đó. Chắc chắn chất lượng hình ảnh có thể giảm nhẹ nhưng hầu hết người dùng sẽ không nhận thấy điều đó bằng mắt thường.
Chúng tôi hy vọng bạn thấy bài viết này hữu ích.
Bạn có bạn bè là blogger đang lưu hình ảnh sai? Hãy chia sẻ bài viết này với họ, để họ có thể tăng tốc trang web. Họ sẽ cảm ơn bạn vì điều đó.
Nếu bạn có bất kỳ câu hỏi nào, vui lòng để lại nhận xét bên dưới. Và cũng đừng quên theo dõi chúng tôi trên Facebook.
