Hình ảnh là một phần quan trọng của bất kỳ trang web hoặc ứng dụng nào, giúp làm cho nội dung hấp dẫn hơn về mặt hình ảnh.
Tuy nhiên, ảnh cũng có thể làm chậm trang web hoặc ứng dụng nếu hông được tối ưu hóa đúng cách.
Tại sao phải tối ưu hóa hình ảnh?
Có một số lý do tại sao việc tối ưu hóa hình ảnh lại quan trọng.
- Nó giúp cải thiện thời gian tải của trang web hoặc ứng dụng.
- Nó giảm lượng dữ liệu mà khách hàng cần tải xuống, tiết kiệm chi phí băng thông.
- Nó giúp cải thiện hiệu suất tổng thể của trang web hoặc ứng dụng.
Cách tối ưu hóa hình ảnh trong Next.js
Có một số cách để tối ưu hóa hình ảnh trong Next.js. Một là sử dụng thành phần Hình ảnh (Image component). Thành phần này tự động tối ưu hóa hình ảnh để tăng hiệu suất.
Một cách khác là sử dụng khả năng xử lý hình ảnh tích hợp. Next.js có thể tự động thay đổi kích thước, nén và tối ưu hóa hình ảnh để tăng hiệu suất.
Cách cuối cùng là sử dụng thư viện của bên thứ ba với nhiều khả năng tối ưu hóa hình ảnh như react-optimized-image
Sử dụng Thành phần Hình ảnh
Cách dễ nhất để tối ưu hóa hình ảnh trong Next.js là sử dụng Thành phần Hình ảnh. Để sử dụng nó, bạn chỉ cần nhập thành phần từ gói next/image .
Khi đã nhập thành phần này, bạn có thể sử dụng nó như bất kỳ thành phần nào khác trong React. Thành phần Hình ảnh có một số props (viết tắt của property, nghĩa là thuộc tính) mà bạn có thể sử dụng để kiểm soát cách nó hiển thị hình ảnh.
import Image from 'next/image'
export default function MyImage() {
return (
<Image
src="/my-image.jpg"
width="200"
height="200"
quality="100"
alt="My image"
/>
)
}
Trong ví dụ này, thành phần Hình ảnh hiển thị ảnh có chiều rộng (width) 200px và chiều cao (height) 200px.
Một số props bắt buộc cho thành phần Hình ảnh là chiều cao, chiều rộng, src và alt. src là URL của hình ảnh mà bạn muốn sử dụng. Sử dụng thuộc tính width và height để đặt chiều rộng và chiều cao của hình ảnh, tính bằng pixel. Alt là văn bản thay thế cho hình ảnh.
Một số props tùy chọn cho thành phần Hình ảnh là layout, loader, placeholder, và priority. Layout chỉ định bố cục của hình ảnh. Bạn có thể sử dụng loader để chỉ định trình tải hình ảnh tùy chỉnh. placeholder chỉ định một placeholder cho hình ảnh tùy chỉnh. priority chỉ định mức độ ưu tiên của hình ảnh.
Việc sử dụng thành phần Hình ảnh có lợi ích:
- Hiệu suất được cải thiện: Thành phần này tự động tối ưu hóa hình ảnh để đạt hiệu suất.
- Tự động thay đổi kích thước hình ảnh: Thành phần có thể tự động thay đổi kích thước ảnh để phù hợp với chiều rộng và chiều cao.
- Nén ảnh tự động: Thành phần Hình ảnh cũng có thể tự động nén ảnh để giảm kích thước tệp.
- Hỗ trợ tải chậm: Thành phần Hình ảnh cũng hỗ trợ tải chậm, có nghĩa là nó sẽ chỉ tải hình ảnh khi chúng hiển thị trên màn hình.
Sử dụng thư viện của bên thứ ba
Nếu bạn cần nhiều quyền kiểm soát hơn đối với việc tối ưu hóa hình ảnh, bạn có thể sử dụng thư viện của bên thứ ba như react-optimized-image.
Một số tính năng của react-optimized-image bao gồm:
- Tối ưu hóa hình ảnh trên máy khách và máy chủ: Reac-optimized-image có thể tối ưu hóa hình ảnh trên máy khách và máy chủ, nghĩa là hình ảnh được tối ưu hóa về hiệu suất cũng như kích thước tệp.
- Tự động thay đổi kích thước hình ảnh: Reac-optimized-image có thể tự động thay đổi kích thước ảnh để phù hợp với chiều rộng và chiều cao.
- Nén ảnh tự động: Reac-optimized-image cũng có thể tự động nén ảnh để giảm kích thước tệp.
- Hỗ trợ tải chậm: react-optimized-image cũng hỗ trợ tải chậm, có nghĩa là nó sẽ chỉ tải hình ảnh khi chúng hiển thị trên màn hình.
- Hỗ trợ nhiều định dạng hình ảnh: Reac-optimized-image hỗ trợ nhiều định dạng ảnh, bao gồm JPEG, PNG và WebP.
Để sử dụng react-optimized-image, bạn chỉ cần cài đặt thư viện với npm.
Sau đó, bạn có thể nhập nó vào dự án của mình.
import Img from 'react-optimized-image'
export default function NextImg() {
return (
<Img
src="/my-image.jpg"
sizes={[400, 800]}
alt="My image"
/>
)
}
Bạn cũng có thể sử dụng các tệp SVG với react-optimized-image.
import {Svg} from 'react-optimized-image'
export default function NextImg() {
return (
<Svg
src="/my-image.svg"
className=“filled-red”
/>
)
}
Ví dụ này sử dụng prop className để chỉ định tên lớp cho SVG. Bạn có thể sử dụng tên lớp đó để style cho SVG bằng CSS hoặc tương tác với nó bằng JavaScript.
react-optimized-image cũng cung cấp một số lợi ích khác ngoài khả năng tối ưu hóa hình ảnh tích hợp.
So với các tính năng tích hợp sẵn, một lợi ích của việc sử dụng gói là nó có thể tự động tạo các kích thước hình ảnh khác nhau. Điều này có nghĩa là bạn không phải tạo nhiều phiên bản khác nhau của cùng một hình ảnh.
Một lợi ích khác là nó có thể tự động cung cấp kích thước ảnh phù hợp cho thiết bị của người dùng. Các thiết bị có màn hình có độ phân giải cao sẽ nhận được hình ảnh có độ phân giải cao và ngược lại.
Cuối cùng, react-optimized-image là một dự án nguồn mở hoàn toàn, có nghĩa là bạn có thể đóng góp cho thư viện nếu bạn cần một tính năng cụ thể hoặc sửa lỗi.
Bạn nên sử dụng phương pháp nào?
Nếu bạn chỉ cần tối ưu hóa hình ảnh ở mức cơ bản, thì bạn có thể sử dụng khả năng xử lý hình ảnh tích hợp. Đây là cách dễ nhất để bắt đầu.
Nếu bạn cần kiểm soát nhiều hơn đối với việc tối ưu hóa hình ảnh, thì bạn có thể sử dụng thư viện của bên thứ ba như react-optimized-image. Thư viện này cung cấp cho bạn khả năng tối ưu hóa hình ảnh nâng cao hơn.
Nếu cần hiệu suất tốt nhất thì bạn có thể sử dụng kết hợp khả năng xử lý hình ảnh tích hợp và thư viện của bên thứ ba. Tuy nhiên, người mới bắt đầu không nên dùng phương pháp này vì nó yêu cầu thiết lập nhiều hơn.
Vân Nguyễn
Dịch từ: https://www.makeuseof.com/nextjs-images-optimize-maximize-quality/
Bình luận (0
)