Làm Thế Nào Để Tối Ưu Hình Ảnh Cho Web

Bạn có đang tối ưu hình ảnh sai cách? Phần lớn người dùng mới không biết làm thế nào để tối ưu hình ảnh một cách chuẩn xác, điều mà có thể có một tác động lớn đến tốc độ 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 hóa hình ảnh cho web.

Mọi chuyên gia về blogging đều sẽ nói với bạn rằng các hình ảnh giúp bài viết của bạn sinh động hơn. Tuy nhiên điều mà họ không nói với bạn là việc không tối ưu hóa các hình ảnh cho web có thể làm chậm trang của bạn lại. Theo như Strangeloop, sự chậm trễ dù chỉ là một giây có thể lấy đi của bạn 7% tổng số sale, 11% lượt xem trang, và giảm 16%  sự hài lòng của khách hàng.

tối ưu hình ảnh

Làm thế nào để tối ưu hình ảnh một cách hợp lý

Khi tối ưu hình ảnh, bạn cần phải cân nhắc đến hai điều: định dạng file của hình ảnh, và việc nén. Bởi việc chọn ra các kết hợp chính xác, bạn có thể làm giảm đi kích thước của hình ảnh đến 5 lần. Các bạn có thể tham khảo thêm bài viết 6 plugin nén ảnh tốt nhất hiện nay.

Cho phần lớn trong chúng ta, hai định dạng hình ảnh duy nhất mà thực sự quan trọng là JEPG và PNG. Để giữ cho mọi thứ được đơn giản, sử dụng JPEGs cho các hình ảnh với nhiều màu sắc, và sử dụng PNGs cho các hình ảnh đơn giản hoặc khi bạn cần các hình ảnh rõ ràng.

Cho những ai mà không biết sự khác biệt giữa hai định dạng, thì định dạng hình ảnh PNG là định dạng không thể nén. Điều này có nghĩa là nó là định dạng hình ảnh chất lượng cao hơn. Điểm trừ là kích thước sẽ lớn hơn rất nhiều. Mặt khác, JPEG là một định dạng file nén mà phần nào giảm đi chất lượng của hình ảnh để cung cấp một kích thước file nhỏ hơn.

Trên dieuhau phần lớn các hình ảnh của chúng tôi là JPEGs.

Điều tiếp theo là việc nén ảnh có nghĩa là sử dụng một công cụ để tối ưu hình ảnh cho web.

Việc nén này có thể tạo ra một sự khác biệt lớn.

Hãy xem bảng dưới đây, mà đã nhấn mạnh vài kết hợp chúng tôi có thể đã sử dụng để tối ưu hình ảnh Strangeloop từng được sử dụng trong bài viết này.

Các công cụ nén ảnh cho các bloggers

Giờ thì bạn đã nhìn ra sự khác biệt giữa mỗi loại nén, dưới đây là cách mà bạn có thể tối ưu hình ảnh một cách hợp lý hình ảnh được tối ưu hóa cho web và tăng tốc cho trang của mình.

Adobe Photoshop

Adobe Photoshop là một phần mềm nâng cao mà đi cùng với một tính năng để tối ưu hình ảnh cho web. Đơn giản mở hình ảnh của bạn ra và click vào File, chọn Save for Web & Devices.

Việc này sẽ mở ra một màn hình Save. bên phải, bạn có thể thiết lập các định dạng hình ảnh khác nhau. Cho định dạng JPEG, bạn sẽ thấy các lựa chọn chất lượng khác nhau. Khi bạn chọn các lựa chọn cho mình, nó cũng sẽ hiển thị cho bạn kích thước file ở bên phải phía dưới.

Lưu ý: chúng tôi hiểu rằng Photoshop khá là tốn kém. GIMP là một giải pháp miễn phí mà người dùng có thể sử dụng. Các sản phẩm khác của Adobe như Fireworks cũng có thể làm việc việc đó.

photoshopsaveforwebscreen

TinyPNG

