Cách tối ưu hình ảnh để chèn lên website.
Google khuyến khích và cũng đánh giá cao những bài viết có chèn hình ảnh và video để bài viết sinh động hơn, nội dung được dễ hiểu hơn.
Một bài viết nên có tối thiểu 1-2 hình trở lên, tuỳ vào nội dung của bài mà hình sẽ nhiều hay ít. Ví dụ một bài hướng dẫn sử dụng thường sẽ có nhiều hình.
Kích thước hình ảnh chuẩn trên website
Sử dụng hình ảnh trên website không đơn giản là chèn hình vào bài viết. Bạn cần phải kiểm tra kích thước, dung lượng hình. Bởi hình ảnh là một trong những nguyên nhân khiến website tải chậm.
Một bài viết có một hình nặng 200KB là hoàn toàn ổn, nhưng một bài viết có 10 hình, mỗi hình là 200KB, điều đó thật sự không ổn tí nào.
Việc giảm kích thước hình sẽ giúp bạn giảm dung lượng hình, hướng dẫn bên dưới sẽ chỉ cho bạn cách thực hiện.
Kích thước hình bao nhiêu là ổn?
Nếu là các bài tin tức, hướng dẫn bình thường, kích thước hình nên tối thiểu là 500px và tối đa là 700px.
Với hình sản phẩm, hình dự án, cần có kích thước lớn một chút là 800px đến 1000px. Khi up lên website, bạn có thể điều chỉnh hình hiện ra có kích thước nhỏ, và khi người xem nhấn vào xem chi tiết, sẽ thấy được hình lớn.
Cách resize – điều chỉnh kích thước hình trước khi up lên website
Windows có sẵn 2 công cụ hỗ trợ cho việc xử lý ảnh, khá là dễ sử dụng cho những người không chuyên:
- Paint
- Microsoft Office 2010
Ở đây chúng ta có 1 bức hình lấy từ website ảnh miễn phí là pexel.com. Hình này khá lớn với dung lượng là 13.1MB và kích thước là 5472×3317. Tôi sẽ hướng dẫn bạn thay đổi kích thước hình ảnh bằng Paint.
B2: Bạn chọn Resize.
B3: Paint cho 2 lựa chọn chỉnh kích thước, theo phần trăm, hoặc theo pixel. Ở đây tôi sẽ chọn Pixel.
Bạn nhớ nhấn vào ô “Maintain aspect radio”, để khi bạn điều chỉnh chiều ngang thì chiều dài cũng sẽ được điều chỉnh theo, khiến hình không bị méo.
Như vậy với hình bên trên, tôi sẽ nhập Horizontal – chiều ngang là 500 pixel:
B4: Nhấn OK rồi bấm Save.
Sau khi chỉnh kích thước, hình dung lượng của hình sẽ giảm xuống
--- Chúc bạn thành công ---
Baca Juga

Đăng nhận xét
Đăng nhận xét