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

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

Toi-uu-hinh-anh-cho-website

Hình ảnh là một trong những yếu tố rất quan trọng ảnh hưởng đến hiện quả hoạt động cùa website, bao gồm tốc độ trang web, trải nghiệm người đọc, băng thông, tổng dung lượng web… Do đó, nếu bạn muốn website hoạt động tốt trong thời gian dài, thì việc tối ưu hình ảnh trước khi đăng lên website là công việc phải làm.

Trong bài viết này, TADA sẽ hướng dẫn bạn 3 bước tối ưu hình ảnh rất đơn giản, giúp người không chuyên cũng có thể làm được dễ dàng. Chắc chắn sau khi thực hiện theo các hướng dẫn, website của bạn sẽ hoạt động hiệu quả ấn tượng trong thời gian tới.

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.

Đây là một ví dụ cho việc tối ưu hoá hình ảnh:

hinh anh toi uu goc
Hình gốc – 880KB
hinh-anh-da-toi-uu
Hình đã tối ưu – 102KB, giảm 89% dung lượng nhưng vẫn giữ được chất lượng hiển thị trên website.

Link ảnh gốc và ảnh đã tối ưu để các bạn so sánh

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

Mỗi khách hàng khi vào trang web của bạn đề ấn tượng đối với lần đầu tiên do đó thời gian tải phải nhanh nhất có thể. Theo một 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 bạn mất 7% doanh thu, giảm 11% số lần xem trang và giảm 16% sự hài lòng của khách hàng

Một trong những yếu tố làm chậm web của bạn đó là hình ảnh, nó chiếm trung bình 21% tổng dung lượng của trang web. Vì vậy, khi nói đến việc tối ưu hóa trang web WordPress của bạn, sau nội dung video, hình ảnh là nơi đầu tiên bạn nên bắt đầu!

Nó quan trọng hơn script và phông chữ. Và đáng tiếc là một quy trình tối ưu hóa hình ảnh là một trong những điều dễ thực hiện nhất, nhưng rất nhiều chủ sở hữu trang web lại bỏ qua điều này

Vai trò của việc tối ưu hình ảnh
Dung lượng hình ảnh chiếm đến 21% tổng website chỉ sau video

Mặc dù có nhiều lợi ích của việc tối ưu hóa hình ảnh của bạn, nhưng dưới đây là những lợi ích hàng đầu mà bạn nên biết:

  • Nó sẽ cải thiện tốc độ tải trang của bạn. Nếu trang của bạn mất quá nhiều thời gian để tải, khách truy cập của bạn có thể cảm thấy mệt mỏi khi chờ đợi và chuyển sang  web khác.
  • Nó sẽ cải thiện thứ hạng SEO trang web của bạn sẽ xếp hạng cao hơn trong kết quả của công cụ tìm kiếm. Các tệp lớn làm chậm trang web của bạn và các công cụ tìm kiếm không ưu tiên các trang web chậm.
  • Tỷ lệ chuyển đổi cao hơn bởi vì tạo ra được trải nghiệm tốt hơn cho khách hàng khi truy cập vào trang web của bạn.
  • Tạo bản sao lưu dữ liệu cho website sẽ nhanh hơn.
  • Kích thước tệp hình ảnh nhỏ hơn sử dụng ít băng thông hơn.
  • Sử dụng ít dung lượng lưu trữ hơn trên máy chủ của bạn điều này phụ thuộc vào số lượng hình ảnh bạn tối ưu hóa được.

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

Chìa khóa để tối ưu hóa hình ảnh thành công cho hiệu suất web là tìm ra sự cân bằng hoàn hảo giữa kích thước tệp thấp nhất và chất lượng hình ảnh chấp nhận được.

Ba điều đóng vai trò rất lớn trong việc tối ưu hóa hình ảnh là:

  1. Định dạng tệp hình ảnh (JPEG và PNG).
  2. Kích thước hình ảnh (chiều cao và chiều rộng).
  3. Nén hình ảnh (Nén càng nhiều thì kích thước file càng nhỏ).

Chọn định dạng hình ảnh

Bạn có biết rằng từ lúc các bức ảnh điện tử ra đời, đã có rất nhiều định dạng cũng được “khai sinh”? Mỗi loại định dạng ảnh đều có những sắc thái và cách sử dụng hoàn toàn khác nhau. Trong đó, JPG và PNG là 2 loại định dạng ảnh số phổ biến nhất.

JPG

Hình ảnh JPG để hiển thị các bức ảnh trên trang web của bạn, TADA khuyến khích bạn nên lựa chọn định dạng này bởi vì chúng cho phép hiển thị hình ảnh chất lượng tương đối tốt và kích thước tệp nhỏ.