TinyPNG là một ứng dụng cho web miễn phí sử dụng kỹ thuật lossy compression thông minh để giảm tải kích thước các file PNG của bạn. Tất cả những gì bạn phải làm là đi đến website của họ và tải lên các hình ảnh của mình. Họ sẽ nén hình ảnh, và đưa cho bạn link tải xuống.

Cho các nhà phát triển, họ cũng sẽ có một API để chuyển đổi các hình ảnh một cách tự động.

JPEG Mini

JPEGmini sử dụng một công nghệ nén lặp lại giảm đi đáng kể kích thước của các hình ảnh mà không ảnh hưởng nhiều đến chất lượng 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 mình. Họ cũng có một API mất phí để tự động hóa quá trình này cho máy chủ của bạn.

ImageOptim

ImageOptim là một tính năng của Mac mà cho phép bạn nén các hình ảnh mà không bị giảm đi chất lượng bằng việc tìm các thông số nén tốt nhất và dời đi các profile màu sắc không cần thiết.

Như bạn có thể thấy rằng có một vài công cụ mà bạn có thể sử dụng để tối ưu hóa các hình ảnh cho web. Khi sử dụng công cụ nén Photoshop, chúng tôi thấy các kết quả tốt nhất về kích thước tuy nhiên chất lượng lại bị ảnh hưởng. TinyPNG dẫn đầu trong việc lưu lại bất cứ loại PNG nào trên web.

Vài người khuyên bạn rằng bạn có thể sử dụng một kết hợp giữa TinyPNG hoặc JEPG mini và Image Optim cho các kết quả tốt hơn. Tuy nhiên, việc chạy hai công cụ riêng biệt để tải lên các hình ảnh có thể làm nặng thêm công việc tải cho bạn một chút.

Ý kiến cuối cùng trong việc tối ưu hình ảnh

Hãy bắt đầu việc tối ưu ảnh ngay bây giờ. Nó có thể tạo ra một khác biệt lớn trong tốc độ của trang web. Và chắc chắn chất lượng của hình ảnh có thể giảm đi một chút, nhưng phần lớn người dùng sẽ không để ý đến việc đó.

Nếu bạn đang hướng đến chất lượng hình ảnh, thì hãy xem hướng dẫn của chúng tôi trong việc làm thế nào để tìm các hình ảnh miễn phí chất lượng cao cho các bài đăng blog của mình.

Cuối cùng nhưng chắc chắn cũng không kém quan trọng, việc sử dụng một CDN để serve các hình ảnh của trang WordPress của bạn có thể đẩy nhanh tốc độ trang một cách đáng kể. Hãy tham khảo infographic này để xem một CDN là gì, và sử dụng hướng dẫn trong việc làm thế nào để thiết lập cloudflare CDN cho trang của bạn. Chúng tôi đang sử dụng MaxCDN cho trang của mình.

Chúng tôi hy vọng bạn thấy bài viết này hữu ích.

Bạn có người bạn là blogger nào mà đang tối ưu hình ảnh của họ sai cách hay không? Chia sẻ bài viết này với ho, như vậy họ có thể tăng tốc trang của họ. Họ sẽ phải cảm ơn bạn vì điều đó. Bạn có thể tham khảo thêm bài viết 18 thủ thuật hữu ích để tăng tốc độ wordpress.

Về tác giả

Duy Anh

Chào các bạn,

Mình là coder, đang sống và làm việc ở Mỹ. Mình thích viết lách nên muốn dành khoảng thời gian trống để chia sẻ các thủ thuật giúp các bạn xây dựng được trang web riêng của mình. Bạn nào cần xây dựng blog, web thì cứ ới, rảnh là mình giúp, tất cả FREE nhé!

2 Bình luận

Ý kiến cá nhân của bạn

bộ công cụ Wordpress hữu ích dành cho mọi website

Bộ công cụ hữu ích dành cho mọi website Wordpress

Bao gồm theme & plugin tốt nhất và được sử dụng nhiều nhất!

Xin vui lòng kiểm tra email để xác thực tài khoản!