Cách tối ưu hóa hình ảnh để thiết kế web & SEO tốt hơn

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

Khi chúng ta nói về cách tối ưu hóa hình ảnh trên mạng, bạn có thể nghĩ về điều này theo ba cách:

  • 1) làm cho hình ảnh đẹp,
  • 2) làm cho hình ảnh tải nhanh
  • 3) làm cho công cụ tìm kiếm dễ dàng lập chỉ mục.

Hầu hết các bài viết đều đi qua một khía cạnh tối ưu hóa hoặc khía cạnh khác, nhưng trong bài đăng này tôi sẽ đề cập đến tất cả. Thậm chí tốt hơn là bạn có thể tối ưu hóa hình ảnh với các công cụ miễn phí, dễ sử dụng mà không cần Photoshop. (Trong bài đăng này, tôi sẽ trình bày hầu hết với phiên bản Pixlr dựa trên trình duyệt miễn phí, đây là một công cụ đơn giản để chỉnh sửa ảnh cơ bản. Nếu bạn quan tâm đến các công cụ khác, hãy xem bài đăng của chúng tôi Cách chỉnh sửa ảnh mà không cần Photoshop ).

1. Bắt đầu với hình ảnh chất lượng cao

Tải ảnh trên mạng: Bạn không cần phải là một nhiếp ảnh gia chuyên nghiệp để sử dụng những hình ảnh tuyệt vời trên trang web của bạn. Mỗi ngày có vẻ như có nhiều trang web ảnh chất lượng cao hơn, nơi bạn có thể tải xuống ảnh miễn phí cho mục đích thương mại. Một số mục yêu thích của chúng tôi là:

  • Pixabay
  • Bapt
  • PicJumbo
  • SplitShire

Khi bạn tải xuống một hình ảnh từ một trong những trang web này, nó có thể sẽ là một tệp JPEG thực sự lớn. Để nén nó cho trang web của bạn, bạn sẽ cần giảm kích thước và tải lên một phiên bản nhỏ hơn

Chụp ảnh của riêng bạn (tốt hơn): Tất nhiên, bạn không thể sử dụng ảnh stock cho mọi thứ (như nhóm hoặc sản phẩm của bạn). Có một vài thủ thuật đơn giản để làm cho hình ảnh của bạn trông sáng và chuyên nghiệp hơn, ngay cả khi không có thiết bị máy ảnh ưa thích.

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

Nếu bạn đang tự hỏi về các tệp hình ảnh khác nhau như JPG, PNG, GIF và SVG, chỉ cần biết rằng trên trang web của bạn, bạn rất có thể sử dụng định dạng JPEG (JPG) hoặc định dạng PNG. Có những ưu và nhược điểm của từng loại , nhưng đối với hầu hết các trường hợp, bạn có thể nhớ những điều sau:

Hình ảnh nên được lưu và tải lên dưới dạng JPG. Loại tệp này có thể xử lý tất cả các màu trong ảnh ở kích thước tệp tương đối nhỏ, hiệu quả. Bằng cách sử dụng JPEG, bạn sẽ không kết thúc với tệp khổng lồ mà bạn có thể nhận được nếu bạn lưu ảnh dưới dạng PNG.

Đồ họa, đặc biệt là những đồ họa sử dụng các vùng màu lớn, phẳng, nên được lưu dưới dạng PNG. Điều này bao gồm hầu hết các thiết kế, infographics, hình ảnh có rất nhiều văn bản trong đó và logo. PNG có chất lượng cao hơn JPEG, nhưng thường đi kèm với kích thước tệp lớn hơn. Giống như người thân của họ, tệp SVG, PNG xử lý các vùng màu và văn bản với các đường nét sắc nét, để bạn có thể phóng to và không mất bất kỳ chất lượng nào.

