Tối ưu hoá hình ảnh cho Web và SEO không cần photoshop

29-03-2018

Cho dù bạn có cửa hàng trực tuyến hoặc trang web thông thường mà bạn muốn trông nó thật tuyệt vời, bạn sẽ mất vài phút để tối ưu hoá hình ảnh bạn tải lên.

Khi chúng ta nói về cách “tối ưu hoá” hình ảnh cho web, bạn thường nghĩ về điều này theo 3 cách: 1) làm chúng trông đẹp, 2) làm cho chúng tải nhanh và 3) làm cho các công cụ tìm kiếm dễ dàng.

Trong bài đăng này GSOFT sẽ đi qua nhiều khía cạnh để tối ưu hoá hình ảnh bằng các công cụ miễn phí, thậm chí tốt hơn mà không cần đến Photoshop.

tối ưu hóa hình ảnh cho website

1. Tìm kiếm hình ảnh chất lượng cao

Stock photography: bạn không cần phải là một nhiếp ảnh gia chuyên nghiệp thì mới có thể có những bức hình đẹp trên website vì ngày một nhiều các trang web stock photo chất lượng cao bạn có thể tải xuống miễn phí để sử dụng, một trong số những trang yêu thích của chúng tôi bao gồm:

 

  • Pixabay
  • Unsplash
  • Barn Images
  • PicJumbo
  • SplitShire
  • Little Visuals


Vì là kho ảnh chung nên nếu bạn muốn tìm một bức ảnh để minh hoạ cho sản phẩm dịch vụ mang tính đặc trưng của riêng bạn cũng sẽ rất khó.

Đồ hoạ: nếu bạn đang tìm kiếm một ảnh đồ hoạ, có rất nhiều công cụ trực tuyến mới miễn phí mà bạn có thể sử dụng để xây dựng các bức ảnh số hoặc ảnh của riêng mình, GSOFT xin đề xuất cho bạn hai trang là CanvaPiktoChart.

Còn nếu bạn đang tìm kiếm một logo mang tính tham khảo, minh hoạ cho design, bạn có thể xem thêm trên 2 trang 99designs hoặc designonclick.

2. Sử dụng đúng loại tệp: JPEG hoặc PNG

Hình ảnh thường có 3 loại file chính là JPEG (hoặc JPG) hoặc PNG. Có ưu và khuyết điểm của mỗi loại, nhưng trong hầu hết các trường hợp, bạn hãy nhớ những điều sau đây:

 

  • Hình ảnh dạng JPEG: Loại tệp này có thể xử lý tất cả các màu sắc trong một bức ảnh với kích thước tệp tương đối nhỏ và hiệu quả.
  • Hình ảnh dạng PNG: có chất lượng cao hơn JPEG, nhưng thường kích thước tập tin lớn hơn. PNG có thể xử lý các vùng màu và văn bản với đường nét đẹp, vì vậy bạn có thể phóng to và không mất chất lượng. PNG cũng hỗ trợ nền trong suốt, PNG “24 bit” có chất lượng tốt hơn và màu sắc được hỗ trợ nhiều hơn PNG “8 bit”. Đối với ảnh đồ hoạ nên được lưu dưới dạng PNG.
Nên chọn ảnh jpeg hay png cho website

Hầu hết các chương trình ảnh cho phép bạn lựa chọn loại tệp JPG hoặc PNG cho hình ảnh, một số trang sẽ hỗ trợ bạn tuỳ chỉnh kích thước cho hình ảnh.

Ngoài ra còn có các công cụ trực tuyến miễn phí như Zamzar sẽ chuyển đổi loại tệp cho hình ảnh. Tuy nhiên chất lượng hình ảnh sẽ không được cải thiện.

3. Thay đổi kích thước hình ảnh để tối ưu hoá tốc độ và hiển thị của trang

Với hình ảnh web, bạn muốn tìm sự cân bằng giữa kích thước và độ phân giải. Độ phân giải càng cao – kích thước tệp càng lớn. Trong in ấn, hình ảnh có độ phân giải cao là một điều tốt, nhưng trên web, hình ảnh khổng lồ có thể làm chậm tốc độ tải trang.

