Chào mọi người. Hôm nay mình xin được chia sẻ với các bạn cách để tối ưu hóa Thumbnail ngoài trang chủ. Việc này sẽ giúp Blog của chúng ta có tốc độ load nhanh hơn hẳn sau khi tối ưu. (Nên tham khảo : Cách tối ưu tốc độ tải trang cho Blogspot)
Thường ở các Blogspot thì Thumbnail sẽ là hình ảnh đầu tiên của bài viết. Vì bài viết cần hình ảnh phải đẹp nên không thể cho nó mờ đi hay thu nhỏ lại được, việc này giúp load trang chủ nhanh hơn nhưng chất lượng bài viết lại thấp hơn, vậy không nên tí nào !
Chính vì hình ảnh đầu tiên được chọn làm Thumbnail ở trang chủ nên mình sẽ tận dụng điều đó để tối ưu hóa Thumbnail trang chủ mà không cần đến code hay gì cả.
Các bước thực hiện:
Bước 1: Chỉnh kích thước hình ảnh
Trước khi chỉnh sửa kích thước, các bạn nên xem kích thước của Thumbnail ngoài trang chủ là bao nhiêu rồi chỉnh kích thước như thế. Các bạn muốn nhanh thì có thể đưa chuột vào Thumbnail rồi F12 xem kích thước
Ở đây blog mình có kích thước là 250x170.
Tiếp theo là chỉnh sửa kích thước ảnh cho khớp tỉ lệ với kích thước Thumbnail. Các bạn cũng có thể chỉnh sửa kích thước trực tiếp tại đây
Thường thì khi edit kích thước thì nếu bạn chỉnh chiều rộng thì theo tỉ lệ ở các phần mềm cũng sẽ tự chỉnh chiều cao và ngược lại. Vậy nên nếu các bạn gặp TH này thì nên ưu tiên phần HEIGHT (Chiều rộng), còn phần WIDTH sai số 1 tí cũng không sao.
Bước 2: Chèn ảnh
Sau khi chỉnh sửa xong thì bạn hãy chèn ảnh vừa edit vào ngay đầu bài viết sau đó qua tag HTML chỉnh lại kích thước là 0x0. Sau đó các bạn chèn ảnh chính (Chưa edit) kích thước lớn vào bài viết với vị trí bất kì (Không được chèn trước ảnh đã edit) bởi vì bức ảnh mà bạn đã chỉnh sửa kích thước khi chèn ở vị trí đầu tiên sẽ Thumbnail ngoài trang chủ, còn việc chỉnh kích thước 0x0 là để cho độc giả xem không thể thấy được bức ảnh kém chất lượng đó mà chỉ nhìn thấy được hình ảnh gốc (Chất lượng hơn).
Bước 3: Xuất bản !
Cuối cùng là xuất bản bài viết của bạn và thưởng thức tốc độ sau khi tối ưu !
Đây là cách tối ưu siêu đơn giản không phức tạp, cách này áp dụng cho những bạn chưa biết nhiều về code, đơn giản mà hiệu quả !
Thường ở các Blogspot thì Thumbnail sẽ là hình ảnh đầu tiên của bài viết. Vì bài viết cần hình ảnh phải đẹp nên không thể cho nó mờ đi hay thu nhỏ lại được, việc này giúp load trang chủ nhanh hơn nhưng chất lượng bài viết lại thấp hơn, vậy không nên tí nào !
Chính vì hình ảnh đầu tiên được chọn làm Thumbnail ở trang chủ nên mình sẽ tận dụng điều đó để tối ưu hóa Thumbnail trang chủ mà không cần đến code hay gì cả.
Các bước thực hiện:
Bước 1: Chỉnh kích thước hình ảnh
Trước khi chỉnh sửa kích thước, các bạn nên xem kích thước của Thumbnail ngoài trang chủ là bao nhiêu rồi chỉnh kích thước như thế. Các bạn muốn nhanh thì có thể đưa chuột vào Thumbnail rồi F12 xem kích thước
Ở đây blog mình có kích thước là 250x170.
Tiếp theo là chỉnh sửa kích thước ảnh cho khớp tỉ lệ với kích thước Thumbnail. Các bạn cũng có thể chỉnh sửa kích thước trực tiếp tại đây
Thường thì khi edit kích thước thì nếu bạn chỉnh chiều rộng thì theo tỉ lệ ở các phần mềm cũng sẽ tự chỉnh chiều cao và ngược lại. Vậy nên nếu các bạn gặp TH này thì nên ưu tiên phần HEIGHT (Chiều rộng), còn phần WIDTH sai số 1 tí cũng không sao.
Bước 2: Chèn ảnh
Sau khi chỉnh sửa xong thì bạn hãy chèn ảnh vừa edit vào ngay đầu bài viết sau đó qua tag HTML chỉnh lại kích thước là 0x0. Sau đó các bạn chèn ảnh chính (Chưa edit) kích thước lớn vào bài viết với vị trí bất kì (Không được chèn trước ảnh đã edit) bởi vì bức ảnh mà bạn đã chỉnh sửa kích thước khi chèn ở vị trí đầu tiên sẽ Thumbnail ngoài trang chủ, còn việc chỉnh kích thước 0x0 là để cho độc giả xem không thể thấy được bức ảnh kém chất lượng đó mà chỉ nhìn thấy được hình ảnh gốc (Chất lượng hơn).
Bước 3: Xuất bản !
Cuối cùng là xuất bản bài viết của bạn và thưởng thức tốc độ sau khi tối ưu !
Đây là cách tối ưu siêu đơn giản không phức tạp, cách này áp dụng cho những bạn chưa biết nhiều về code, đơn giản mà hiệu quả !
Chúc các bạn thành công !
Bài viết sưu tầm từ nhiều nguồn trên mạng, hy vọng nó sang mang đến thông tin hữu ích cho bạn. Chúc các bạn vui vẽ ngày mới!
ConversionConversion EmoticonEmoticon