Tối ưu hóa hình ảnh theo lời khuyên của google

bạn có thể nói rõ hơn ko ? mình cũng quan tâm đến vấn đề này ? nếu nén như vậy thì định dạng hình ảnh sẽ là gì ? liệu có hiển thị tốt trên web ? mong bạn hướng dẫn cụ thể hơn 1 chút

 

alt thì google hiểu và SEO, tốc độ và kích cỡ cũng là 1 yếu tố, tuy nhiên không phải là tất cả.

 

Nếu bạn cẩn thận thì có thể lấy ảnh về vào cắt dung lượng đi, vì trên web có thể kích thước to hơn nên có thể là tốc độ load cao, hoặc bạn up sang 1 host trung gian chạy cho tít

 

Mình vẫn quan tâm nhiều về vấn đề này nhưng cách sữa chữa GG đưa ra quả thật khó làm quá... nếu dụng vào code cũng ok... nhưng nó lại kêu lấy ra 1 số đoạn Java và CSS thì chịu vừa lấy ra đã lỗi hix

 

Mình có 1 điều may mắn, là khi bắt đầu SEO thì website của mình đã được cty tối ưu hoàn toàn kể cả tốc độ load web, nên mình trước giờ ko quan tâm đến nó nữa, nhưng mình biết là nó khá quan trọng

 

Sau khi nén thì định dạng ảnh mặc định vẫn là như cũ, bạn cũng có thể đổi định dạng theo ý thích, lên google search "Riot nén ảnh" là ra, rồi các bạn sử dụng là biết. Tại nó chuyên dùng để nén ảnh nên dễ sử dụng.

 

Tối ưu hình ảnh xong - kết hợp với sử dụng CDN là ổn nhất

 

Mình đã kiểm tra thì phiên bản dành cho di động không được tốt lắm. có 56/10 do kích cỡ hình ảnh + javascript chặn hiển thị. Còn phiên bản cho máy tính thì khá chuẩn. 86/100. Theo bạn mình có cần tối ưu thêm chó điện thoại không?

 

Chào các bạn, chào bạn chủ topic Phạm Thế Anh.
Mình xin đóng góp vài ý kiến thế này:

Về tối ưu hình ảnh cho Google cơ bản có 2 phần:
1. Kích thước hình sao cho nhỏ mà đảm bảo chất lượng
2. Thuộc tính img html thông tin hình, cái này giúp google biết đó là hình gì, các yếu tố cơ bản gồm: tên file hình, thẻ alt, title, description, và vài yếu tố khác nữa.

Theo như vấn đề chủ topic đưa ra thì tôi xin đi chi tiết vào phần 1: kích thước hình ảnh.
Sau đây là các giải pháp tối ưu kích thước hình ảnh tùy theo mục đích, tình huống mà các bạn áp dụng cho đúng nhé:

- Tình huống 1: nếu site của bạn có rất nhiều hình nhỏ, ví dụ các biểu tượng, nút bấm, các logo nhỏ... sử dụng trên toàn site, thì bạn nên gộp lại thành 1 file, lúc đó toàn hình trên site chỉ có 1 file, tải về rất nhanh, lúc này các icon đều nằm trên 1 file, chỉ khác vị trí trong hình, vì vậy để hiển thị hình bạn phải dùng css để trỏ position cho đúng. Phương pháp này đều được các bác google, facebook, gmail... áp dụng trong chính web site của mình, ví dụ bạn xem link : https: // ssl. gstatic. com / chat / babble / sprites / common-00773e5d3b4f45c183a1a95ccb7b7741. png thì sẽ thấy có rất nhiều icon trong một cái hình bự, rồi khi cần dùng cái nào họ dùng css để trỏ position cho đúng. Phương pháp này có gốc từ các game engine, họ luôn đưa tất cả các đồ họa trong game vào 1 file để load cho nhanh..

- Tính huống 2: bạn đang có rất nhiều hình ảnh sản phẩm, chẳng hạng shop quần áo, có 2000 hình ảnh sản phẩm chụp hình kỹ thuật số, mối file vài mb, hoặc hơn 400,500 kb. Nếu bạn up các hình này lên trang web thì quả thật là rất chậm, mà site của bạn cũng load cực chậm nữa. Để chỉnh kích thước toàn bộ số hình này rất mất thời gian, lúc này bạn cần sử dụng phần mềm để chỉnh sửa kích thước hình số lượng lớn, bạn có thể tìm google với từ khóa Batch Image Resize hoặc Riot nén ảnh. Các tool này sẽ giúp bạn chuyển hàng loạt file ảnh về 1 tiêu chí bạn muốn, chẳng hạn tất cả về file hình size max 600x600, nén JPG, chất lượng High... Về ưu điểm: là làm rất nhanh, về khuyết điểm là chất lượng ảnh trung bình, có nhiều hình sẽ ko còn đẹp như ý, cái này phải chịu thôi vì có tới mấy ngàn hình cơ mà

- Tình huống 3: bạn làm 1 trang để giới thiệu công ty đi, chỉ có vài cái hình cần đưa lên thôi, yêu cầu là chất lượng hình phải đẹp, kích thước không được lớn quá, tình huống này bạn nên dùng photoshop, mở hình lên , resize đúng kích thước cần đưa lên web, thường không lớn hơn 1000x600 (vì trình duyệt nó cũng nhỏ mà ) sau đó chọn Save for web, lúc này bạn chọn vào các tùy chọn có thể là: JPG, PNG, GIF: Highest, High, Medium, Small. Trường hợp này bạn phải dùng mắt của mình để so sánh chất lượng hình giữa các tùy chọn, sau đó chọn hình có kích thước phù hợp, thường không quá 100kb là được.

-Tình huống 4: bạn muốn tối ưu hình cho điện thoại, máy tính bảng. Theo xu hướng thiết kế web trước đây, tức là có bản cho mobile, tablet riêng, thì bạn nên sinh ra các size hình phù hợp và trên thiết bị nào thì dùng hình đó. Theo xu hướng thiết kê web mới: responsive design, lúc này chỉ có một trang web mà tùy vào thiết bị nó sẽ hiển thị cho phù hợp.

Trong responsive design người ta dùng kỹ thuật interchange, bạn tham khảo code dưới:

HTML:

<img data-interchange="[default . jpg, (default)], 
[bigger-image . jpg, (large)], [medium-image . jpg, (medium), 
[small-image . jpg, (small)]]"> 
<noscript><img src="default . jpg"></noscript>

Nguồn: http: // foundation . zurb . com / docs / components / interchange . html

Họ dùng javascript để xác định kích thước màn hình, tùy theo kích thước màn hình large,medium,small mà hiện hình có size phù hợp.

Trên là các phương pháp được tổng hợp theo kinh nghiệm của mình, hy vọng giúp ích được các bạn.

 

Mình cũng đang tìm hiểu, cám ơn