Vậy làm thế nào để đạt được sự cân bằng giữa kích thước và chất lượng cho website? Thứ nhất, điều quan trọng cần quan tâm khi nói đến hình ảnh là “size”.

  • Kích thước tệp (File size): Nếu kích thước tệp của bạn thật lớn đây là yếu tố làm chậm trang web của bạn.
    Với các hình ảnh full trang, hình ảnh tối đa nên từ 80Kb – 100Kb. Nếu hình ảnh chỉ là một phần của trang, thì kích thước tệp từ 20Kb-30Kb là phù hợp.

    Giảm chất lượng hình ảnh đến 30% – 50% so với ảnh gốc thì hình ảnh bạn có được sẽ không quá khác biệt nhưng có thể giảm kích thước tệp.
    Bạn cũng có thể giảm kích thước tệp từ 2-3Mb xuống còn 80Kb – 120Kb thì chất lượng hình ảnh cũng sẽ không có quá nhiều khác biệt.
  • Kích thước hình ảnh (Image size): kích thước thực của hình ảnh được tính bằng pixel. Khác với những kích thước ảnh in, trên web chiều cao và chiều rộng được tính bằng pixel; ví dụ như một hình ảnh điển hình trên web có thể là 795 x 300 pixel.
  • Độ phân giải (resolution): độ phân giải là chất lượng hoặc mật độ hình ảnh được đo bằng cách chấm trên mỗi inch (dpi). Máy in chuyên nghiệp có thể yêu cầu hình ảnh ít nhất 300 dpi. Nhưng hầu hết màn hình máy tính đều hiển thị 72 dpi hoặc 96 dpi, vì vậy hình ảnh có độ phân giải cao hơn 96 dpi là không cần thiết. 

Ngoài ra, để đảm bảo tốc độ tải website nhanh chóng dành riêng cho mobile bạn cũng có thể áp dụng Google AMP.

Làm thế nào để bạn tìm thấy kích thước tập tin, kích thước hình ảnh và độ phân giải?

Bạn có thể tìm thấy kích thước tệp ngay trên máy tính của mình. Nếu bạn đang sử dụng máy tính cá nhân, nhấp chuột phải vào tệp hình ảnh, chọn “Properties” và sau đó là tab “Summary”. Trên máy Mac, nhấn Ctrl+click vào tệp hình ảnh và chọn “Get Info”

Để tìm độ phân giải đòi hỏi một chương trình nâng cao như Photoshop, nhưng hầu hết các chương trình chỉnh sửa hình ảnh cơ bản sẽ tự động lưu ảnh ở mức dpi thấp, thân thiện với web. Phiên bản web miễn phí của Pixlr giới thiệu hình ảnh ở mức 72 dpi và Canva cho phép “save for web” với PNG ở mức 92 dpi.

Cheat Sheet cho kích thước hình ảnh, kích thước tập tin và độ phân giải

Bây giờ bạn đã biết các cách khác nhau để xem được kích thước, dung lượng hình ảnh, đây là một vài quy tắc cần lưu ý:

 

  • Hình ảnh lớn hoặc hình nền toàn màn hình không được nhiều hơn 1MB.
  • Hầu hết các hình ảnh đồ hoạ cho web có dung lượng 300KB trở xuống.
  • Nếu bạn đang sử dụng hình nền toàn màn hình, tốt nhất bạn nên tải hình ảnh với chiều rộng 2000 pixel.
  • Nếu bạn có thể tuỳ chọn, luôn luôn “save for web” sẽ cung cấp cho hình ảnh một giải pháp web thân thiện.
  • Bạn có thể làm một bức ảnh lớn trở nên nhỏ hơn, nhưng rất khó để làm bức ảnh nhỏ trở nên lớn hơn.

Bạn sẽ làm gì nếu hình ảnh quá lớn cho trang web?

Thông thường với các hình ảnh được chụp bằng máy ảnh kỹ thuật sẽ có megabyte rất lớn. Nên nếu ảnh chụp sản phẩm dịch vụ của bạn trên 1MB, có vài điều bạn cần thực hiện:

 

  • Thay đổi kích thước hình ảnh. Nếu ảnh bạn rộng 5000 pixel, bạn có thể dễ dàng thay đổi kích thước nó thành 2000 pixel, 1200 pixel hoặc thậm chí nhỏ hơn tuỳ thuộc vào cách bạn định sử dụng.

 

  • Giảm độ phân giải. Các chương trình ảnh như Pixlr và Canva sẽ tự động giảm độ phân giải hình ảnh của bạn tới một kích thước “web-friendly” (72dpi và 92dpi).

 

  • Điều chỉnh hình ảnh thông qua một chương trình miễn phí như TinyPNG hoặc TinyJPG. Cả hai sẽ làm giảm đáng kể kích thước tệp của bạn mà không ảnh hưởng đến chất lượng.