Chúng cũng hỗ trợ nền trong suốt (mà bạn sẽ muốn nếu bạn đang sử dụng logo). Nếu bạn có sự lựa chọn, chúng tôi khuyên bạn nên lưu PNG dưới dạng định dạng 24 bit, thay vì định dạng 8 bit, vì chất lượng tốt hơn và mảng màu được hỗ trợ phong phú hơn.

  • Ảnh nên được lưu dưới dạng JPEG
  • Hình ảnh thường nên được lưu dưới dạng JPEG.
  • Đồ họa nên được lưu dưới dạng PNG
  • Đồ họa và logo nên được lưu dưới dạng PNG.

3. Thay đổi kích thước hình ảnh để tối ưu hóa tốc độ và sự xuất hiện của trang

Với hình ảnh trên web, bạn muốn tìm sự cân bằng phù hợp giữa kích thước và độ phân giải. Độ phân giải của bạn càng cao, kích thước tệp sẽ càng lớn.  Trong thế giới in, hình ảnh độ phân giải cao là một điều tốt. Nhưng trên web, hình ảnh kích thước lớn, độ phân giải cao có thể làm chậm tốc độ trang của trang web của bạn. Điều này làm tổn thương trải nghiệm của người dùng và cuối cùng là xếp hạng công cụ tìm kiếm của bạn . Hình ảnh lớn và thời gian tải chậm đặc biệt gây khó chịu cho  khách truy cập di động .

Đôi khi bạn sẽ muốn sử dụng hình ảnh lớn trên trang web của mình, như cho hình nền hoặc hình ảnh anh hùng của bạn . Nếu bạn sử dụng hình ảnh chất lượng thấp và cố gắng thổi chúng đủ lớn, nó sẽ trông mờ.

Vậy làm thế nào để bạn đạt được sự cân bằng giữa kích thước và chất lượng? Đầu tiên, điều quan trọng là phải hiểu rằng khi nói đến hình ảnh, kích thước của Google là một thuật ngữ tương đối. Những gì bạn cần cho in thường lớn hơn nhiều so với những gì bạn cần cho một trang web. Dưới đây là tổng quan về ba khía cạnh chính tạo nên kích thước của Google:

Dung lượng tệp tối ưu: số byte mà tệp chiếm trên máy tính của bạn. Đây là yếu tố có thể làm chậm trang web của bạn xuống. Một hình ảnh 15 MB (megabyte) là rất lớn. Một hình ảnh 125KB (kilobyte) là hợp lý hơn nhiều. Nếu kích thước tệp của bạn thực sự lớn, đó là một chỉ báo cho thấy kích thước hình ảnh của bạn quá lớn hoặc độ phân giải quá cao.

Kích thước hình ảnh: Kích thước thực tế của hình ảnh của bạn, tính bằng pixel. Bạn có thể nghĩ về các bức ảnh in truyền thống là 4 × 6, 5 × 7 hoặc 8 × 10. Nhưng trên web, chiều cao và chiều rộng được đo bằng pixel. Vì vậy, ví dụ, một hình ảnh điển hình trên trang web hoặc blog có thể là 795 × 300 pixel.

Độ phân giải cho hình ảnh trên web: Còn lại từ thế giới in, độ phân giải là chất lượng hoặc mật độ của hình ảnh, được đo bằng số chấm trên mỗi inch (dpi). Một máy in chuyên nghiệp có thể yêu cầu hình ảnh ít nhất 300dpi. Nhưng hầu hết các màn hình máy tính hiển thị 72dpi hoặc 92dpi , do đó, bất cứ điều gì cao hơn mức đó là quá mức cần thiết và làm cho hình ảnh của bạn lớn không cần thiết. Khi một chương trình thiết kế có tùy chọn để lưu lại cho web, điều đó có nghĩa là lưu nó ở độ phân giải thấp, thân thiện với web.

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 của hình ảnh của bạn?

Bạn có thể tìm thấy kích thước tập tin và kích thước hình ảnh ngay trên máy tính của bạn. Nếu bạn đang sử dụng PC, nhấp chuột phải vào tệp hình ảnh, hãy chọn Thuộc tính trực tuyến và sau đó chọn tab Tóm tắt. Trên máy Mac, Ctrl + nhấp vào tệp hình ảnh và chọn Nhận thông tin.

