TIP HAY CHO LẬP TRÌNH VIÊN - CÁCH TỐI ƯU HÌNH ẢNH CHO WEBSITE

29-05-2019 00:10

Độ nặng nhẹ của ảnh là một yếu tố ảnh hưởng đến tốc độ tải trang của trang web. Chẳng ai phải muốn chờ đợi một trang web với những bức ảnh nặng nề. Vậy nên việc tối ưu hình ảnh cho website là điều cần thiết. Bên cạnh đó việc tối ưu ảnh sẽ giúp cải thiện SEO, tạo bản sao nhanh hơn và nhiều ưu điểm khác... Vậy tối ưu hình ảnh cho website như thế nào thì chúng ta cùng tìm hiểu trong bài viết sau đây nhé.

Xác định chất lượng hình ảnh trước khi lưu

Có thể bạn chưa biết rằng chúng ta có thể lưu hình ảnh với nhiều mức độ chất lượng về máy. Chúng ta có thể thấy điều này rõ ràng ở Pixlr hay google hình ảnh…. Không phải là cứ đăng tải bức ảnh có chất lượng cao nhất là đúng nhất. Rất nhiều trước hợp chỉ cần tải một bức ảnh chất lượng vừa phải.

Một bức ảnh có thể có rất nhiều kích thước và chất lượng

Hãy chọn đúng loại ảnh với định dạng phù hợp

Những loại đuôi file thường được sử dụng nhất là .gif, .jpeg hay .png. Tất nhiên là định dạng khác nhau sẽ cho ra một hình ảnh hiển thị khác nhau. Tất nhiên chúng ta phải hiểu về chúng mới có thể chọn sao cho phù hợp.

  • JPEG (hay còn gọi là JPG), là loại tệp phổ biến cho các bức ảnh bình thường. JPG cho phép lưu ảnh ở các mức độ chất lượng từ thấp đến cao. Vậy nên chúng ta có thể tự điều chỉnh và lưu ảnh theo ý mà mình muốn.

  • PNG là loại tệp phổ biến thứ 2. PNG-8 hoặc PNG-24 là 2 tùy chọn lưu trong Adobe Photoshop. Với PNG-24 thì ảnh chất lượng hơn nhưng kích thước lớn hơn so với PNG-8.

  • GIF dùng cho ảnh động, chúng chỉ sử dụng được 256 màu.

Hình ảnh với đuôi .gif, .jpeg hay .png

Một số cách để nén ảnh

Nén hình ảnh là một điều dễ hiểu. Chúng ta có hai cách nén ảnh đó là lossy và lossless. Với lossy, thì chúng ta sẽ loại bỏ một số dữ liệu trong ảnh, vậy nên sẽ giảm đi chất lượng của ảnh. Nếu sử dụng lossy thì kích thước ảnh sẽ giảm mạnh, nhưng không nhìn thấy chi tiết được đâu. Còn  lossless sẽ không giảm chất lượng ảnh nhưng yêu cầu ảnh phải được giải nén.

Hãy lựa chọn ảnh phù hợp về chiều rộng, chiều cao… cho bố cục trang mà bạn cần hiển thị. Sau đó cân bằng giữa chất lượng và kích thước. Chúng ta có thể giảm kích thước khi lưu ảnh bằng photoshop, paint…

Sự khác nhau của lossy và lossless

Cần lưu tên file đúng cách

Máy tính của bạn sẽ có hàng trăm folder với nhiều cái tên đặt vội vàng 1, 2, 3, 4 hay từ viết tắt khó hiểu, tương tự với các bức ảnh. Nếu như bạn đăng tải các bức ảnh lên web với tên không rõ ràng thì là điều sai sót. Không chỉ dừng lại ở việc không đảm bảo phân loại được hình ảnh. Các công cụ tìm kiếm lấy tên ảnh cho mục đích SEO cũng không thể thực hiện nếu như bạn lưu tên ảnh “ lung tung”. Lưu tên ảnh có dấu là điều người ta hạn chế làm.

Thay vì hình ảnh có text thì nên sử dụng text

Nghe có vẻ ngớ ngẩn nhưng mà điều này thực sự hay ho. Thay vì làm một cái ảnh có slogan, câu chữ gì đó cùng vài hình ảnh không cần thiết, thì bạn có thể viết trực tiếp chúng lên web. Bạn vẫn có thể sửa chúng và style chúng lại mà, cái này cũng rất tốt cho SEO đó.

Tham khảo thêm các khóa học lập trình của Học viện Công nghệ Thông Tin ITPlus tại:

Lập trình Python & Odoo Framework với IziSolution

Lập trình nhúng với FPT SOFTWARE

Khóa học thiết kế và lập trình web - PHP chuyên nghiệp

Lập trình ứng dụng di động Android

Khóa học lập trình Python

Khóa học Trí tuệ nhân tạo - Học máy cơ bản và ứng dụng

Ban truyền thông ITPlus Academy 

 

 

Bài viết cùng chủ đề

1