Hướng dẫn tối ưu hóa hình ảnh JPG / JPEG cho website

Để tiếp nối với chủ đề tối ưu hóa website WordPress trên Pagespeed Insights, hôm nay tôi sẽ mang đến cho các bạn bài hướng dẫn về cách tối ưu hình ảnh cho website có định dạng JPG / JPEG hiệu quả bằng Photoshop.

Công cụ cần chuẩn bị

Phần mềm Photoshop phiên bản từ CS6 trở lên

Bắt đầu thực hiện tối ưu hình ảnh JPG / JPEG cho website

Tôi thường tải về các hình ảnh có kích thước lớn tại các trang như Google Images, Freebik, Shutterstock,… để sử dụng cho website. Nhưng thật không may, các hình ảnh này chưa được tối ưu nên việc tải lên website và sử dụng sẽ chiếm dung lượng lớn làm nhanh đầy bộ nhớ của Hosting / VPS. Hơn nữa, website sẽ tải lâu hơn khiến cho trải nghiệm người dùng cũng xấu đi.

Vì vậy, chúng ta cần tối ưu ảnh trước khi tải lên website.

Chúng ta hãy bật Photoshop lên và mở hình ảnh cần tối ưu bằng cách chọn File > Open (phím tắt: Ctrl+O) hoặc kéo thả hình ảnh vào Photoshop.

Tiếp theo, các bạn xem xét trang website của mình có thể chứa ảnh trong kích thước width (chiều ngang) nào thì nén ảnh theo kích thước đó. Ở đây, website Web MTP đang sử dụng kích thước width là 900px. Nhấn tổ hợp Ctrl+Alt+I hoặc chọn Image > Image Size để mở bảng điều chỉnh kích thước (resize).

Các bạn chỉ cần điều chỉnh thông số của Width là thông số Height sẽ tự động thay đổi theo tỉ lệ của ảnh.

Sau khi thay đổi kích thước xong, chúng ta lưu ảnh bằng cách vào File > Save for web… hoặc sử dụng phím tắt Ctrl+Alt+Shift+S và điều chỉnh thông số như ảnh bên dưới.

Như vậy, chúng ta đã hoàn tất việc tối ưu hình ảnh JPG / JPEG bằng các sử dụng phần mềm Photoshop rồi.

Cách này có còn dùng được không?

Đến bây giờ, cách này vẫn còn dùng được nhé. Nếu các bạn có thắc mắc gì thì để lại bình luận bên dưới, chúng tôi sẵn sàng trả lời câu hỏi của các bạn và thay đổi bài viết nếu cần thiết.