Hình định dạng JPG
Hình ảnh minh hoạ cho định dạng ảnh JPG

PNG

Hình ảnh có chất lượng cao hơn nhưng đồng thời cũng tiêu tốn nhiều dung lượng lưu trữ hơn. Chỉ nên sử dụng định dạng hình ảnh này khi bạn muốn một bức ảnh không có nền.

tada logo
Logo TADA có nền trong suốt nên sử dụng định dạng PNG.

Nói đơn giản hơn thì bạn muốn sử dụng định dạng JPEG cho tất cả các ảnh trên trang web và PNG khi bạn cần ảnh có nền trong suốt.

Convert file PNG sang JPG

Và nếu bạn đang có một hình ảnh có định dạng PNG bạn muốn chuyển nó thành JPG mà không muốn sử dụng các công cụ thiết kế thì có thể sử dụng png2jpg.com

Đây là công cụ miễn phí, trực tuyến này 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ý tài khoản, cho phép chuyển đổi hàng loạt và dung lượng tệp đến 50MB.

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

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

Giả sử bạn đang thêm hình ảnh vào một bài viết blog trên trang web của mình. Nếu khung hình của hình ảnh có kích thước 500 x 500 nhưng bạn đang tải lên hình ảnh có độ phân giải 1024 x 1024, thì tất cả các pixel dư thừa đó chỉ làm tăng kích thước tệp và giảm tốc độ trang web mà không mang lại lợi ích thực sự.

Bằng cách cắt hình ảnh của bạn trước khi tải lên, bạn sẽ giảm kích thước tệp, điều này sẽ giúp trang web của bạn tải nhanh hơn và tiết kiệm dung lượng lưu trữ cho website.

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

Trên Windows: Paint

B1: Để mở Paint, hãy đặt con trỏ vào hộp tìm kiếm Windows và nhập “paint”. Tùy chọn đầu tiên xuất hiện trong kết quả tìm kiếm chính là ứng dụng Paint. Nhấn vào đó để khởi chạy Paint.

B2: Khi Paint được mở, hãy nhấp vào File > Open và điều hướng đến vị trí hình ảnh.

B3: Khi hình ảnh được mở trong Paint, hãy nhấp vào tab Home và sử dụng công cụ Resize để thay đổi kích thước hình ảnh.

Trên Mac OS: Mac Preview

B1: Mở ứng dụng Preview và sử dụng menu File để nhập hình ảnh muốn chỉnh sửa.

B2: Với hình ảnh đang mở trong Preview, hãy chọn Tools > Adjust Size. Cửa sổ mới có nhãn “Image Dimensions” sẽ xuất hiện, cho phép bạn chọn chiều rộng và chiều cao mới cho hình ảnh.

B3: Khi chỉnh sửa xong hình ảnh, bấm OK để thay đổi kích thước hình ảnh.

B4: Để lưu hình ảnh mới đã thay đổi kích thước, nhấp vào File và chọn Save từ menu drop-down.

Online: Pixlr X

B1: Chọn “Open Image from computer”. Thao tác này sẽ mở một cửa sổ mới cho phép bạn chọn hình ảnh muốn chỉnh sửa. Hình ảnh sẽ được upload lên công cụ Pixlr trong trình duyệt. Một khi bạn nhìn thấy hình ảnh, bạn có thể bắt đầu chỉnh sửa.

B2: Nhấp vào biểu tượng “Arrange” trong danh sách xếp hạng ở phía bên trái

B3: Từ đó, chọn “Resize”.

Khi đã hoàn tất, hãy nhấp vào nút “Apply”. Bây giờ, bạn đã chỉnh sửa xong. Tiếp theo, bạn cần lưu một bản sao của hình ảnh mới vừa được sửa đổi. Để thực hiện việc này, chỉ cần nhấp vào nút “Save” ở góc dưới bên phải. Tại đây, bạn sẽ có thể đổi tên file và điều chỉnh chất lượng hình ảnh. Khi bạn đã hoàn tất, hãy nhấn nút Save một lần nữa để tải hình ảnh xuống máy tính.

Nén hình ảnh

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

Nén hình ảnh là hoạt động bằng cách sử dụng công nghệ nén như “Lossy” và “Lossless” giúp giảm kích thước tệp tổng thể trong đó:

  • Kiểu nén Lossless sẽ 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
  • kiểu nén Lossy ngược lại với kiểu Lossless, vì nó loại bỏ hoàn toàn một phần của dữ liệu. Điều này sẽ làm giảm chất lượng hình ảnh, vì vậy bạn sẽ phải cẩn thận về mức độ giảm hình ảnh

Nén thủ công

