Tối ưu performace khi sử dụng ảnh với srcset | Thuộc tính srcset của thẻ IMG
Vložit
- čas přidán 7. 09. 2024
- 👉 Tìm hiểu khóa học HTML CSS Pro: fullstack.edu....
👉 XEM LỘ TRÌNH HỌC: fullstack.edu....
👉 Đăng Ký Học Offline Tại F8: short.f8team.d...
Trong video này mình sẽ chia sẻ tới các bạn về các cách tối ưu performace khi sử dụng ảnh với srcset | Thuộc tính srcset của thẻ IMG
developer.mozi...
Khi làm việc với hình ảnh chúng ta cần quan tâm tới tối ưu hiệu năng (perfomance) để giúp người dùng truy cập nhanh hơn và tiết kiệm băng thông. Trong video này, mình hướng dẫn các bạn cách sử dụng thuộc tính srcset của thẻ IMG nhé.
Vấn đề tốn băng thông?
Khi bạn sử dụng tài nguyên lớn hơn mức cần thiết thì máy chủ web và người dùng của bạn đều phải chịu tốn băng thông hơn. Phía máy chủ, tốn băng thông cho việc truyền dữ liệu về máy khách hàng. Phía khách hàng, tốn băng thông cho việc tải dữ liệu về. Đương nhiên, cả bạn và khách hàng của bạn đều phải chịu chi phí.
Đối với trang web nhỏ thì bạn chỉ phải trả rất ít chi phí cho băng thông máy chủ, nhưng với trang truyền tải nhiều tài nguyên (như khóa học Pro của F8 phải truyền tải hình ảnh/video thông qua CDN) thì chi phí sẽ rất lớn. Khi đó, việc tối ưu hình ảnh góp một phần đáng kể vào chi phí về mặt cơ sở hạ tầng.
#hoclaptrinh #hoclaptrinhmienphi #javascript #responsive #frontend #backend #devops #f8
-------
☻ Phần mềm sử dụng trong video:
Công cụ dịch Tiếng Anh: bit.ly/2Wsuhet
Công cụ đo đạc giao diện web: s.net.vn/D8kL
Công cụ viết CV xin việc chuyên nghiệp: mycv.vn
--------------
☻ Khóa học lập trình web MIỄN PHÍ:
Kiến thức nhập môn: fullstack.edu....
Xây dựng giao diện với HTML, CSS: fullstack.edu....
Xây dựng web responsive: fullstack.edu....
Lập trình Javascript cơ bản: fullstack.edu....
Lập trình Javascript nâng cao: fullstack.edu....
Làm việc với Terminal & Ubuntu: fullstack.edu....
Xây Dựng Website với ReactJS: fullstack.edu....
Xây dựng web với Node & Express: fullstack.edu....
HTML, CSS tips: fullstack.edu....
Ứng dụng cảnh báo khi sờ lên mặt: fullstack.edu....
Xem thêm tại: fullstack.edu....
-------------------------------------
F8 Official
(c) Sơn Đặng
Website: fullstack.edu.vn
Facebook cá nhân: / sondnf8
Nhóm Học Lập Trình Web: / f8official
Email: contact@fullstack.edu.vn
© Bản quyền thuộc về Channel F8 Official ☞ Do not Reup
© Nghiêm cấm sử dụng video nhằm mục đích thương mại dưới mọi hình thức.
![[Flexbox nâng cao] Liên hệ Flex model với các thuộc tính Flexbox trong CSS](/img/n.gif)
## Có thể bạn đã biết!
NextJS có built-in component là Image, khi bạn sử dụng component này srcset sẽ được sử dụng tự động để đáp ứng tốt trên nhiều màn hình với ảnh 1x, 2x, v.v.
## Một hiểu nhầm lớn!
Nhiều bài đăng trên mạng nói màn hình có pixel ratio là 2 nghĩa là 1px trong CSS sẽ dùng 2px vật lý là chưa chính xác, đúng là 4px. Hoặc 1px CSS trên màn hình có pixel ratio 3 sẽ dùng 3px vật lý là chưa chính xác, đúng phải là 9px các bạn nhé. Tư duy khá đơn giản là pixel là 1 điểm, khi scale nó thì phải tính theo cả 2 chiều x và y.
(Thực chất pixel ratio có thể bị thay đổi khi tùy chỉnh độ phân giải trên màn hình. Ví dụ màn có 1920x1080 pixel vật lý và chỉnh độ phân giải cũng là 1920x1080 sẽ có pixel ratio là 1, nhưng chỉnh thành 960x540 lại có pixel ratio là 2).
## Áp dụng thực tế
Thực chất, rất nhiều trang web sử dụng nhiều hình ảnh (trong video mình nói là ít, sorry mọi người 😘). Ví dụ như các trang thương mại điện tử, mỗi sản phẩm show ra đều có thumbnail đúng không nào? Vì vậy, cơ hội để các bạn sử dụng srcset rất nhiều nhé. Tuy nhiên, để sử dụng hiệu quả các bạn cần kết hợp với backend để tự động generate ra các size các của ảnh thay vì làm thủ công nhé. Vì vậy, nó sẽ phức tạp hơn, và khó áp dụng hơn nếu bạn chỉ là lập trình viên Frontend.
## Vấn đề tốn băng thông?
Khi bạn sử dụng tài nguyên lớn hơn mức cần thiết thì máy chủ web và người dùng của bạn đều phải chịu tốn băng thông hơn. Phía máy chủ, tốn băng thông cho việc truyền dữ liệu về máy khách hàng. Phía khách hàng, tốn băng thông cho việc tải dữ liệu về. Đương nhiên, cả bạn và khách hàng của bạn đều phải chịu chi phí.
Đối với trang web nhỏ thì bạn chỉ phải trả rất ít chi phí cho băng thông máy chủ, nhưng với trang truyền tải nhiều tài nguyên (như khóa học Pro của F8 phải truyền tải hình ảnh/video thông qua CDN) thì chi phí sẽ rất lớn. Khi đó, việc tối ưu hình ảnh góp một phần đáng kể vào chi phí về mặt cơ sở hạ tầng.
✅Để tìm hiểu về nhiều kiến thức hơn, các bạn hãy mua khóa học HTML, CSS Pro trước khi trở về giá gốc trong thời gian tới nhé: fullstack.edu.vn/landing/htmlcss/
chất giọng này luôn xứng đáng 10 điểm 😁
Cầu mong 1 video về Authentication a Sơn ơi :((
Tuyệt vời quá anh😊 trước chỉ mỗi lazy load
Cách này phải dùng NextJS/Backend thì mới tiện được. Ông nào mới học HTML, CSS thì phải resize ảnh thủ công mệt lắm 😥😥
Chào a Sơn Đặng, a và ekip có thể làm series về Redux Toolkit và Redux Saga được không ạ?
Dạ cho em hỏi làm như thế nào để hiển thị được giao diện phần thay đổi kích thước ở phút 21:23 v ạ?
Anh cho em hỏi là làm sao để nắm vững kiến thức như anh được không ạ ? Hi vọng hôm nào a chia sẻ phương pháp học chắc kiến thức đi ạ ...
Dành nhiều thời gian mày mò, tìm tòi và hệ thống kiến thức đã học bằng cách viết ra nha em ơi 😍
anh ơi. anh live work with me đi ạ. dạo này em bị mất động lực ời, anh live cho em xin miếng động lực với ạ :
Cám ơn em, hay quá
video này đưa vào trang của khóa html css pro luôn đi anh :>
Anh Sơn đưa rồi mà, mình đã bookmark =))
Anh đưa vào khóa Pro trong chương Responsive nha em, vì cái này nó giúp làm responsive hình ảnh á.
@@nguyenvannam5095 Nam tia chớp ⚡
@@F8VNOfficial Anh đừng nói thế , e thích lắm 🥲
pixel trong css và pixel trên thực tế nó khác nhau như thế nào nhỉ anh em. Tôi cứ không hiểu đoan này . Tưởng DPI càng cao thì nó càng hiển thị rõ nét
Ví dụ bạn có độ phân giải vật lý 2560x1440px, bạn cấu hình trên phần mềm ở độ phân giải này nhưng lại scale 200% (trong cài đặt display) thì lúc này bạn chỉ đạt 1280x720px CSS. Nếu bạn scale 100% thì bạn có được 2560x1440px khi CSS.
Cái extension show ra cái bảng emoji của a tên gì vậy ạ
Anh ơi cho em hỏi cách tạo button switch 2 thư viện với nhau đc ko a?
Bài này hay quá
Anh có thể làm video cụ thể về việc backend để tự động generate ra các size các của ảnh được k ạ
Giờ anh chưa thu xếp được để làm ngay. Nhưng em học backend thì ngôn ngữ nào cũng làm được hết, biết thao tác với file và ảnh là được, cái này chỉ là resize ảnh và save lại thôi nha em.
@@F8VNOfficial ngoài tối ưu ảnh thì mình cần tối ưu những gì ạ
khi nào có tiếp khóa offline ạ
Anh ơi, cho em hỏi anh có ra thêm phần react k
Phần này chắc anh em cứ lấy API đó làm tiếp em ơi, giờ anh đang overload quá chưa làm tiếp ngay được ý :(
Chào anh Sơn, em làm một học viên của khoá học HTML&CSS cơ bản, em theo học và thực hành các bài trong khoá học nhưng hiện đến bài 70 (Thực hành CSS position relative) của khoá học thì gặp lỗi dù phần code đã làm theo yêu cầu nhưng vẫn báo sai, không chỉ em mà em thấy một số bạn cũng gặp vấn đề này! Mong anh giải đáp sự cố trên!
Hi em. Có lỗi thì em báo anh anh tiếp nhận và check lại thôi em nhé. Vì bài test trên web nó có thể ảnh hưởng bởi nhiều yếu tố như trình duyệt khác nhau, cài đặt các tiện ích gây ảnh hưởng vd như dark theme, mấy ext mà nó sửa html css của trang cũng có thể làm sai lệch bài test. Em thử bằng Chrome và tắt các tiện ích/hoặc tạo profile riêng cho việc học và không cài ext trên account đó nhé.
anh Sơn đỉnk
Lâu lắm mới thấy em comment 🤣
giọng anh rất lôi quấn
Cho e hỏi, nếu 1 trang landing page có tầm 9 section mà section nào cũng có 1 img png khá to (org size > 500 x500) thì có nên tối ưu hình ảnh k ạ
Có em, ngoài áp dụng các cách trên em thêm lazy load cho các hình nằm xa phía dưới màn hình đầu tiên nữa nhé. Ảnh xuất hiện ở màn đầu tiên khi truy cập thì ko cần lazy load. Nếu phục vụ cho traffic lớn thì đẩy cả landing lên CDN cache nữa.
Mà 500x500 cũng đâu to lắm em, em CSS nó kích thước bao nhiêu? Đã đáp ứng được màn 2x chưa em ơi?
mong khóa js pro có thể học lỏm thêm tư duy của senior 😗
Haha anh intern lâu năm thôi 🤣
a có thể cho e xin từ khóa về việc a seo web fullstack edu thế nào ko ạ. e thấy a dùng helmet để dynamic meta tag tuy nhiên thì khi view source ko thấy thay đổi gì thì chắc a vẫn dùng csr . Có thể cho e xin từ khóa để tham khảo đọc hiểu về vấn đề này k ạ
Anh dùng prerender server em ơi, cái này cần biết setup máy chủ chút em nhé. Đại khái là nếu gặp bots thì anh sẽ trả về cho nó bộ source HTML đầy đủ thay vì chỉ có #root rỗng nhé em.
@@F8VNOfficial quào, này thì chắc hơi quá sức vs e r, chắc tìm cách migrate sang next js mất. e cũng tìm hiểu về setup các thứ r mà mấy ngày nay cx chưa nghĩ ra đc gì
@@F8VNOfficial e tìm theo cách của a thì chắc là config vào file conf của docker mà thấy cx toàn bài viết về angular
@@ab_life_review Nếu em dùng docker thì mới cần config trong docker, em cài nginx ở đâu thì cấu hình ở đó nhé. Còn prerender server em dựng lên trước (docker hoặc cài thẳng lên máy chủ), rồi từ nginx em pass sang prerender server nếu là bots nhé. Em xem trên Github nó có đủ tài liệu đấy: github.com/prerender/prerender
@@F8VNOfficial ok a ạ, e cảm ơn a nhiều ạ.
này có trong khóa học pro ko a
Có em ơi, trong chương responsive em nhé
Cmt đầu video hay quá a
Cảm ơn em nhé
anh ơi, khi nào có khóa JS pro ạ
Tầm tháng 10 có thể anh preorder nha em, giờ anh hoàn thiện nốt 2-3 chương cuối khóa HTML đã, làm chi tiết quá mất cả năm rồi em ạ.
@@F8VNOfficial vậy lúc khóa JS Pro ra mắt thì đã hoàn thiện chưa hay cũng giống như khóa HMTL lúc mới ra ạ
@@chauphan33940 Anh sẽ làm khác, khi ra phải gần xong rồi, tầm 70% mới ra mắt, không để anh em phải mua xong chờ nữa nhé!
@@sondangf8 vậy tốt quá anh ạ
@@sondangf8 còn khóa React JS free khi nào mình hoàn thiện xong phần xây dựng dự án Tik Tok v anh