10 Mẹo giúp cho hình ảnh trên website tải nhanh hơn - AdminTalk

emailhoc · 11:02 AM

1. Sử dụng thuộc tính Height and Width
Ví dụ: width="144" height="259"

Mỗi lần trình duyệt thực hiện tải một tập tin ảnh nó đều xét đến 2 thông số thuộc tính trong mã HTML là Width và Height nhằm định hình cách bố trí văn bản và hình ảnh.

Khi hai thuộc tính này được áp dụng, trình duyệt sẽ tải văn bản trước hình ảnh. Điều này là rất tốt cho trang web của bạn vì khách viếng thăm có thể đọc tin tức trong khi chờ đợi hình ảnh được tải về.

Như vậy, nếu không sử dụng 2 thuộc tính này thì trình duyệt sẽ tải hình ảnh trước khi hiển thị văn bản. Nó sẽ không thể tải văn bản cho đến khi xác định được kích thước chính xác của hình ảnh

Do vậy, bảo đảm rằng luôn chèn 2 thuộc tính Width và Height trong khi lập trình dù cho đó đó là những hình nhỏ như button và bullet

2. Điều chỉnh kích thước hình ảnh cho chính xác
Nếu bạn có một tấm ảnh với dung lượng là 30 KB và kích thước lần lượt là rộng 300 pixels x cao 400 pixels. Trong khi đó, bố cục trang web của bạn được thiết kế dành cho kích thước rộng 200 pixels và cao 300 pixels.

Theo lẽ thường bạn sẽ nghĩ rằng cứ chèn vào thì hình ảnh sẽ được hiển thị ở kích thước nhỏ hơn (200 x 300), dung lượng ảnh vì thế cũng sẽ nhỏ hơn và dẫn đến tốc độ tải cũng sẽ nhanh hơn.

Nhưng điều đó không đúng, dung lượng ảnh vẫn là 30 KB và tốc độ tải của nó cũng hoàn toàn giống như một tập tin 30 KB thông thường

Do vậy, bạn cần dùng phần mềm chỉnh sửa ảnh để thay đổi kích thước của ảnh và chèn 2 thuộc tính Width và Height trong mã HTML

3. Ảnh động
Ảnh động tuy sinh động hơn ảnh tĩnh nhưng nó cũng dễ làm người khác khó chịu và quan trọng nó làm chậm tốc độ tải trang

Bạn nên giới hạn số lượng ảnh động và thiết lập cụ thể số lần lặp lại cho ảnh động thay vì cho phép chúng lặp mãi mãi

4. Sử dụng đúng định dạng ảnh
Nếu hình của bạn ít màu sắc thì nên chuyển nó sang định dạng GIF. Đây là sự lựa chọn chính xác trong việc thiết kế các bullet, button, chart…

Những hình ảnh phức tạp hơn với các hiệu ứng phản chiếu và đổ bóng thì nên sử dụng định dạng JPEG

Định dạng PNG cũng có thể được sử dụng để thể hiện các hình ảnh yêu cầu hiệu ứng trong suốt. Tuy nhiên nên hạn chế sử dụng định dạng này do tốc độ tải là khá chậm trừ phi bạn sử dụng phần mềm để cắt ảnh (xem mẹo thứ 5)

5. Cắt ảnh
Cắt ảnh là một kỹ thuật được sử dụng để chia một tấm ảnh lớn thành các tấm ảnh nhỏ hơn nhờ vậy tốc độ tải sẽ nhanh hơn. Bạn có thể sử dụng các phần mềm như Photoshop hoặc tìm trên Google với từ khóa “Image Splitter"

6. Giới hạn số lượng ảnh đặt trên 1 trang
Nếu tốc độ tải trang quá chậm thì bạn nên nghĩ đến việc giảm bớt số lượng ảnh hiển thị trên một trang. Một lời khuyên dành cho bạn: chỉ giữ lại những thứ thật sự cần thiết

7. Sử dụng thumbnail
Sử dụng Java Script để hiển thị một thumbnail và chỉ hiển thị hình ảnh ở kích thước lớn khi người dùng rê chuột lên thumbnail. Hãy sử dụng kỹ thuật này khi có quá nhiều hình trên một trang

8. Bộ đệm của trinh duyệt
Hình ảnh và văn bản sẽ được lưu trữ theo kỹ thuật cache trên ổ cứng của bạn. Điều này sẽ giúp cải thiện tốc độ hiển thị tập tin trong trình duyệt của bạn. Trình duyệt sẽ tải chúng từ trong cache thay vì trên internet nếu tìm thấy chúng

Có một cách để tận dụng lợi ích của cache là nên đặt hình ảnh trong cùng một thư mục trên máy chủ hosting. Nếu trình duyệt thường xuyên gọi hình ảnh từ cùng một thư mục thì nó sẽ tải nhanh hơn.

9. Tối ưu hóa hình ảnh
Tối ưu hóa hình ảnh là cách tuyệt vời để giảm thời gian tải trang. Theo kinh nghiệm thì việc tối ưu hóa hình ảnh xuống còn khoảng 60% so với hình gốc là con số lý tưởng vì nó không làm giảm đáng kể chất lượng ảnh

10. Tối ưu quá trình hiển thị ảnh
Việc tối ưu hóa quá trình hiển thị ảnh trên cơ bản không làm cho hình ảnh của bạn được tải nhanh hơn. Tuy nhiên nó sẽ tải hình ảnh ở độ phân giải thấp trước khi tiếp tục tải cho đến khi hoàn thành hình ảnh với độ phân giải nguyên gốc

Khách viếng thăm ít ra cũng có cái gì đó để xem và nội dung để đọc trước khi quá trình tải hoàn thành. Kỹ thuật này hoạt động tốt với các định dạng tập tin JPG, JPEG, PNG và GIF

Theo Heather Colman

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