Nhập Ảnh Tối Ưu Cho Website

 

Chọn PNG hay JPEG?

Với Website có 2 kiểu ảnh phổ biến nhất là PNG và JPEG, chúng có ưu và nhược điểm khác nhau, có thể chọn dùng tùy vào tình huống

PNG thuộc kiểu lossless, nghĩa là giữ nguyên được chất lượng ảnh sau mỗi lần upload ảnh, hay chỉnh sửa bằng phần mềm. Chất lượng ảnh đạt được rõ nét và trung thực nhất, nhưng dung lượng lớn. Đồng nghĩa với thời gian lướt web sẽ chậm đi rất nhiều.

JPEG thuộc kiểu lossy, được nén dữ liệu, chất lượng ảnh ngày càng kém đi sau mỗi lần upload ảnh hoặc chỉnh sửa. Chất lượng ảnh ở mức ổn và tốt nếu upload từ ảnh gốc (ảnh F0), dung lượng nhẹ, thời gian lướt web nhanh.

	PNG	JPEG
Chất lượng ảnh	Rõ nét và Trung thực	ở mức ổn và tốt
Tốc độ tải Website	Chậm đi nhiều nếu dùng nhiều ảnh	Nhanh hơn nhiều
Dùng cho	Logo, hình vẽ xuất ra từ Corel	Hình chụp bằng máy ảnh, điện thoại
Mục đích sử dụng	Ảnh đã cắt phông nền	Ảnh với màu sắc phức tạp
Ảnh tham khảo

 

Chọn loại ảnh phù hợp

Với những ảnh dạng Vector (ảnh vẽ và xuất ra từ chương trình như Corel)  thì nhẹ hơn so với JPEG. Đó là lý do nên dùng kiểu PNG cho Logo và hình vẽ hoạt họa.

Phần lớn ảnh trên website ta nên dùng JPEG, chất lượng ổn và tốc độ tải nhanh.

 

Mẹo nhập ảnh Tranparent (ảnh đã cắt phông nền) vào web

Cách 1: Ảnh PNG cắt phông nền	Hiện ảnh PNG trên phông nền trắng

 

Cách 2: Ảnh JPEG trên phông nền trắng	Hiện ảnh JPEG trên phông nền trắng

 

Với cách thứ 2 bạn đạt được cả 2 ưu điểm: ảnh nổi bật với hiệu ứng nổi 3D và tăng tốc độ tải trang. Mẹo ở đây là dựa vào phông nền trang sản phẩm, để chỉnh sửa photoshop ảnh sản phẩm cho cùng màu nền. Nếu nền màu xanh, thì photoshop nền sản phẩm cho đồng nhất màu xanh.

 

Nhập ảnh vào website (cms4seo)

cms4seo hỗ trợ công nghệ siêu nén ảnh TurboJpeg, nén ảnh jpeg với xuống dung lượng thấp nhất nhưng vẫn giữ chất lượng ảnh mức tốt. Và một số tiện ích khác như tính năng kỳ vọng ảnh giúp ảnh hiển thị theo đúng kỳ vọng. Tính năng tự động cắt (Crop) ảnh và tối ưu hóa ảnh.

Kỳ vọng ảnh.

Đồng bộ hiện ảnh tại trang danh sách sản phẩm theo ảnh phong cảnh (tỉ lệ 4:3) hay kiểu chân dung (3:4) theo kỳ vọng.

Ảnh không đồng bộ theo tỷ lệ kỳ vọng	Ảnh sau khi được đồng bộ theo kỳ vọng

 

Tại trang Admin -> vào mục Cấu hình -> mục con Cấu hình cửa hàng. Tại mục Kỳ vọng tỷ lệ hình ảnh cho Card, chọn tùy chọn phù hợp. Cần lưu ý là ảnh sẽ bị cắt xén và phóng to lên cho phù hợp với kỳ vọng, để biết thêm chi tiết vui lòng xem video -> 07. Cấu Hình Ảnh

 

Tính năng tự động cắt (Crop) ảnh.

Bước 1: bật tính năng chỉnh sửa nhanh

Bước 2: chọn nút chỉnh sửa cạnh nội dụng cần sửa

Bước 3: xem đề xuất kiểu ảnh và độ phân giải, và upload ảnh có độ phân giải cao hơn đề xuất

Bước 4: thay đổi viền khung Crop ảnh sau cho ảnh vừa khích với khung hình

Bước 5: làm tương tự với ảnh cho điện thoại (nếu có) và lưu lại

 

 

Cấu hình ảnh

 

Tại trang quản lý Admin -> vào mục Cấu Hình -> mục con Cấu hình ảnh.

 

• Mục Kích cỡ ảnh nhỏ dùng làm ảnh hiện trên trang danh sách sản phẩm, kích cỡ 400px là tối ưu tốc độ tải trang và hiển thị (đây là dạng ảnh đại diện nhỏ). Khi khách hàng chọn được sản phẩm phù hợp và muốn xem sản phẩm chi tiết và rõ nét hơn họ sẽ bấm vào ảnh này, website sẽ chuyển hướng đến trang chi tiết sản phẩm. Không nên đặt quá nhỏ sản phẩm sẽ kém hấp dẫn, cũng không nên đặt quá lớn sẽ làm chậm web, và lãng phí không cần thiết (chiều rộng ảnh sản phẩm 400px chỉ hiển thị tối đa cho ảnh 400px). 

 

• Mục kích thước ảnh lớn là ảnh chỉ hiện lên tại trang chi tiết sản phẩm. Ảnh này cần đặt kích thước bằng, hoặc lớn kích thước chiều rộng bài viết trên web, để hiện hình ảnh rõ nét. Không nên đặt kích thước quá nhỏ, sản phẩm sẽ nhìn thiếu hấp dẫn, cũng không nên đặt kích thước quá lớn, sẽ làm chậm website và lãng phí không cần thiết (chiều rộng nội dung bài viết là 960px thì chỉ hiện thị tối đa cho ảnh 960px)

 

 

• Mục tự dộng chuyển ảnh sang JPEG, sau khi bật tính năng này tất cả định dạng file ảnh sau khi upload đều tự động chuyển sang JPEG. Cần lưu ý cấu hình ảnh chỉ có tác dụng với  phần upload ảnh kéo & thả tại trang quản trị Admin.

 

Xem Video Kiểm tra Tốc Độ Web và tối ưu với Chrome Develeper (từ phút 0 đến 6:30)

 

• Có thể bạn thích