VIG Digital
arrow_back Tất cả bài viết
WEBSITE 1 tháng 12, 2020 · 5 phút đọc

Hướng dẫn Tối ưu hình ảnh trước khi đăng lên Website

Tối ưu hình ảnh là gì?

Tối ưu hoá hình ảnh là hành động giảm kích thước file hình ảnh mà không làm giảm chất lượng hiển thị của hình ảnh trên website. Tối ưu hóa hình ảnh bao gồm 3 việc chính là:

  1. Chọn định dạng phù hợp
  2. Sử dụng kích thước phù hợp
  3. Nén ảnh không giảm chất lượng

Ví dụ minh họa:

  • Hình gốc: 880KB
  • Hình đã tối ưu: 102KB (giảm 89% dung lượng nhưng vẫn giữ được chất lượng)

Tại sao cần tối ưu hình ảnh?

Theo nghiên cứu của Strangeloop, thời gian tải trang web chậm trễ một giây có thể khiến mất 7% doanh thu, giảm 11% số lần xem trang và giảm 16% sự hài lòng khách hàng.

Hình ảnh chiếm trung bình 21% tổng dung lượng của trang web, chỉ sau nội dung video.

Lợi ích của tối ưu hóa hình ảnh:

  • Cải thiện tốc độ tải trang
  • Cải thiện thứ hạng SEO
  • Tỷ lệ chuyển đổi cao hơn
  • Tạo bản sao lưu dữ liệu nhanh hơn
  • Sử dụng ít băng thông hơn
  • Sử dụng ít dung lượng lưu trữ trên máy chủ

3 bước tối ưu hoá hình ảnh cho Website

Bước 1: Chọn định dạng hình ảnh

JPG

Định dạng này phù hợp để hiển thị ảnh trên trang web vì cho phép hiển thị chất lượng tương đối tốt và kích thước tệp nhỏ.

PNG

Hình ảnh có chất lượng cao hơn nhưng tiêu tốn nhiều dung lượng lưu trữ hơn. Chỉ nên sử dụng khi cần ảnh không có nền (nền trong suốt).

Chuyển đổi PNG sang JPG

Có thể sử dụng công cụ miễn phí png2jpg.com để chuyển đổi các tệp hình ảnh PNG sang định dạng JPEG mà không yêu cầu đăng ký, cho phép chuyển đổi hàng loạt với dung lượng tệp đến 50MB.

Bước 2: Điều chỉnh kích thước hình ảnh

Thường khi tải ảnh lên web, người dùng bỏ qua thông số kích thước, đặc biệt với ảnh từ điện thoại hoặc máy ảnh có độ phân giải cao.

Nếu khung hình của hình ảnh có kích thước 500 x 500 nhưng tải lên hình ảnh 1024 x 1024, các pixel dư thừa chỉ làm tăng kích thước tệp và giảm tốc độ trang web.

Công cụ thay đổi kích thước:

Trên Windows: Paint

  1. Mở Paint, đặt con trỏ vào hộp tìm kiếm Windows và nhập “paint”
  2. Nhấp vào File > Open và điều hướng đến vị trí hình ảnh
  3. Nhấp vào tab Home và sử dụng công cụ Resize

Trên Mac OS: Mac Preview

  1. Mở ứng dụng Preview và sử dụng menu File để nhập hình ảnh
  2. Chọn Tools > Adjust Size
  3. Chọn chiều rộng và chiều cao mới
  4. Nhấp vào File và chọn Save

Online: Pixlr X

  1. Chọn “Open Image from computer”
  2. Nhấp vào biểu tượng “Arrange” ở phía bên trái
  3. Chọn “Resize”
  4. Nhấp vào nút “Apply” và sau đó “Save”

Bước 3: Nén hình ảnh

Sau khi có hình ảnh cuối cùng, ở định dạng phù hợp và được cắt theo kích thước thích hợp, có thể thực hiện thêm bước nén hình ảnh.

Nén hình ảnh sử dụng công nghệ nén “Lossy” và “Lossless”:

  • Lossless: Dùng thuật toán đơn giản các phần dữ liệu dư thừa, không cần thiết và không làm mất dữ liệu
  • Lossy: Loại bỏ hoàn toàn một phần của dữ liệu, làm giảm chất lượng hình ảnh

Nén thủ công

Các công cụ chỉnh sửa hình ảnh như Adobe Photoshop, On1 Photo, GIMP, Affinity Photo đều có các tính năng nén hình ảnh tích hợp sẵn. Cũng có thể sử dụng công cụ web như TinyPNG, JPEG Mini, ImageOptim.

TinyPNG:

Công cụ trên trình duyệt này tối ưu hóa hình ảnh bằng cách sử dụng tính năng nén thông minh, giảm kích thước tệp bằng cách giảm số lượng màu được sử dụng. Nó miễn phí và nhanh chóng để sử dụng cho PNG và JPEG.

Nén bằng Plugin

Các plugin WordPress phổ biến như WP Smush, Optimole, EWWW Image Optimizer có thể tự động nén hình ảnh khi tải lên lần đầu tiên.

WP Smush:

Với hơn 1 triệu cài đặt, nó là plugin nén ảnh phổ biến nhất trên WordPress:

  • Làm giảm thông tin ẩn khỏi hình ảnh mà không làm giảm chất lượng
  • Quét hình ảnh mới khi tải lên
  • Quét những hình ảnh đã tải lên trước đó
  • Có thể nén lên đến 50 tệp cùng lúc
  • Hỗ trợ định dạng JPEG, GIF và PNG
  • Kích thước tệp giới hạn ở 1MB ở bản miễn phí

Công cụ chỉnh sửa hình ảnh

Photoshop

Adobe Photoshop là phần mềm chỉnh sửa đồ họa được phát triển bởi hãng Adobe Systems, ra đời vào năm 1988 trên hệ máy Macintosh. Nó được đánh giá là phần mềm dẫn đầu thị trường về sửa ảnh.

Photoshop hữu ích cho những người thường xuyên tải hình ảnh lên website hay blog, với chức năng “Save for web” giúp tối ưu dung lượng hình ảnh.

Canva

Canva là công cụ thiết kế đồ hoạ được thành lập năm 2012. Nó sử dụng định dạng kéo thả và cung cấp quyền truy cập vào hơn một triệu bức ảnh, đồ họa và phông chữ. Phù hợp cho những người không phải là nhà thiết kế chuyên nghiệp.

Lời kết

Tối ưu hình ảnh là những cách đơn giản và hiệu quả nhất để cải thiện tốc độ trang web. Tuy nhiên hiệu suất của website còn phụ thuộc vào rất nhiều yếu tố khác đòi hỏi kiến thức sâu và công sức để đạt được kết quả tốt nhất.