Trong thế giới phát triển web hiện đại, việc tối ưu hóa hình ảnh luôn là một phần quan trọng để nâng cao hiệu suất và trải nghiệm người dùng. Một trong những công cụ mạnh mẽ giúp xử lý hình ảnh hiệu quả là thư viện Sharp. Sharp cho phép bạn thực hiện các thao tác xử lý hình ảnh như thay đổi kích thước, xoay, cắt xén, và nhiều hiệu ứng khác chỉ với một chuỗi các lệnh.

Trong bài viết này, chúng ta sẽ cùng tìm hiểu cách sử dụng transformation string với Sharp để biến hình ảnh của bạn thành những tác phẩm tối ưu nhất cho website phía server.

Bạn có thể đọc bài viết trước đó về tối ưu hóa hình ảnh phía client.

Cài đặt Sharp

Để bắt đầu, bạn cần cài đặt Sharp vào dự án Node.js của mình. Bạn có thể cài đặt thư viện này thông qua npm:

npm install sharp

Transformation String trong Sharp là gì?

Transformation string trong Sharp là cách mô tả một loạt các phép biến đổi hình ảnh mà bạn muốn áp dụng. Điều này có thể bao gồm thay đổi kích thước, cắt xén, thay đổi định dạng, hoặc thêm các hiệu ứng. Thư viện Sharp cho phép bạn dễ dàng sử dụng chuỗi lệnh này để xử lý hình ảnh mà không cần phải lo lắng về việc viết quá nhiều mã lệnh phức tạp.

Các Phép Biến Đổi Cơ Bản với Sharp

Thay đổi kích thước hình ảnh

Một trong những phép biến đổi phổ biến nhất là thay đổi kích thước của hình ảnh. Với Sharp, bạn có thể chỉ định chiều rộng và chiều cao mới cho hình ảnh của mình.

const sharp = require("sharp");

sharp("input.jpg")
  .resize(500, 300) // Chỉnh kích thước thành 500x300 pixel
  .toFile("output.jpg", (err, info) => {
    if (err) {
      console.error("Lỗi xử lý hình ảnh:", err);
    } else {
      console.log("Hình ảnh đã được xử lý:", info);
    }
  });

Ở đây, resize(500, 300) là transformation string được sử dụng để thay đổi kích thước của hình ảnh đầu vào.

Xoay hình ảnh

Nếu bạn muốn xoay hình ảnh theo một góc cụ thể, bạn có thể sử dụng phương thức rotate(degrees).

sharp("input.jpg")
  .rotate(90) // Xoay hình ảnh 90 độ
  .toFile("output.jpg", (err, info) => {
    if (err) {
      console.error("Lỗi xử lý hình ảnh:", err);
    } else {
      console.log("Hình ảnh đã được xử lý:", info);
    }
  });

Chuyển Đổi Định Dạng Hình Ảnh

Sharp hỗ trợ nhiều định dạng hình ảnh khác nhau. Bạn có thể chuyển đổi hình ảnh sang định dạng mới với phương thức toFormat().

sharp('input.jpg')
  .toFormat('png') // Chuyển đổi sang định dạng PNG
  .toFile('output.png', (err, info) => {
    if (err) {
      console.error('Lỗi xử lý hình ảnh:', err);
    } else {
      console.log('Hình ảnh đã được chuyển đổi:', info);
    }
  });

Các Phép Biến Đổi Nâng Cao

Sharp cũng hỗ trợ một số phép biến đổi nâng cao như thay đổi độ sáng, tương phản, hoặc áp dụng hiệu ứng khác. Bạn có thể kết hợp nhiều phép biến đổi trong một chuỗi.

sharp('input.jpg')
  .resize(500, 300)
  .rotate(45)
  .toFormat('png')
  .toFile('output.png', (err, info) => {
    if (err) {
      console.error('Lỗi xử lý hình ảnh:', err);
    } else {
      console.log('Hình ảnh đã được xử lý:', info);
    }
  });

Thực hành

Đây là source code của mình đã thực hiện transformation string với Sharp trong nodeJs. Mình đã tạo API upload và transformation để tiện cho việc mọi người download source code và test chức năng này.

Tối ưu hóa hình ảnh trong NextJs với sharp

Trong quá trình phát triển ứng dụng web, việc tối ưu hóa hình ảnh là một yếu tố quan trọng giúp giảm thời gian tải trang và cải thiện trải nghiệm người dùng. Next.js, một framework phổ biến để xây dựng ứng dụng React, đã tích hợp một hệ thống tối ưu hóa hình ảnh mạnh mẽ, tận dụng các tính năng của Sharp để xử lý và tối ưu hóa hình ảnh tự động.

Một trong những tính năng nổi bật của Next.js là component <Image />, giúp tối ưu hóa hình ảnh ngay khi được tải vào trang. Next.js sử dụng Sharp ở phía server để tự động tối ưu hóa hình ảnh, bao gồm các thao tác như thay đổi kích thước, nén và chuyển đổi định dạng hình ảnh.

Bằng cách sử dụng Sharp, Next.js có thể tối ưu hóa hình ảnh cho tốc độ tải trang nhanh hơn mà không cần can thiệp thủ công.

• Thay đổi kích thước hình ảnh: server NextJs có thể thay đổi kích thước hình ảnh dựa trên các thuộc tính width và height mà bạn cung cấp. Điều này giúp giảm kích thước hình ảnh không cần thiết, đặc biệt khi người dùng đang xem hình ảnh ở các kích thước nhỏ hơn.

• Tự động chuyển đổi định dạng: server NextJs có thể tự động chuyển đổi hình ảnh sang các định dạng tối ưu như WebP, giúp giảm dung lượng hình ảnh mà vẫn đảm bảo chất lượng.

Kết luận

Trong bài viết này, chúng ta đã khám phá cách sử dụng Sharp để thực hiện các phép biến đổi hình ảnh hiệu quả thông qua transformation string, bao gồm thay đổi kích thước, xoay, cắt xén và chuyển đổi định dạng hình ảnh. Việc sử dụng Sharp giúp tối ưu hóa hình ảnh nhanh chóng mà không cần quá nhiều mã lệnh phức tạp, mang lại sự linh hoạt và hiệu quả cao cho các dự án web.

Với sự kết hợp giữa Sharp và Next.js, quá trình tối ưu hóa hình ảnh trở nên đơn giản và hiệu quả hơn bao giờ hết, giúp các nhà phát triển tiết kiệm thời gian, nâng cao hiệu suất và mang lại chất lượng hình ảnh tối ưu cho ứng dụng web của mình.