Hầu hết các công cụ chỉnh sửa hình ảnh như Adobe Photoshop , On1 Photo , GIMP, Affinity Photo và các công cụ khác đều có các tính năng nén hình ảnh tích hợp sẵn. Bạn cũng có thể lưu hình ảnh bình thường và sau đó sử dụng một công cụ web như TinyPNG, JPEG Mini, ImageOptim,… để nén hình ảnh dễ dàng hơn.

Mặc dù hơi thủ công nhưng hai phương pháp này cho phép bạn nén hình ảnh trước khi tải chúng lên WordPress và đây cũng là phương pháp đơn giản nhất và hiệu quả nhất.

Ở đây TADA giới thiệu cho bạn công cụ TinyPNG:

Nén hình ảnh bằng TinyPNG
Hình ảnh sau khi nén bằng TinyPNG đã giảm kích cỡ đến 74%

 

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 của bạn bằng cách giảm số lượng màu được sử dụng, nhưng đừng lo lắng, bạn thậm chí sẽ không nhận thấy. Nó miễn phí và nhanh chóng để sử dụng cho PNG và JPEG.

Nén bằng Plugin

Ngoài ra còn có một số plugin WordPress phổ biến như WP Smush, Optimole, EWWW Image Optimizer và những plugin khác có thể tự động nén hình ảnh khi bạn tải chúng lên ngay lần đầu tiên. Nhiều người mới bắt đầu và thậm chí cả các tập đoàn lớn thích sử dụng các plugin tối ưu hóa hình ảnh này vì nó dễ dàng và thuận tiện mà không cần phải qua nhiều công cụ

TADA đề xuất cho bạn plugin WP Smush:

Smush
Plugin Smush nén ảnh nhưng không làm mất đi chất lượng

WP Smush có tên đầy đủ khá dài: Smush Image Compression and Optimization – với hơn 1 triệu cài đặt, nó là plugin nén ảnh có số lượng người dùng nhiều nhất trên WordPress, và cũng được review rất tốt (gần như 5 sao). WP Smush có cả phiên bản miễn phí và trả phí. Nó sẽ làm giảm thông tin ẩn khỏi hình ảnh để giảm kích thước mà không làm giảm chất lượng. Nó sẽ quét hình ảnh và giảm dung lượng của chúng khi bạn tải chúng lên trang web của mình. Nó cũng sẽ quét những hình ảnh mà bạn đã tải lên và giảm bớt dung lượng của những hình ảnh đó. Nó có thể nén cùng lúc lên đến 50 tệp cùng một lúc. Nó sẽ giảm dung lượng các loại hình ảnh có định dạng JPEG, GIF và PNG. Kích thước tệp được giới hạn ở 1MB ở bản miễn phí.

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

Photoshop

Ngoài cách công cụ mà TADA đề cập ở trên thì Adobe Photoshop là một phần mềm chỉnh sửa đồ họa được phát triển và phát hành bởi hãng Adobe Systems ra đời vào năm 1988 trên hệ máy Macintosh. Photoshop được đánh giá là phần mềm dẫn đầu thị trường về sửa ảnh và được coi là chuẩn cho các ngành liên quan tới chỉnh sửa ảnh. Đây có thể coi là một phần mềm rất hữu ích cho các bạn thường xuyên tải hình ảnh lên website hay blog, việc tối ưu dung lượng hình ảnh giúp website load nhanh hơn với chức năng “Save for web”

chinh-sua-anh-bang-photoshop
Tuỳ chỉnh kích thước thiết kế bằng Photoshop
thiet-ke-anh-bang-photoshop
Tạo thiết kế cho trang web bằng Photoshop
Luu-hinh-anh-cho-website
Photoshop có chức năng “Save for web” giúp tối ưu hình ảnh tốt hơn
save-for-web
Chức năng lưu ảnh nén để tải lên website

Canva

Canva là một trang web công cụ thiết kế đồ hoạ, được thành lập năm 2012. Canva 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ữ. Nó được sử dụng bởi những người không phải là nhà thiết kế cũng như các chuyên gia, nếu bạn không phải là một Desinger chuyên nghiệp thì bạn có thể cân nhắc phần mềm này

thiet-ke-bang-canva
Tạo thiết kế mới với kích thước tuỳ chỉnh
dieu-chinh-dinh-dang-cho-thiet-ke
Tuỳ chỉnh định dạng cho thiết kế khi lưu về máy

Lời kết

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

Nếu trong quá trình tối ưu cho website, bạn có thắc mắc hay cần tìm hiểu sâu hơn, bạn có thể để lại câu hỏi ở mục Bình luận bên dưới. Đội ngũ chuyên gia của TADA sẽ hỗ trợ bạn nhanh nhất.

Cảm ơn và chúc bạn thành công!

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

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

CAPTCHA ImageChange Image