Một hình ảnh có giá trị bằng 1000 từ và hình ảnh đóng vai trò không thể thiếu trên mỗi trang. Nhưng chúng cũng thường chiếm hầu hết các byte được tải xuống. Với thiết kế web đáp ứng, bố cục của chúng tôi không chỉ thay đổi dựa trên đặc điểm thiết bị mà còn dựa trên hình ảnh.
Thiết kế web thích ứng có nghĩa là không chỉ bố cục của chúng ta có thể thay đổi dựa trên các đặc điểm của thiết bị, mà nội dung cũng có thể thay đổi. Ví dụ: trên màn hình có độ phân giải cao (2x), đồ hoạ có độ phân giải cao đảm bảo độ sắc nét. Hình ảnh có chiều rộng 50% có thể hoạt động tốt khi trình duyệt rộng 800px, nhưng sử dụng quá nhiều không gian trên điện thoại hẹp và yêu cầu cùng mức hao tổn băng thông khi thu nhỏ để vừa với màn hình nhỏ hơn.
Hướng nghệ thuật
Cũng có lúc bạn cần thay đổi hình ảnh mạnh mẽ hơn: thay đổi tỷ lệ, cắt và thậm chí là thay thế toàn bộ hình ảnh. Trong trường hợp này, việc thay đổi hình ảnh thường được gọi là chỉ hướng nghệ thuật. Hãy truy cập vào responsiveimages.org/demos/ để biết thêm ví dụ.
Hình ảnh thích ứng
Bạn có biết rằng trung bình, hình ảnh chiếm hơn 60% số byte để tải một trang web không?
Trong khoá học này, bạn sẽ tìm hiểu cách xử lý hình ảnh trên web hiện đại để hình ảnh trông đẹp mắt và tải nhanh trên mọi thiết bị.
Đồng thời, bạn sẽ học một loạt kỹ năng và kỹ thuật để tích hợp hình ảnh thích ứng vào quy trình phát triển một cách suôn sẻ. Khi kết thúc khoá học này, bạn sẽ phát triển được những hình ảnh có thể thích ứng và thích ứng với nhiều kích thước khung nhìn cũng như tình huống sử dụng.
Đây là khoá học miễn phí do Udacity cung cấp
Hình ảnh trong thẻ đánh dấu
Phần tử img rất mạnh mẽ, giúp tải xuống, giải mã và hiển thị nội dung. Trong khi đó, các trình duyệt hiện đại hỗ trợ nhiều định dạng hình ảnh. Việc bao gồm hình ảnh hoạt động trên các thiết bị không khác với hình ảnh trên máy tính để bàn và chỉ yêu cầu một vài tinh chỉnh nhỏ để tạo ra trải nghiệm tốt.
Tóm tắt
- Sử dụng kích thước tương đối cho hình ảnh để tránh việc hình ảnh vô tình tràn vùng chứa.
- Sử dụng phần tử
picturekhi bạn muốn chỉ định nhiều hình ảnh, tuỳ thuộc vào đặc điểm thiết bị (còn gọi là hướng nghệ thuật). - Sử dụng
srcsetvà chỉ số mô tảxtrong phần tửimgđể đưa ra gợi ý cho trình duyệt về hình ảnh phù hợp nhất nên sử dụng khi chọn trong số các mật độ khác nhau. - Nếu trang của bạn chỉ có một hoặc hai hình ảnh và những hình ảnh này không được dùng ở nơi nào khác trên trang web, hãy cân nhắc sử dụng hình ảnh cùng dòng để giảm số yêu cầu truy cập tệp.
Sử dụng kích thước tương đối cho hình ảnh
Hãy nhớ sử dụng các đơn vị tương đối khi chỉ định chiều rộng cho hình ảnh để ngăn hình ảnh vô tình tràn khung nhìn. Ví dụ: width: 50%; làm cho chiều rộng hình ảnh bằng 50% phần tử chứa (không phải 50% khung nhìn hay 50% kích thước pixel thực tế).
Vì CSS cho phép nội dung tràn bộ chứa, nên bạn có thể cần phải sử dụng max-width: 100% để ngăn hình ảnh và nội dung khác bị tràn. Ví dụ:
img, embed, object, video {
max-width: 100%;
}
Hãy nhớ cung cấp nội dung mô tả có ý nghĩa thông qua thuộc tính alt trên các phần tử img. Những phần tử này sẽ giúp người dùng truy cập vào trang web của bạn dễ dàng hơn bằng cách cung cấp ngữ cảnh cho trình đọc màn hình và các công nghệ hỗ trợ khác.
Cải thiện img bằng srcset cho các thiết bị có DPI cao
Thuộc tính srcset giúp cải thiện hoạt động của phần tử img, giúp bạn dễ dàng cung cấp nhiều tệp hình ảnh cho nhiều đặc điểm của thiết bị. Tương tự như hàm gốc image-set
CSS trong CSS, srcset cho phép trình duyệt chọn hình ảnh phù hợp nhất tuỳ thuộc vào các đặc điểm của thiết bị, ví dụ: sử dụng hình ảnh 2x trên màn hình 2x và có thể trong tương lai sẽ có hình ảnh 1x trên thiết bị 2x khi dùng mạng băng thông hạn chế.
<img src="photo.png" srcset="photo@2x.png 2x" ...>
Trên các trình duyệt không hỗ trợ srcset, trình duyệt chỉ sử dụng tệp hình ảnh mặc định do thuộc tính src chỉ định. Đây là lý do tại sao quan trọng là phải luôn bao gồm hình ảnh 1x có thể hiển thị trên mọi thiết bị, bất kể khả năng là gì. Khi srcset được hỗ trợ, danh sách hình ảnh/điều kiện được phân tách bằng dấu phẩy sẽ được phân tích cú pháp trước khi thực hiện yêu cầu và chỉ hình ảnh phù hợp nhất mới được tải xuống và hiển thị.
Mặc dù các điều kiện có thể bao gồm mọi thông tin từ mật độ pixel đến chiều rộng và chiều cao, nhưng hiện nay, chỉ mật độ pixel là được hỗ trợ tốt. Để cân bằng hành vi hiện tại với các tính năng trong tương lai, hãy duy trì việc cung cấp hình ảnh 2x trong thuộc tính.
Hướng nghệ thuật trong hình ảnh thích ứng bằng picture
Để thay đổi hình ảnh dựa trên đặc điểm của thiết bị, còn gọi là hướng nghệ thuật, hãy sử dụng phần tử picture. Phần tử picture xác định một giải pháp khai báo để cung cấp nhiều phiên bản hình ảnh dựa trên nhiều đặc điểm, chẳng hạn như kích thước thiết bị, độ phân giải, hướng và nhiều đặc điểm khác.
Sử dụng phần tử picture khi một nguồn hình ảnh tồn tại ở nhiều mật độ, hoặc khi một thiết kế thích ứng chỉ định một hình ảnh khác trên một số loại màn hình. Tương tự như phần tử video, bạn có thể bao gồm nhiều phần tử source, nhờ đó, bạn có thể chỉ định nhiều tệp hình ảnh tuỳ thuộc vào truy vấn nội dung nghe nhìn hoặc định dạng hình ảnh.
<picture>
<source media="(min-width: 800px)" srcset="head.jpg, head-2x.jpg 2x">
<source media="(min-width: 450px)" srcset="head-small.jpg, head-small-2x.jpg 2x">
<img src="head-fb.jpg" srcset="head-fb-2x.jpg 2x" alt="a head carved out of wood">
</picture>
Trong ví dụ trên, nếu trình duyệt có chiều rộng tối thiểu là 800px, thì head.jpg hoặc head-2x.jpg sẽ được sử dụng, tuỳ thuộc vào độ phân giải của thiết bị. Nếu trình duyệt nằm trong khoảng từ 450px đến 800px, thì head-small.jpg hoặc head-small-
2x.jpg sẽ được sử dụng lại, tuỳ thuộc vào độ phân giải của thiết bị. Đối với chiều rộng màn hình dưới 450px và khả năng tương thích ngược trong đó phần tử picture không được hỗ trợ, trình duyệt sẽ hiển thị phần tử img và phải luôn bao gồm phần tử này.
Hình ảnh có kích thước tương đối
Khi không xác định được kích thước cuối cùng của hình ảnh, rất khó để chỉ định bộ mô tả mật độ cho các nguồn hình ảnh. Điều này đặc biệt đúng với những hình ảnh trải dài theo chiều rộng tỷ lệ của trình duyệt và linh hoạt, tuỳ thuộc vào kích thước của trình duyệt.
Thay vì cung cấp kích thước và mật độ hình ảnh cố định, bạn có thể chỉ định kích thước của từng hình ảnh được cung cấp bằng cách thêm chỉ số mô tả chiều rộng cùng với kích thước của phần tử hình ảnh, cho phép trình duyệt tự động tính mật độ pixel hiệu quả và chọn hình ảnh tốt nhất để tải xuống.
<img src="lighthouse-200.jpg" sizes="50vw"
srcset="lighthouse-100.jpg 100w, lighthouse-200.jpg 200w,
lighthouse-400.jpg 400w, lighthouse-800.jpg 800w,
lighthouse-1000.jpg 1000w, lighthouse-1400.jpg 1400w,
lighthouse-1800.jpg 1800w" alt="a lighthouse">
Ví dụ trên hiển thị hình ảnh có kích thước bằng một nửa chiều rộng khung nhìn (sizes="50vw"), và tuỳ thuộc vào chiều rộng của trình duyệt và tỷ lệ pixel của thiết bị, cho phép trình duyệt chọn hình ảnh chính xác bất kể cửa sổ trình duyệt lớn đến mức nào. Ví dụ: bảng dưới đây cho thấy hình ảnh mà trình duyệt sẽ chọn:
| Chiều rộng của trình duyệt | Tỷ lệ pixel của thiết bị | Hình ảnh đã sử dụng | Giải pháp hiệu quả |
|---|---|---|---|
| 400px | 1 | 200.jpg |
1x |
| 400px | 2 | 400.jpg |
Thêm 2 sản phẩm |
| 320px | 2 | 400.jpg |
Gấp 2,5 lần |
| 600px | 2 | 800.jpg |
2,67 lần |
| 640px | 3 | 1000.jpg |
3,125x |
| 1100px | 1 | 800.png |
1,45x |
Tính đến các điểm ngắt trong hình ảnh thích ứng
Trong nhiều trường hợp, kích thước hình ảnh có thể thay đổi tuỳ thuộc vào các điểm ngắt bố cục của trang web. Ví dụ: trên màn hình nhỏ, bạn có thể muốn hình ảnh trải dài toàn bộ chiều rộng của khung nhìn, trong khi trên các màn hình lớn hơn, hình ảnh chỉ nên chiếm một tỷ lệ nhỏ.
<img src="400.png"
sizes="(min-width: 600px) 25vw, (min-width: 500px) 50vw, 100vw"
srcset="100.png 100w, 200.png 200w, 400.png 400w,
800.png 800w, 1600.png 1600w, 2000.png 2000w" alt="an example image">
Trong ví dụ trên, thuộc tính sizes sử dụng một số truy vấn phương tiện để chỉ định kích thước của hình ảnh. Khi chiều rộng trình duyệt lớn hơn 600px, hình ảnh sẽ chiếm 25% chiều rộng khung nhìn; khi nằm trong khoảng từ 500px đến 600px, hình ảnh là 50% chiều rộng khung nhìn; và dưới 500px thì hình ảnh là chiều rộng đầy đủ.
Giúp hình ảnh sản phẩm có thể mở rộng
Khách hàng muốn xem những gì họ đang mua. Trên các trang web bán lẻ, người dùng mong muốn có thể xem ảnh cận cảnh với độ phân giải cao của sản phẩm để hiểu rõ hơn chi tiết và những người tham gia nghiên cứu đã cảm thấy khó chịu nếu không làm được.
Một ví dụ điển hình về hình ảnh có thể nhấn, có thể mở rộng là do J. Trang web của phi hành đoàn. Lớp phủ biến mất cho biết một hình ảnh có thể nhấn vào được, cung cấp hình ảnh được phóng to với các chi tiết nhỏ.
Các kỹ thuật hình ảnh khác
Hình ảnh nén
Kỹ thuật hình ảnh nén phân phát hình ảnh được nén với mức độ cao gấp 2 lần cho tất cả các thiết bị, bất kể chức năng thực tế của thiết bị. Tuỳ thuộc vào loại hình ảnh và mức độ nén, chất lượng hình ảnh có thể không thay đổi, nhưng kích thước tệp sẽ giảm đáng kể.
Thay thế hình ảnh JavaScript
Tính năng thay thế hình ảnh JavaScript sẽ kiểm tra các khả năng của thiết bị và "làm điều đúng đắn". Bạn có thể xác định tỷ lệ pixel của thiết bị qua window.devicePixelRatio, nhận thông tin về chiều rộng và chiều cao của màn hình, thậm chí có thể sử dụng navigator.connection hoặc đưa ra một yêu cầu giả mạo. Khi đã thu thập tất cả các thông tin này, bạn có thể quyết định hình ảnh nào cần tải.
Một hạn chế lớn của phương pháp này là việc sử dụng JavaScript đồng nghĩa với việc bạn sẽ trì hoãn việc tải hình ảnh cho đến khi ít nhất trình phân tích cú pháp xem trước đã hoàn tất. Điều này có nghĩa là hình ảnh thậm chí sẽ không bắt đầu tải xuống cho đến khi sự kiện pageload kích hoạt. Ngoài ra, trình duyệt rất có thể sẽ tải cả hình ảnh 1x và 2x xuống, dẫn đến việc tăng dung lượng trang.
Hình ảnh cùng dòng: đường quét và vectơ
Về cơ bản, có 2 cách khác nhau để tạo và lưu trữ hình ảnh và điều này ảnh hưởng đến cách bạn triển khai hình ảnh một cách thích ứng.
Hình ảnh đường quét – chẳng hạn như ảnh chụp và các hình ảnh khác, được biểu thị dưới dạng lưới gồm các chấm màu riêng lẻ. Hình ảnh đường quét có thể đến từ máy ảnh hoặc máy quét hoặc được tạo bằng phần tử canvas HTML. Các định dạng như PNG, JPEG và WebP được dùng để lưu trữ hình ảnh đường quét.
Ảnh vectơ như biểu trưng và hình vẽ đường nét được định nghĩa là một tập hợp các đường cong, đường kẻ, hình dạng, màu nền và độ dốc. Bạn có thể tạo ảnh vectơ bằng các chương trình như Adobe Illustrator hoặc Inkscape, hoặc viết tay bằng mã ở định dạng vectơ như SVG.
SVG
SVG giúp bạn có thể đưa đồ hoạ vectơ thích ứng vào một trang web. Ưu điểm của định dạng tệp vectơ so với định dạng tệp đường quét là trình duyệt có thể hiển thị hình ảnh vectơ ở bất kỳ kích thước nào. Định dạng vectơ mô tả hình dạng của hình ảnh – cách hình ảnh được tạo dựng từ các đường kẻ, đường cong và màu sắc, v.v. Mặt khác, các định dạng đường quét chỉ có thông tin về các dấu chấm màu riêng lẻ, vì vậy, trình duyệt phải đoán cách điền vào chỗ trống khi điều chỉnh theo tỷ lệ.
Dưới đây là hai phiên bản của cùng một hình ảnh: hình ảnh PNG ở bên trái và hình ảnh SVG ở bên phải. SVG trông đẹp ở mọi kích thước, trong khi tệp PNG bên cạnh nó bắt đầu bị mờ khi hiển thị có kích thước lớn hơn.
Nếu muốn giảm số lượng yêu cầu tệp mà trang thực hiện, bạn có thể mã hoá hình ảnh cùng dòng bằng cách sử dụng định dạng SVG hoặc URI dữ liệu. Nếu xem nguồn của trang này, bạn sẽ thấy cả hai biểu trưng bên dưới đều được khai báo cùng dòng: URI dữ liệu và SVG.
SVG có hỗ trợ tuyệt vời trên thiết bị di động và máy tính, đồng thời các công cụ tối ưu hoá có thể làm giảm đáng kể kích thước SVG. Hai biểu trưng SVG cùng dòng sau đây trông giống nhau, nhưng một biểu trưng có kích thước khoảng 3 KB và biểu trưng còn lại chỉ có kích thước 2KB:
URI dữ liệu
URI dữ liệu cho phép bạn đưa một tệp (chẳng hạn như một hình ảnh) vào cùng dòng bằng cách đặt src của phần tử img dưới dạng một chuỗi được mã hoá Base64 bằng cách sử dụng định dạng sau:
<img src="data:image/svg+xml;base64,[data]">
Phần đầu của mã cho biểu trưng HTML5 ở trên sẽ có dạng như sau:
<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiB
BZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW ...">
(Phiên bản đầy đủ dài hơn 5.000 ký tự!)
Công cụ kéo và thả (chẳng hạn như jpillora.com/base64-encoder) có sẵn để chuyển đổi các tệp nhị phân (chẳng hạn như hình ảnh) thành URI dữ liệu. Cũng giống như SVG, URI dữ liệu được hỗ trợ tốt trên trình duyệt cho thiết bị di động và máy tính.
Cùng dòng trong CSS
URI và SVG dữ liệu cũng có thể nằm cùng trong CSS – và điều này được hỗ trợ trên cả thiết bị di động và máy tính. Dưới đây là 2 hình ảnh giống hệt nhau được triển khai dưới dạng hình nền trong CSS; một URI dữ liệu, một SVG:
Ưu và nhược điểm của nội tuyến
Mã cùng dòng cho hình ảnh có thể chi tiết, đặc biệt là URI dữ liệu, vậy tại sao bạn nên sử dụng mã này? Để giảm số lượng yêu cầu HTTP! SVG và URI dữ liệu có thể cho phép truy xuất toàn bộ trang web, bao gồm hình ảnh, CSS và JavaScript bằng một yêu cầu duy nhất.
Nhược điểm:
- Trên thiết bị di động, URI dữ liệu hiển thị trên thiết bị di động chậm hơn đáng kể so với hình ảnh từ
srcbên ngoài. - URI dữ liệu có thể làm tăng đáng kể kích thước của một yêu cầu HTML.
- Chúng khiến mã đánh dấu và quy trình làm việc của bạn trở nên phức tạp hơn.
- Định dạng URI dữ liệu lớn hơn đáng kể so với tệp nhị phân (lên tới 30%) và do đó, không làm giảm tổng kích thước tải xuống.
- URI dữ liệu không thể lưu được vào bộ nhớ đệm, do đó bạn phải tải URI dữ liệu xuống mọi trang được dùng.
- Chúng không được hỗ trợ trong IE 6 và 7, hỗ trợ không đầy đủ trong IE8.
- Với HTTP/2, việc giảm số lượng yêu cầu thành phần sẽ không được ưu tiên nữa.
Tương tự như với mọi sản phẩm thích ứng, bạn cần kiểm tra xem quảng cáo nào hoạt động hiệu quả nhất. Sử dụng các công cụ cho nhà phát triển để đo lường kích thước tệp tải xuống, số lượng yêu cầu và tổng độ trễ. URI dữ liệu đôi khi có thể hữu ích đối với hình ảnh đường quét – ví dụ: trên trang chủ chỉ có một hoặc hai ảnh không được dùng ở nơi nào khác. Nếu bạn cần hình ảnh vectơ cùng dòng, thì SVG là một lựa chọn tốt hơn nhiều.
Hình ảnh trong CSS
Thuộc tính background của CSS là một công cụ mạnh mẽ để thêm hình ảnh phức tạp vào các phần tử, giúp bạn dễ dàng thêm nhiều hình ảnh và khiến chúng lặp lại, v.v. Khi được kết hợp với các truy vấn nội dung nghe nhìn, thuộc tính nền trở nên mạnh mẽ hơn nữa, cho phép tải hình ảnh có điều kiện dựa trên độ phân giải màn hình, kích thước khung nhìn và nhiều yếu tố khác.
Tóm tắt
- Hãy sử dụng hình ảnh phù hợp nhất cho các đặc điểm của màn hình, xem xét kích thước màn hình, độ phân giải của thiết bị và bố cục trang.
- Thay đổi thuộc tính
background-imagetrong CSS cho các màn hình có DPI cao bằng cách sử dụng các truy vấn nội dung đa phương tiện vớimin-resolutionvà-webkit-min-device-pixel-ratio. - Sử dụng srcset để cung cấp hình ảnh có độ phân giải cao ngoài hình ảnh 1x trong mã đánh dấu.
- Hãy cân nhắc chi phí hiệu suất khi sử dụng kỹ thuật thay thế hình ảnh JavaScript hoặc khi phân phát hình ảnh có độ phân giải cao được nén ở mức cao đến các thiết bị có độ phân giải thấp hơn.
Sử dụng các truy vấn phương tiện cho việc tải hình ảnh có điều kiện hoặc hướng nghệ thuật
Các truy vấn nội dung đa phương tiện không chỉ ảnh hưởng đến bố cục trang; bạn còn có thể sử dụng các truy vấn này để tải hình ảnh theo cách có điều kiện hoặc để cung cấp hướng nghệ thuật tuỳ thuộc vào chiều rộng khung nhìn.
Ví dụ: trong mẫu bên dưới, trên các màn hình nhỏ hơn, chỉ small.png được tải xuống và áp dụng cho nội dung div, còn trên màn hình lớn hơn, background-image: url(body.png) được áp dụng cho phần nội dung và background-image:
url(large.png) được áp dụng cho nội dung div.
.example {
height: 400px;
background-image: url(small.png);
background-repeat: no-repeat;
background-size: contain;
background-position-x: center;
}
@media (min-width: 500px) {
body {
background-image: url(body.png);
}
.example {
background-image: url(large.png);
}
}
Sử dụng tập hợp hình ảnh để cung cấp hình ảnh có độ phân giải cao
Hàm image-set() trong CSS giúp cải thiện thuộc tính background của hành vi,
giúp bạn dễ dàng cung cấp nhiều tệp hình ảnh cho các đặc điểm
khác nhau của thiết bị. Điều này cho phép trình duyệt chọn hình ảnh phù hợp nhất tuỳ theo đặc điểm của thiết bị, ví dụ: sử dụng hình ảnh 2x trên màn hình 2x hoặc hình ảnh 1x trên thiết bị 2x khi dùng mạng băng thông hạn chế.
background-image: image-set(
url(icon1x.jpg) 1x,
url(icon2x.jpg) 2x
);
Ngoài việc tải đúng hình ảnh, trình duyệt cũng điều chỉnh tỷ lệ hình ảnh theo tỷ lệ tương ứng. Nói cách khác, trình duyệt giả định rằng hình ảnh 2x sẽ có kích thước lớn gấp đôi so với hình ảnh 1x, và vì vậy, giảm tỷ lệ hình ảnh 2x theo hệ số 2 để hình ảnh có cùng kích thước trên trang.
Tính năng hỗ trợ cho image-set() vẫn còn mới và chỉ được hỗ trợ trong Chrome và
Safari có tiền tố nhà cung cấp -webkit. Hãy chú ý thêm hình ảnh dự phòng khi image-set() không được hỗ trợ; ví dụ:
.sample {
width: 128px;
height: 128px;
background-image: url(icon1x.png);
background-image: -webkit-image-set(
url(icon1x.png) 1x,
url(icon2x.png) 2x
);
background-image: image-set(
url(icon1x.png) 1x,
url(icon2x.png) 2x
);
}
Nội dung ở trên sẽ tải thành phần thích hợp trong các trình duyệt có hỗ trợ tập hợp hình ảnh; nếu không, thành phần này sẽ quay lại dùng thành phần 1x. Lưu ý rõ ràng là mặc dù hỗ trợ trình duyệt image-set() ở mức thấp, nhưng hầu hết các trình duyệt đều nhận được tài sản 1x.
Sử dụng các truy vấn phương tiện để cung cấp hình ảnh có độ phân giải cao hoặc định hướng nghệ thuật
Các truy vấn nội dung đa phương tiện có thể tạo các quy tắc dựa trên tỷ lệ pixel trên thiết bị, nhờ đó có thể chỉ định các hình ảnh khác nhau cho màn hình 2x và 1x.
@media (min-resolution: 2dppx),
(-webkit-min-device-pixel-ratio: 2)
{
/* High dpi styles & resources here */
}
Chrome, Firefox và Opera đều hỗ trợ (min-resolution: 2dppx) tiêu chuẩn, trong khi cả Safari và các trình duyệt Android đều yêu cầu cú pháp có tiền tố nhà cung cấp cũ hơn mà không có đơn vị dppx. Hãy nhớ rằng các kiểu này chỉ được tải nếu thiết bị khớp với truy vấn phương tiện và bạn phải chỉ định kiểu cho trường hợp cơ sở.
Điều này cũng mang lại lợi ích là đảm bảo nội dung nào đó được hiển thị nếu trình duyệt không hỗ trợ các truy vấn nội dung nghe nhìn cụ thể để giải quyết.
.sample {
width: 128px;
height: 128px;
background-image: url(icon1x.png);
}
@media (min-resolution: 2dppx), /* Standard syntax */
(-webkit-min-device-pixel-ratio: 2) /* Safari & Android Browser */
{
.sample {
background-size: contain;
background-image: url(icon2x.png);
}
}
Bạn cũng có thể sử dụng cú pháp chiều rộng tối thiểu để hiển thị hình ảnh thay thế tuỳ thuộc vào kích thước khung nhìn. Kỹ thuật này có ưu điểm là hình ảnh không được tải xuống nếu truy vấn phương tiện không khớp. Ví dụ: bg.png chỉ được tải xuống và áp dụng cho body nếu chiều rộng của trình duyệt từ 500px trở lên:
@media (min-width: 500px) {
body {
background-image: url(bg.png);
}
}
Dùng SVG cho biểu tượng
Khi thêm biểu tượng vào trang, hãy dùng biểu tượng SVG nếu có thể hoặc dùng các ký tự unicode trong một số trường hợp.
Tóm tắt
- Sử dụng SVG hoặc unicode cho biểu tượng thay vì hình ảnh đường quét.
Thay thế các biểu tượng đơn giản bằng unicode
Nhiều phông chữ hỗ trợ vô số ký tự unicode, có thể được dùng thay cho hình ảnh. Không giống như hình ảnh, phông chữ unicode có tỷ lệ đẹp và đẹp bất kể kích thước hiển thị nhỏ hay lớn trên màn hình.
Ngoài bộ ký tự thông thường, unicode có thể bao gồm các biểu tượng mũi tên (←), toán tử toán học ({/4}), hình dạng hình học (★), hình ảnh điều khiển (▶), ký hiệu âm nhạc (♬), chữ cái Hy Lạp (beta), thậm chí là quân cờ (♞).
Việc thêm một ký tự unicode được thực hiện theo cách tương tự như các thực thể có tên: &#XXXX, trong đó XXXX đại diện cho số ký tự unicode. Ví dụ:
You're a super ★
Bạn là một siêu ★
Thay thế các biểu tượng phức tạp bằng SVG
Đối với các yêu cầu phức tạp hơn về biểu tượng, biểu tượng SVG thường nhẹ, dễ sử dụng và có thể được tạo kiểu bằng CSS. SVG có một số ưu điểm so với hình ảnh đường quét:
- Chúng là các đồ hoạ vectơ có thể điều chỉnh được theo tỷ lệ vô hạn.
- Các hiệu ứng CSS như màu sắc, đổ bóng, độ trong suốt và ảnh động được thể hiện rõ ràng.
- Hình ảnh SVG có thể nằm ngay trong tài liệu.
- Đó là ngữ nghĩa.
- Chúng cung cấp khả năng hỗ trợ tiếp cận tốt hơn với các thuộc tính phù hợp.
With SVG icons, you can either add icons using inline SVG, like
this checkmark:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="32" height="32" viewBox="0 0 32 32">
<path d="M27 4l-15 15-7-7-5 5 12 12 20-20z" fill="#000000"></path>
</svg>
or by using an image tag, like this credit card icon:
<img src="credit.svg">.
Hãy thận trọng khi sử dụng phông chữ biểu tượng
Phông chữ biểu tượng rất phổ biến và có thể dễ sử dụng, nhưng có một số hạn chế so với biểu tượng SVG:
- Đây là các đồ hoạ vectơ có thể điều chỉnh tỷ lệ vô hạn, nhưng có thể bị khử răng cưa dẫn đến các biểu tượng không sắc nét như mong đợi.
- Giới hạn việc định kiểu bằng CSS.
- Việc xác định vị trí hoàn hảo cho pixel có thể khó khăn, tuỳ thuộc vào chiều cao dòng, khoảng cách chữ cái, v.v.
- Các chú giải này không có ngữ nghĩa và có thể khó sử dụng với trình đọc màn hình hoặc công nghệ hỗ trợ khác.
- Trừ phi được xác định phạm vi chính xác, các biểu tượng này có thể dẫn đến kích thước tệp lớn nếu chỉ sử dụng một tập hợp con biểu tượng nhỏ có sẵn.
With Font Awesome, you can either add icons by using a unicode
entity, like this HTML5 logo (<span class="awesome"></span>)
or by adding special classes to an <i> element like the CSS3
logo (<i class="fa fa-css3"></i>).
Hiện có hàng trăm phông chữ biểu tượng miễn phí và có tính phí, bao gồm Font Awesome, Pictos và Glyphicons.
Hãy nhớ cân bằng giữa kích thước tệp và yêu cầu HTTP bổ sung với nhu cầu sử dụng các biểu tượng. Ví dụ: nếu chỉ cần một vài biểu tượng, bạn nên sử dụng hình ảnh hoặc hình ảnh sprite.
Tối ưu hoá hình ảnh để tăng hiệu suất
Hình ảnh thường chiếm hầu hết các byte được tải xuống và cũng thường chiếm một lượng đáng kể không gian hình ảnh trên trang. Do đó, việc tối ưu hoá hình ảnh thường có thể mang lại một số cải thiện về hiệu suất và mức tiết kiệm byte lớn nhất cho trang web: trình duyệt phải tải xuống càng ít byte thì băng thông của ứng dụng càng ít cạnh tranh hơn và trình duyệt có thể tải xuống và hiển thị tất cả các thành phần càng nhanh.
Tóm tắt
- Đừng chỉ chọn ngẫu nhiên một định dạng hình ảnh mà hãy tìm hiểu các định dạng khác nhau có sẵn và sử dụng định dạng phù hợp nhất.
- Đưa các công cụ nén và tối ưu hoá hình ảnh vào quy trình làm việc để giảm kích thước tệp.
- Giảm số lượng yêu cầu http bằng cách đặt các hình ảnh thường dùng vào các nhóm hình ảnh.
- Để cải thiện thời gian tải trang ban đầu và giảm trọng lượng trang ban đầu, hãy cân nhắc chỉ tải hình ảnh sau khi người dùng di chuyển đến xem.
Chọn định dạng phù hợp
Có 2 loại hình ảnh cần xem xét: ảnh vectơ và hình ảnh đường quét.
Đối với hình ảnh đường quét, bạn cũng cần chọn định dạng nén phù hợp, ví dụ: GIF, PNG, JPG.
Hình ảnh đường quét, chẳng hạn như ảnh chụp và các hình ảnh khác, được biểu thị dưới dạng lưới gồm các chấm hoặc pixel riêng lẻ. Hình ảnh đường quét thường bắt nguồn từ máy ảnh hoặc trình quét, hoặc có thể được tạo trong trình duyệt bằng phần tử canvas. Khi kích thước hình ảnh ngày càng lớn, kích thước tệp cũng tăng theo. Khi được điều chỉnh theo tỷ lệ lớn hơn kích thước ban đầu, hình ảnh đường quét sẽ bị mờ vì trình duyệt cần đoán cách lấp đầy các pixel bị thiếu.
Ảnh vectơ, chẳng hạn như biểu trưng và nghệ thuật đường nét, được xác định bằng một tập hợp các đường cong, đường kẻ, hình dạng và màu nền. Ảnh vectơ được tạo bằng các chương trình như Adobe Illustrator hoặc Inkscape và được lưu ở định dạng vectơ như SVG. Do ảnh vectơ được tạo dựa trên
các dữ liệu gốc đơn giản, nên bạn có thể điều chỉnh ảnh theo tỷ lệ mà không làm giảm chất lượng hoặc
thay đổi về kích thước tệp.
Khi chọn định dạng phù hợp, điều quan trọng là bạn phải xem xét cả nguồn gốc của hình ảnh (đường quét hoặc vectơ) và nội dung (màu sắc, ảnh động, văn bản, v.v.). Không có định dạng nào phù hợp với mọi loại hình ảnh và mỗi loại đều có điểm mạnh và điểm yếu riêng.
Hãy bắt đầu với những nguyên tắc sau khi chọn định dạng phù hợp:
- Sử dụng
JPGcho ảnh chụp. - Sử dụng
SVGcho nghệ thuật vectơ và đồ hoạ màu đồng nhất, chẳng hạn như biểu trưng và nghệ thuật đường nét. Nếu không có nghệ thuật vectơ, hãy thửWebPhoặcPNG. - Hãy sử dụng
PNGthay vìGIFvì điều này cho phép nhiều màu sắc hơn và có tỷ lệ nén tốt hơn. - Đối với ảnh động dài hơn, hãy cân nhắc sử dụng
<video>vì cung cấp chất lượng hình ảnh tốt hơn và cho phép người dùng kiểm soát chế độ phát.
Giảm kích thước tệp
Bạn có thể giảm đáng kể kích thước tệp hình ảnh bằng cách "xử lý hậu kỳ" hình ảnh sau khi lưu. Có một số công cụ để nén hình ảnh: bóng và không mất dữ liệu, trực tuyến, GUI, dòng lệnh. Nếu có thể, tốt nhất bạn nên thử tự động hoá tính năng tối ưu hoá hình ảnh để tích hợp sẵn tính năng này vào quy trình làm việc.
Có một số công cụ có thể thực hiện thêm, nén không mất dữ liệu trên các tệp JPG
và PNG mà không ảnh hưởng đến chất lượng hình ảnh. Đối với JPG, hãy thử
jpegtran hoặc
jpegoptim (chỉ có trên Linux;
chạy bằng tuỳ chọn --strip-all). Đối với PNG, hãy thử dùng OptiPNG hoặc PNGOUT.
Sử dụng các nhóm hình ảnh
Kết hợp CSS là kỹ thuật mà trong đó một số hình ảnh được kết hợp thành một hình ảnh "trang tính sprite" duy nhất. Sau đó, bạn có thể sử dụng từng hình ảnh riêng lẻ bằng cách chỉ định hình nền cho một phần tử (bảng sprite) cộng với một độ lệch để hiển thị đúng phần.
.sprite-sheet {
background-image: url(sprite-sheet.png);
width: 40px;
height: 25px;
}
.google-logo {
width: 125px;
height: 45px;
background-position: -190px -170px;
}
.gmail {
background-position: -150px -210px;
}
.maps {
height: 40px;
background-position: -120px -165px;
}
Lợi ích của việc gộp nhóm là giảm số lượt tải xuống cần thiết để tải nhiều hình ảnh, trong khi vẫn cho phép lưu vào bộ nhớ đệm.
Cân nhắc dùng phương thức tải từng phần
Tính năng Tải từng phần có thể làm tăng tốc độ tải đáng kể trên các trang dài chứa nhiều hình ảnh dưới màn hình đầu tiên bằng cách tải những hình ảnh đó khi cần hoặc khi nội dung chính đã tải và hiển thị xong. Ngoài việc cải thiện hiệu suất, việc sử dụng tính năng tải từng phần có thể tạo ra trải nghiệm cuộn vô hạn.
Hãy cẩn thận khi tạo những trang có chức năng cuộn vô hạn vì nội dung được tải khi hiển thị nên các công cụ tìm kiếm có thể không bao giờ thấy nội dung đó. Ngoài ra, những người dùng tìm kiếm thông tin mà họ muốn thấy ở chân trang sẽ không bao giờ thấy chân trang vì nội dung mới luôn được tải.
Tránh hoàn toàn hình ảnh
Đôi khi hình ảnh đẹp nhất không thực sự là một hình ảnh. Bất cứ khi nào có thể, hãy sử dụng các tính năng gốc của trình duyệt để cung cấp chức năng tương tự hoặc tương tự. Các trình duyệt tạo ra hình ảnh mà trước đây đã yêu cầu hình ảnh. Điều này có nghĩa là các trình duyệt không cần tải các tệp hình ảnh riêng biệt xuống nữa, nhờ đó ngăn chặn tình trạng hình ảnh được điều chỉnh theo tỷ lệ một cách bất tiện. Bạn có thể sử dụng phông chữ Unicode hoặc phông chữ biểu tượng đặc biệt để kết xuất biểu tượng.
Đặt văn bản trong mã đánh dấu thay vì nhúng trong hình ảnh
Bất cứ khi nào có thể, văn bản nên là văn bản và không được nhúng vào hình ảnh. Ví dụ: việc sử dụng hình ảnh cho dòng tiêu đề hoặc đặt thông tin liên hệ (như số điện thoại hoặc địa chỉ) trực tiếp vào hình ảnh sẽ khiến người dùng không thể sao chép và dán thông tin. Điều này khiến trình đọc màn hình không truy cập được thông tin và không phản hồi lại. Thay vào đó, hãy đặt văn bản vào mã đánh dấu và nếu cần, hãy sử dụng phông chữ web để đạt được kiểu bạn cần.
Sử dụng CSS để thay thế hình ảnh
Các trình duyệt hiện đại có thể sử dụng các tính năng CSS để tạo kiểu mà trước đây cần có hình ảnh. Ví dụ: bạn có thể tạo màu chuyển tiếp phức tạp bằng thuộc tính background, tạo bóng bằng box-shadow và có thể thêm góc bo tròn bằng thuộc tính border-radius.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet augue eu magna scelerisque cổnga ut ut dolor. Nullam placerat egestas nisl sed sollicitudin. Fusce placerat, ipsum ac vestibulum cổnga, purus dolor mollis nunc, pharetra vehicula nulla nunc quis elit. Duis ornare fringilla dui non vehicula. In hac habitasse platea dictumst. Donec ipsum lectus, hendrerit malesuada sapien eget, venenatis tempus purus.
<style>
div#noImage {
color: white;
border-radius: 5px;
box-shadow: 5px 5px 4px 0 rgba(9,130,154,0.2);
background: linear-gradient(rgba(9, 130, 154, 1), rgba(9, 130, 154, 0.5));
}
</style>
Xin lưu ý rằng việc sử dụng các kỹ thuật này sẽ yêu cầu chu kỳ kết xuất. Đây có thể là chu kỳ quan trọng trên thiết bị di động. Nếu sử dụng quá mức này, bạn sẽ mất mọi lợi ích mà có thể bạn đã đạt được và có thể làm giảm hiệu suất.