Việc tìm độ phân giải đòi hỏi một chương trình ảnh nâng cao hơn như Photoshop, nhưng hầu hết các chương trình chỉnh sửa ảnh cơ bản sẽ tự động lưu ảnh ở mức thấp hơn, thân thiện với web, đó là độ phân giải tốt hơn cho hình ảnh trên web.

  • Kích thước tệp tối ưu: Hình ảnh lớn hoặc hình nền toàn màn hình không quá 1 MB .
  • Hầu hết các đồ họa web nhỏ khác có thể là 300 KB hoặc ít hơn .
  • Nếu bạn đang sử dụng nền toàn màn hình , Nhóm hỗ trợ khách hàng của Jimdo khuyên bạn nên tải lên một hình ảnh rộng 2000 pixel.

Với Web được thiết kế bởi Web Gia Lai bạn sẽ được gửi bảng thông số hình ảnh chi tiết nếu cần.

Độ phân giải cho hình ảnh trên web: Nếu bạn có tùy chọn, luôn luôn Lưu cho web sẽ cung cấp cho hình ảnh của bạn độ phân giải thân thiện với web.
Bạn có thể làm cho một hình ảnh lớn nhỏ hơn, nhưng rất khó để làm cho một hình ảnh nhỏ lớn hơn.

Bạn làm gì nếu hình ảnh của bạn quá lớn so với trang web của bạn?

Nếu bạn có một máy ảnh kỹ thuật số đẹp, bạn có thể chụp những bức ảnh lớn hơn vài megabyte so với những gì bạn cần cho trang web của mình. Hình ảnh chứng khoán từ các trang web chất lượng cao có xu hướng đi kèm với kích thước tệp lớn quá. Nếu hình ảnh của bạn trên 1 MB, có một số điều bạn có thể làm:

Thay đổi kích thước hình ảnh. Nếu ảnh của bạn rộng 5000 pixel, bạn có thể dễ dàng thay đổi kích thước ảnh thành rộng 2000 pixel, rộng 1200 pixel hoặc thậm chí nhỏ hơn tùy thuộc vào cách bạn định sử dụng nó trên trang web của mình. Điều này sẽ làm giảm đáng kể kích thước tập tin. Khi bạn thay đổi kích thước, hãy đảm bảo giữ nguyên tỷ lệ để bạn không làm biến dạng hình ảnh của mình.

Giảm độ phân giải.  Hầu hết các chương trình ảnh sẽ tự động nén độ phân giải hình ảnh của bạn thành kích thước thân thiện với web của YouTube (tương ứng 72dpi và 92dpi). Bạn cũng có thể làm điều này trong Photoshop với tùy chọn ‘save for web’. Bạn cũng có thể lưu Save As As trong nhiều chương trình ảnh và sau đó điều chỉnh mức chất lượng từ đó.

Nén hình ảnh của bạn bằng một chương trình miễn phí như TinyPNG hoặc TinyJPG. Cả hai sẽ giảm đáng kể kích thước tệp của bạn mà không can thiệp vào chất lượng.

Tối ưu hóa hình ảnh bằng cách thay đổi kích thước của nó

Thay đổi kích thước một hình ảnh là dễ dàng. Ảnh gốc có kích thước 6302 × 4789 pixel và 16,2 MB, lớn hơn nhiều so với những gì tôi cần cho trang web của mình. Sử dụng Pixlr, tôi đã thu nhỏ nó thành 1000 × 760 pixel, dẫn đến kích thước tệp nhỏ hơn, thân thiện với web hơn (132KB, hoàn hảo!).

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 kiểu dáng và kích thước phù hợp. Tính nhất quán cũng sẽ giúp ích khi xếp hàng văn bản, cột và thông tin khác trên trang của bạn. Để xem những gì chúng tôi muốn nói, hãy xem các ví dụ dưới đây.

Rate this post

Web mẫu tại Webgialai.com