Thay đổi kích thước ảnh cho website

4. Làm cho hình ảnh có cùng kích thước và phong cách

Hình ảnh trên một trang web sẽ trông đẹp hơn nếu bạn sử dụng một phong cách và kích cỡ / tỷ lệ nhất quán. Sự nhất quán cũng sẽ giúp trang web trông đẹp hơn khi thêm văn bản, cột và các thông tin khác.

Bố trí hình ảnh và text cho web

Trong ví dụ này, các bức ảnh không phù hợp và có kích thước khác nhau, do đó, trang trông hơi cẩu thả.

Trong ví dụ tiếp theo, chúng tôi sử dụng Pixlr để cắt mỗi bức ảnh với độ phân giải 1000 x 760 pixel (bạn cũng có thể sử dụng trình chỉnh sửa Adobe Image để crop). 

Đồng bộ hình ảnh cho website

Trong ví dụ này, những bức ảnh có cùng kiểu và có kích thước giống nhau. Điều này làm cho trang trông nhất quán hơn.

Kể từ khi các bức ảnh có cùng kích thước và định hướng theo cùng một cách, tất cả chúng đều phù hợp với một cột, với các đoạn văn ở một cột khác

Cắt ảnh băng pixlr

Cắt một hình ảnh trong Pixlr để làm cho nó cùng kích cỡ với những hình ảnh khác.

Ok, bây giờ ảnh của bạn đã được thay đổi kích thước nhìn tuyệt vời, làm thế nào bạn có thể tối ưu hoá chúng cho công cụ tìm kiếm?

5. Đặt tên hình ảnh một cách chính xác để tối ưu SEO

Hầu hết mọi người không nghĩ nhiều về tên tập tin. Họ có thể gọi một bức ảnh “Photo1.jpg” hoặc “Screen Shot 2017-06-02 vào lúc 3.41.15 PM”. Nếu điều này có vẻ quen thuộc, hãy dành một chút thời gian để đổi tên hình ảnh trước khi đăng tải lên trang web. Tại sao? Bởi vì làm vậy sẽ giúp SEO bạn đẩy lên.

Hãy suy nghĩ theo cách này. Khi Google quét trang web của bạn, nó có thể đọc văn bản nhưng nó không thể nhìn thấy những gì trong hình ảnh của bạn. Do đó, tên tệp cung cấp thông tin về những gì có trong hình ảnh để Google có thể giải thích chính xác.

Tên tệp cũng trở thành một phần của url, do đó việc đặt tên tệp bằng tiếng Anh hay tiếng Việt giản dị không dấu sẽ làm cho url dễ dàng điều hướng.

6. Điền vào chú thích của bạn và văn bản thay thế

Sau khi mọi người tải hình ảnh lên, họ thường quên điền thông tin bổ sung. Nhưng cũng giống như tên tệp, thông tin này cung cấp cho bạn một số SEO bổ sung.

Thẻ Alt (hoặc văn bản thay thế) sẽ không hiển thị đối với khách truy cập, nhưng cung cấp cho các công cụ tìm kiếm hiểu được ý nghĩa cơ bản về nội dung của hình ảnh. Vì vậy, khi bạn đã thêm một hình ảnh vào trang web, hãy chắc chắn điền vào mục nội dung thay thế (Alternative Text) với các cụm từ mô tả những gì ảnh hiển thị, tốt hơn là những từ khoá liên quan.

Thêm caption và alternative text

Đừng quên điền đầy đủ thông tin Alt text và caption!

7. Đặt hình ảnh gần văn bản có liên quan

Để tối ưu hoá hình ảnh cho website, bạn nên chọn hình ảnh có liên quan đến nội dung văn bản, thay vì một cái gì đó hoàn toàn bất ngờ. Hình ảnh được bao quanh bởi thông tin có liên quan (với các từ khoá liên quan) sẽ xếp hạng tốt hơn.

Mẹo này cũng giúp bạn tránh được những stock photo ấn bảng. Nếu trang web của bạn là về giáo dục, bạn không nhận được bất kỳ lượt đẩy SEO nào từ một bức ảnh quả táo. Hình ảnh của giáo viên, học sinh và lớp học; tuy nhiên, sẽ trở nên thú vị hơn cho độc giả và những gì có liên quan đến chủ đề của bạn.

YelBee (Theo jimdo)

Có thể bạn quan tâm

KHÁCH HÀNG CỦA GSOFT

HOTLINE: 0913 957 079