Nguyên tắc dùng hình ảnh trong Template TinhDauOnline để tối ưu hóa nhất

Nguyên tắc dùng hình ảnh trong Template TinhDauOnline để tối ưu hóa nhất
TinhDauOnline sử dụng javascript để cắt và nén ảnh tự động nhờ đó sẽ giảm tải và tăng tốc độ tải trang. Tuy nhiên để hình ảnh sản phẩm đẹp mắt nhất thì bạn nên tuân thủ cách sử dụng của nó.

Khi sử ảnh trên Template TinhDauOnline bạn cần sử dụng các khuyến cáo sau đây để có thể tối ưu ảnh cao nhất.
TINH DẦU SẢ CHANH NGUYÊN CHẤT

I. Nguyên tắc tuyệt đối sử dụng ảnh trong template

  1. Chỉ sử dụng ảnh định dạng .jpg (tuyệt đối không dùng ảnh định dạng .bmp)
  2. Đối với ảnh sử dụng nền trong suốt thì mới dùng định dạng .png
  3. Luôn luôn nén ảnh trước khi up lên tại http://compressnow.com/ (.jpg) và http://compresspng.com/vi/ (.png)
  4. Sử dụng đúng kích thước hiển thị tức ảnh hiển thị kích thước bao nhiêu thì cắt ảnh/gọi ảnh ra kích thước bấy nhiêu trước khi up lên để tránh hiện tượng mờ, bóp méo hình ảnh. Tuyệt đối không xuất ảnh lớn hơn kích thước ảnh hiển thị vì hình ảnh sẽ nặng làm nặng web.

II. Kích thước ảnh chuẩn trong Template Tinhdauonline

  1. Banner sử dụng kích thước 693 px x 307 px
  2. Ảnh sản phẩm kích thước VUÔNG tối thiểu 450px x 450px
  3. Ảnh Avatar tư vấn viên 72x72px

Ảnh sử dụng trên Tinhdauonline.com.vn chiếm 1.25 mb và dung lượng toàn trang 2.5mb nếu bạn tối ưu ảnh tốt.

Chọn nén ảnh giao động 20-30% hoặc dựa theo đề xuất của Google Insights
III. Nguyên tắc xuất kích thước ảnh trên Blogger

Link ảnh khi up lên Blogger sẽ có định dạng sau:

https://2.bp.blogspot.com/-vCsO0KFNpLY/WgCHC9WVufI/AAAAAAAAL3k/bLbIIh7YGIg_oUp02CVjPpIHolrBhe7xwCLcBGAs/s640/mua_tinh_dau_sa_chanh_o_dau.jpg
Khi sử dụng ảnh kích thước width 450px đơn giản là bạn chỉ việc thay đổi link ảnh từ con số s640 thành s450 trong link ảnh

Ta thu được: (click vào link để xem chi tiết)

(Tối đa width = 640px) 

(Tối đa width = 450px) 

(Tối đa width = 280px) 

Như vậy ta rất dễ dàng để gọi các kích thước mà bạn muốn sử dụng ảnh nhỏ hơn. Ảnh nhỏ hơn sẽ cho ra dung lượng ảnh nhẹ hơn!
0 Nhận xét