Trang này được dịch bởi Cloud Translation API.

Hình ảnh thích ứng

Một hình ảnh đáng giá 1.000 từ và hình ảnh đóng vai trò không thể thiếu trong mỗi trang. Tuy nhiên, các tệp này cũng thường chiếm hầu hết số byte được tải xuống. Với thiết kế web đáp ứng không chỉ bố cục của chúng ta có thể thay đổi theo đặc điểm thiết bị mà còn dựa trên hình ảnh.

Pete LePage

Thiết kế web đáp ứng không chỉ có nghĩa là bố cục của chúng ta có thể thay đổi theo thiết bị đặc điểm nhưng nội dung cũng có thể thay đổi. Ví dụ: ở mức cao độ phân giải (2x), đồ hoạ có độ phân giải cao đảm bảo độ sắc nét. Một hình ảnh có chiều rộng 50% có thể chỉ 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 một chiếc điện thoại hẹp và đòi hỏi cùng một mức hao tổn băng thông khi thu nhỏ cho vừa với màn hình nhỏ hơn.

Chỉ đường nghệ thuật

Trong những trường hợp khác, bạn có thể cần phải thay đổi hình ảnh mạnh hơn: thay đổi tỷ lệ, cắt xén 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à hướng nghệ thuật. Xem responsiveimages.org/demos/ để tìm hiểu thêm ví dụ.

Hình ảnh thích ứng

Bạn có biết rằng hình ảnh chiếm trung bình hơn 60% byte cần thiết để 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 được nhiều kỹ năng và kỹ thuật để diễn ra suôn sẻ tích hợp hình ảnh thích ứng vào quy trình phát triển. Đến cuối trước tiên, bạn sẽ phát triển bằng những hình ảnh có khả năng điều chỉnh và thích ứng với kích thước khung nhìn và tình huống sử dụng khác nhau.

Đây là khoá học miễn phí do Udacity cung cấp

Tham gia khoá học

Hình ảnh được đánh dấu

Phần tử img rất mạnh mẽ, có thể tải xuống, giải mã và kết xuất và các trình duyệt hiện đại hỗ trợ nhiều định dạng hình ảnh. Bao gồm các hình ảnh hoạt động trên các thiết bị không khác với trên máy tính và chỉ cần một vài chỉnh sửa 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 tình trạng hình ảnh vô tình bị tràn vùng chứa.
Sử dụng phần tử picture khi bạn muốn chỉ định các hình ảnh khác nhau, tuỳ thuộc vào về đặc điểm thiết bị (còn gọi là hướng nghệ thuật).
Sử dụng srcset và chỉ số mô tả x trong phần tử img để đưa ra gợi ý cho trình duyệt về hình ảnh tốt nhất để sử dụng khi chọn từ 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 sử dụng ở nơi khác trang web của bạn, hãy cân nhắc sử dụng hình ảnh cùng dòng để giảm yêu cầu tệp.

Sử dụng kích thước tương đối cho hình ảnh

Hãy nhớ sử dụng đơn vị tương đối khi chỉ định chiều rộng cho hình ảnh để ngăn chặn chúng do vô tình tràn khung nhìn. Ví dụ: nguyên nhân width: 50%; chiều rộng hình ảnh bằng 50% phần tử vùng chứa (không phải 50% khung nhìn hoặc 50% kích thước pixel thực tế).

Vì CSS cho phép nội dung tràn vùng chứa, nên bạn có thể cần phải sử dụng hàm tối đa chiều rộng: 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 img các phần tử; những điều này giúp làm cho trang web của bạn dễ truy cập hơn bằng cách cung cấp bối cảnh cho màn hình trình đọc 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 hành vi của Phần tử img, giúp bạn dễ dàng cung cấp nhiều tệp hình ảnh cho các đặc điểm thiết bị khác nhau. Tương tự như image-set Hàm CSS là nguồn gốc của CSS, srcset cho phép trình duyệt chọn hình ảnh tùy thuộc vào đặ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, hình ảnh 1x sẽ một thiết bị gấp 2 lần khi sử 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 chế độ mặc định tệp hình ảnh do thuộc tính src xác định. Đây là lý do tại sao bạn cần phải luôn bao gồm ảnh 1x có thể được hiển thị trên mọi thiết bị, bất kể các chức năng khác nhau. Khi srcset được hỗ trợ, danh sách được phân tách bằng dấu phẩy hình ảnh/điều kiện được phân tích cú pháp trước khi đưa ra yêu cầu và chỉ hình ảnh thích hợp đượ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ứ từ mật độ pixel đến chiều rộng và hiện nay, chỉ có mật độ pixel là được hỗ trợ tốt. Để cân bằng hiện tại với các tính năng trong tương lai, chỉ cần cung cấp hình ảnh gấp đôi 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 thiết bị, còn được gọi là nghệ thuật hướng, sử dụng phần tử picture. Chiến lược phát hành đĩa đơn Phần tử picture xác định một giải pháp khai báo cho cung cấp nhiều phiên bản của một hình ảnh dựa trên các các đặc điểm, chẳng hạn như kích thước thiết bị, độ phân giải, hướng của thiết bị và nhiều lợi ích khác.

Lưu ý: Phần tử picture đang bắt đầu chuyển đến trình duyệt. Mặc dù tính năng này chưa có trên một số trình duyệt, nhưng bạn nên sử dụng công cụ này do khả năng tương thích ngược mạnh mẽ và khả năng sử dụng nhựa polyfill của hình ảnh. Hãy truy cập trang web ResponsiveImages.org để biết thêm thông tin chi tiết.

Sử dụng phần tử picture khi nguồn hình ảnh tồn tại ở nhiều mật độ hoặc khi thiết kế thích ứng đưa ra hình ảnh hơi khác trên một số loại màn hình. Tương tự như Phần tử video, nhiều phần tử source có thể bao gồm, giúp bạn có thể chỉ định các tệp hình ảnh khác nhau tuỳ thuộc vào truy vấn phương tiệ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>

Thử nào

Trong ví dụ trên, nếu chiều rộng của trình duyệt tối thiểu là 800px thì head.jpg hoặc head-2x.jpg được sử dụng, tuỳ thuộc vào độ phân giải của thiết bị. Nếu trình duyệt từ 450px đến 800px, sau đó 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ị. Cho chiều rộng màn hình nhỏ hơn 450 px và có khả năng tương thích ngược khi không có phần tử picture được hỗ trợ, thì trình duyệt sẽ hiển thị phần tử img và phải luôn bao gồm.

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, bạn có thể gặp khó khăn trong việc chỉ định bộ mô tả mật độ cho nguồn hình ảnh. Điều này đặc biệt đúng đối với 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 mỗi hình ảnh được cung cấp bằng cách thêm phần 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 toán mức độ hiệu quả mật độ pixel 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">

Thử nào

Ví dụ ở trên hiển thị một hình ảnh có chiều rộng bằng một nửa chiều rộng của khung nhìn (sizes="50vw") và tuỳ thuộc vào chiều rộng của trình duyệt cũng như pixel của thiết bị tỷ lệ hình ảnh, cho phép trình duyệt chọn đúng hình ảnh bất kể kích thước cửa sổ trình duyệt sẽ xuất hiện. Ví dụ: bảng bên dưới cho biết hình ảnh nào 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 được sử dụng	Giải pháp hiệu quả
400px	1	`200.jpg`	1x
400px	2	`400.jpg`	2x
320px	2	`400.jpg`	2,5x
600px	2	`800.jpg`	2,67 lần
640px	3	`1000.jpg`	3,125x
1.100 px	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 bố cục của trang web điểm ngắt. 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, còn trên màn hình lớn hơn, khung nhìn chỉ chiếm 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">

Thử nào

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 của trình duyệt lớn hơn 600 px, hình ảnh chiếm 25% chiều rộng của khung nhìn; khi ảnh nằm trong khoảng từ 500 px và 600px, hình ảnh chiếm 50% chiều rộng của khung nhìn; và dưới 500 px, có chiều rộng tối đa.

Đặt hình ảnh sản phẩm có thể mở rộng

J. Trang web của phi hành đoàn có hình ảnh sản phẩm có thể mở rộng — Th6 Trang web của phi hành đoàn với hình ảnh sản phẩm có thể mở rộng.

Khách hàng muốn xem sản phẩm 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 có độ phân giải cao của các sản phẩm để có cái nhìn rõ hơn chi tiết và người tham gia nghiên cứu cảm thấy thất vọng nếu không thể.

Một ví dụ điển hình về hình ảnh có thể nhấn, mở rộng được là mẫu J. Trang web của nhóm. Lớp phủ biến mất cho biết hình ảnh có thể nhấn vào, cung cấp chế độ phóng to trong hình ảnh với các chi tiết rõ ràng.

Các kỹ thuật tạo hình ảnh khác

Hình ảnh nén

Chiến lược phát hành đĩa đơn kỹ thuật nén ảnh phân phối hình ảnh được nén ở mức độ cao gấp 2 lần cho tất cả các thiết bị, bất kể hình ảnh thực tế khả năng của thiết bị. Tuỳ thuộc vào loại hình ảnh và cấp độ nén, chất lượng ảnh có vẻ như không thay đổi nhưng kích thước tệp sẽ giảm đáng kể.

Thử nào

Thay thế hình ảnh JavaScript

Thay thế hình ảnh JavaScript sẽ kiểm tra các chức năng của thiết bị và "thực hiện điều đúng đắn". Bạn có thể xác định tỷ lệ pixel của thiết bị thông qua window.devicePixelRatio thân mến, hãy xem thông tin về chiều rộng và chiều cao màn hình, thậm chí có thể phân tích kết nối mạng nào đó qua navigator.connection hoặc gửi thông báo giả của bạn. Khi đã thu thập xong tất cả thông tin này, bạn có thể quyết định hình ảnh cần tải.

Một nhược điểm lớn của phương pháp này là nếu sử dụng JavaScript thì bạn sẽ trì hoãn quá trình tải hình ảnh cho đến khi ít nhất trình phân tích cú pháp nhìn trước hoàn tất. Chiến dịch này có nghĩa là hình ảnh sẽ không bắt đầu tải xuống cho đến sau sự kiện pageload hoả hoạn. Ngoài ra, trình duyệt rất có thể sẽ tải xuống cả phiên bản 1x và 2x hình ảnh, từ đó làm tăng quy mô trang.

Hình ảnh cùng dòng: đường quét và vectơ

Có hai cách về cơ bản để tạo và lưu trữ hình ảnh là đ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 thể hiện dưới dạng một lưới gồm các chấm màu riêng lẻ. Có thể xuất hiện hình ảnh đường quét từ máy ảnh hay máy quét hoặc được tạo bằng phần tử canvas HTML. Định dạng như PNG, JPEG và WebP được dùng để lưu trữ hình ảnh đường quét.

Hình ảnh vectơ như biểu trưng và nghệ thuật vẽ đường nét được định nghĩa là một tập hợp đường cong, đường kẻ, hình dạng, màu nền và độ dốc. 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 đưa đồ hoạ vectơ thích ứng vào một trang web. Chiến lược phát hành đĩa đơn ưu điểm của các định dạng tệp vectơ so với các định dạng tệp đường quét là trình duyệt có thể kết xuất hình ảnh vectơ ở bất kỳ kích thước nào. Định dạng vectơ mô tả hình học của hình ảnh – cách biểu tượng được xây 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ề từng dấu chấm riêng lẻ khiến trình duyệt phải đoán cách lấp đầy các chỗ trống khi chuyển 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à một SVG ở trên ở bên phải. SVG trông tuyệt vời ở mọi kích thước, trong khi PNG bên cạnh bắt đầu bị mờ ở kích thước màn hình lớn hơn.

Nếu muốn giảm số lượng yêu cầu tệp mà trang của bạn thực hiện, bạn có thể viết mã 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 bạn 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 để bàn, và công cụ tối ưu hoá sẽ làm giảm đáng kể kích thước SVG. Hai biểu trưng SVG cùng dòng sau đây sẽ hiển thị giống hệt nhau, nhưng một nhãn khoảng 3KB và cái còn lại chỉ 2KB:

URI dữ liệu

URI dữ liệu cho phép bạn thêm một tệp (chẳng hạn như hình ảnh) cùng dòng bằng cách đặt src của một phần tử img dưới dạng 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ự!)

Kéo "n" công cụ thả xuống như jpillora.com/base64-encoder là để chuyển đổi các tệp nhị phân, chẳng hạn như hình ảnh, thành URI dữ liệu. Giống như SVG, URI dữ liệu được hỗ trợ tốt trên thiết bị di động và trình duyệt dành cho máy tính.

Cùng dòng trong CSS

URI dữ liệu và SVG cũng có thể nằm 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à hai 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 và một SVG:

Ưu đãi và sản phẩm cùng dòng nhược điểm

Mã cùng dòng cho hình ảnh có thể chi tiết (đặc biệt là các URI dữ liệu), vậy tại sao bạn có muốn dùng tài khoản đó không? Để giảm số lượng yêu cầu HTTP! SVG và URI dữ liệu có thể bật toàn bộ trang web, bao gồm cả hình ảnh, CSS và JavaScript, cần được truy xuất cù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 có thể chậm hơn đáng kể để hiển thị trên thiết bị di động so với hình ảnh từ src bê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.
Việc này 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 định dạng nhị phân (tối đa 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 vào bộ nhớ đệm, vì vậy, bạn phải tải URI dữ liệu xuống cho từng trang đang sử dụng URI đó.
Chúng không được hỗ trợ trong IE 6 và 7, hỗ trợ chưa hoàn chỉnh trong IE8.
Với HTTP/2, việc giảm số lượng yêu cầu thành phần sẽ ít được ưu tiên hơn.

Giống như với mọi tính năng phản hồi, bạn cần kiểm tra xem thông tin nào hoạt động hiệu quả nhất. Sử dụng nhà phát triển các công cụ đo lường kích thước tệp tải xuống, số lượng yêu cầu và tổng số độ trễ. URI dữ liệu đôi khi có thể hữu ích cho hình ảnh đường quét, ví dụ: trên trang chủ chỉ có một hoặc hai ảnh không được sử dụng ở nơi nào khác. Nếu bạn cần chèn hình ảnh vectơ vào cùng dòng, thì SVG là lựa chọn tốt hơn nhiều.

Hình ảnh trong CSS

Thuộc tính CSS background là một công cụ mạnh mẽ để thêm các hình ảnh phức tạp vào các phần tử, giúp dễ dàng thêm nhiều hình ảnh và khiến chúng lặp lại, và nhiều lợi ích khác. Khi được kết hợp với các truy vấn phương tiện, thuộc tính nền sẽ trở thành mạnh mẽ hơn nữa, cho phép tải hình ảnh có điều kiện dựa trên màn hình độ phân giải, kích thước khung nhìn, v.v.

Tóm tắt

Sử dụng hình ảnh tốt nhất cho đặc điểm của màn hình, cân nhắc màn hình kích thước, độ phân giải thiết bị và bố cục trang.
Thay đổi thuộc tính background-image trong CSS để hiển thị DPI cao bằng cách sử dụng truy vấn đa phương tiện bằng min-resolution và -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.
Xem xét chi phí hiệu suất khi sử dụng tính năng thay thế hình ảnh JavaScript hoặc khi phân phối hình ảnh được nén với độ phân giải cao đến thiết bị có độ phân giải thấp hơn.

Sử dụng các truy vấn nội dung nghe nhìn để tải hình ảnh có điều kiện hoặc hướng ảnh

Truy vấn đa phương tiện không chỉ ảnh hưởng đến bố cục trang; bạn cũng có thể dùng chúng để tải hình ảnh có điều kiện hoặc cung cấp chỉ dẫn nghệ thuật tuỳ thuộc vào khung nhìn chiều rộng.

Ví dụ: trong mẫu bên dưới, trên các màn hình nhỏ hơn, chỉ small.png là đượ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);
  }
}

Thử nào

Sử dụng tính năng nhóm 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 hành vi, giúp bạn dễ dàng cung cấp nhiều tệp hình ảnh cho các thiết bị khác nhau đặc điểm. Thao tác này cho phép trình duyệt chọn hình ảnh tốt 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, hoặc hình ảnh 1x trên thiết bị 2x khi ở trên 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 hình ảnh chính xác, trình duyệt cũng điều chỉnh tỷ lệ hình ảnh cho phù hợp. Nói cách khác, trình duyệt giả định rằng hình ảnh 2x có kích thước gấp đôi lớn gấp 1 lần hình ảnh, nên sẽ thu nhỏ hình ảnh 2x xuống theo hệ số 2, vì vậy hình ảnh dường như có cùng kích thước trên trang.

image-set() vẫn còn mới và chỉ được hỗ trợ trong Chrome cũng như Safari với tiền tố nhà cung cấp -webkit. Hãy chú ý đưa vào 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
  );
}

Thử nào

Phần trên tải nội dung phù hợp trong các trình duyệt hỗ trợ image-set; nếu không, nó sẽ trở lại thành phần 1x. Lưu ý rõ ràng là khi Trình duyệt image-set() hỗ trợ ở mức thấp, hầu hết các trình duyệt đều nhận được thành phần gấp 1.

Dùng truy vấn nội dung đa phương tiện để cung cấp hình ảnh hoặc hướng nghệ thuật có độ phân giải cao

Truy vấn phương tiện có thể tạo quy tắc dựa trên tỷ lệ pixel của thiết bị, giúp 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ả trình duyệt Safari và Android đều yêu cầu nhà cung cấp cũ hơn có tiền tố 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 đa 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 đó sẽ được hiển thị nếu trình duyệt không hỗ trợ các truy vấn phương tiện theo độ phân giải cụ thể.

.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);
  }
}

Thử nào

Bạn cũng có thể sử dụng cú pháp có 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 phù hợ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 là 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 trong một số trường hợp trường hợp, ký tự unicode.

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 sử dụng thay vì hình ảnh. Không giống như hình ảnh, phông chữ unicode có tỷ lệ tốt và trông đẹp, không bất kể kích thước của hình ảnh đó nhỏ hay lớn như thế nào trên màn hình.

Ngoài bộ ký tự bình thường, Unicode có thể bao gồm các ký hiệu cho mũi tên (←), toán tử toán học (cos), hình dạng hình học (★), điều khiển hình ảnh (▶), ký hiệu nhạc (♬), ký tự Hy Lạp (Ω), thậm chí cả 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 là: &#XXXX, trong đó XXXX là số ký tự Unicode. Ví dụ:

You're a super &#9733;

Bạn thật xuất sắc ★

Thay thế các biểu tượng phức tạp bằng SVG

Đối với những yêu cầu phức tạp hơn về biểu tượng, biểu tượng SVG thường có kích thước nhẹ, dễ sử dụng và có thể 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à đồ hoạ vectơ có thể được điều chỉnh theo tỷ lệ vô hạn.
Các hiệu ứng CSS như màu sắc, đổ bóng, trong suốt và hoạt ảnh đang đơn giản.
Hình ảnh SVG có thể được xếp nội tuyến ngay trong tài liệu.
Chúng mang tính ngữ nghĩa.
Chúng giúp người dùng dễ tiếp cận 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">.

Thử nào

Hãy thận trọng khi sử dụng phông chữ cho biểu tượng

Ví dụ về một trang sử dụng FontAwesome cho các biểu tượng phông chữ.

Phông chữ biểu tượng phổ biến và có thể dễ sử dụng nhưng có một số hạn chế so với các biểu tượng SVG:

Đó là những đồ hoạ vectơ có thể mở rộng vô hạn, nhưng khử răng cưa khiến các biểu tượng không được sắc nét như mong đợi.
Giới hạn định kiểu bằng CSS.
Việc định vị pixel hoàn hảo có thể khó khăn, tuỳ thuộc vào chiều cao của dòng, giãn cách chữ cái, v.v.
Chúng 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 phù hợp, chúng có thể dẫn đến kích thước tệp lớn khi chỉ sử dụng một số biểu tượng hiện có.

With Font Awesome, you can either add icons by using a unicode
entity, like this HTML5 logo (<span class="awesome">&#xf13b;</span>)
or by adding special classes to an &lt;i&gt; element like the CSS3
logo (<i class="fa fa-css3"></i>).

Thử nào

Hiện có hàng trăm phông chữ biểu tượng miễn phí và trả phí, bao gồm cả Phông chữ Tuyệt vời! Hình ảnh và Glyphicons.

Hãy nhớ cân bằng trọng số của yêu cầu HTTP bổ sung và kích thước tệp với nhu cầu về các biểu tượng. Ví dụ: nếu bạn chỉ cần một vài biểu tượng, có thể tốt hơn là sử dụng hình ảnh hoặc nhóm hình ảnh.

Tối ưu hoá hình ảnh để nâng cao hiệu suất

Hình ảnh thường chiếm hầu hết byte được tải xuống và cũng thường chiếm một lượng không gian trực quan đáng kể trên trang. Nhờ đó, việc tối ưu hoá hình ảnh thường có thể mang lại hiệu suất và tiết kiệm byte lớn nhất những cải tiến cho trang web của bạn: trình duyệt phải tải càng ít byte, băng thông của khách hàng càng ít cạnh tranh và trình duyệt có thể tải xuống và hiển thị tất cả nội dung.

Tóm tắt

Đừng chỉ chọn một định dạng hình ảnh ngẫu nhiên—hãy tìm hiểu các định dạng có sẵn và sử dụng định dạng phù hợp nhất.
Đưa các công cụ tối ưu hoá và nén 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 hình ảnh được sử dụng thường xuyên vào sprite hình ảnh.
Để cải thiện thời gian tải trang ban đầu và giảm trọng số trang ban đầu, hãy cân nhắc chỉ tải hình ảnh sau khi người dùng cuộn vào chế độ xem.

Chọn định dạng phù hợp

Có hai loại hình ảnh cần cân nhắc: hình ả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, như ảnh chụp và các hình ảnh khác, được biểu thị dưới dạng lưới điểm ảnh hoặc pixel riêng lẻ. Hình ảnh đường quét thường đế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. Là kích thước hình ảnh sẽ lớn hơn, kích thước tệp cũng tăng lên. 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 bị mờ vì trình duyệt cần phải đoán cách điền các pixel còn thiếu.

Hình ảnh vectơ, chẳng hạn như biểu trưng và nghệ thuật vẽ đường, đượ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 vào định dạng vectơ như SVG. Vì hình ảnh vectơ được xây dựng dựa trên dữ liệu gốc đơn giản, chúng có thể được điều chỉ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à phải cân nhắc cả nguồn gốc của hình ảnh (đường quét hoặc vectơ) và nội dung (màu sắc, hoạt ảnh, văn bản, v.v.). Không có định dạng nào phù hợp với tất cả các loại hình ảnh và mỗi định dạng đều có những thế mạnh riêng và điểm yếu.

Bắt đầu từ những nguyên tắc sau khi chọn định dạng thích hợp:

Sử dụng JPG cho ảnh chụp.
Sử dụng SVG cho nghệ thuật vectơ và đồ hoạ màu đồng nhất như biểu trưng và nghệ thuật đường nét. Nếu không có hình minh hoạ vectơ, hãy thử WebP hoặc PNG.
Hãy sử dụng PNG thay vì GIF vì chế độ này cho phép có nhiều màu hơn và cung cấp chất lượng tốt hơn tỷ lệ nén.
Đối với ảnh động dài hơn, hãy cân nhắc sử dụng <video>, giúp cung cấp hình ảnh tốt hơn chất lượng cao và cho phép người dùng kiểm soát quá trình 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 "hậu xử lý" hình ảnh sau khi lưu. Có một số công cụ để nén ảnh như dạng bị mất và không tổn hao, trực tuyến, GUI, dòng lệnh. Nếu có thể, tốt nhất bạn nên thử tự động tối ưu hoá hình ảnh để đây là tính năng tích hợp sẵn cho quy trình làm việc.

Một số công cụ có sẵn để thực hiện nén hơn nữa, không mất dữ liệu trên JPG và PNG mà không ảnh hưởng đến chất lượng ảnh. Đối với JPG, hãy thử jpegtran hoặc jpegoptim (chỉ có trên Linux; chạy với tuỳ chọn --strip-all). Đối với PNG, hãy thử OptiPNG hoặc PNG.

Dùng hình ảnh sprit

Kết hợp CSS là kỹ thuật kết hợp một số hình ảnh thành một "bảng sprite" hình ảnh. Sau đó, bạn có thể sử dụng các 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 vị trí bù để hiển thị phần chính xác.

.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;
}

Thử nào

Phương pháp gộp nhóm có lợi thế là giảm số lượt tải xuống cần thiết để tải nhiều hình ảnh mà vẫn cho phép lưu vào bộ nhớ đệm.

Cân nhắc tải từng phần

Tính năng tải từng phần có thể tăng tốc đáng kể tốc độ tải trên những trang dài bao gồm nhiều các hình ảnh dưới màn hình đầu tiên bằng cách tải chúng khi cần hoặc khi nội dung đã tải và hiển thị xong. Ngoài hiệu suất nên việc sử dụng tính năng tải từng phần có thể mang lại trải nghiệm cuộn vô hạn.

Hãy cẩn thận khi tạo các trang có chức năng cuộn vô hạn—vì nội dung được tải dưới dạng nội dung đó sẽ hiển thị, 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 đang tìm kiếm thông tin họ muốn xem ở chân trang, không bao giờ thấy chân trang vì nội dung mới luôn được tải.

Tránh sử dụng hình ảnh hoàn toàn

Đôi khi, hình ảnh tốt nhất chưa hẳn là một hình ảnh. Bất cứ khi nào có thể, hãy sử dụng các khả năng riêng của trình duyệt để cung cấp các chức năng tương tự của Google. Trình duyệt tạo hình ảnh mà trước đây yêu cầu hình ảnh. Điều này có nghĩa là trình duyệt không cần phải tải các tệp riêng biệt xuống , do đó ngăn chặn hình ảnh bị thay đổi kích thước. Bạn có thể dùng Unicode hoặc đặc biệt phông chữ biểu tượng để hiển thị biểu tượng.

Đặt văn bản vào thẻ đánh dấu thay vì nhúng trong hình ảnh

Bất cứ khi nào có thể, văn bản phải là văn bản và không được nhúng vào hình ảnh. Cho ví dụ: sử dụng hình ảnh làm tiêu đề hoặc đặt thông tin liên hệ, chẳng hạn như số điện thoại hoặc địa chỉ—trực tiếp vào hình ảnh và ngăn người dùng sao chép và dán thông tin; làm cho thông tin không thể truy cập được trình đọc màn hình và không phản hồ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 để có đượ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 hình ảnh bắt buộc. Ví dụ: bạn có thể tạo các dải chuyển màu phức tạp bằng cách sử dụng Thuộc tính background, bóng có thể được tạo bằng box-shadow và bo tròn góc có thể được thêm với thuộc tính border-radius.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ngồi amet augue eu magna scelerisque Porta ut ut dolor. Nullam placerat egestas nisl sed sollicitudin. Fusce placerat, ipsum ac vestibulum Porta, purus dolor mollis nunc, pharetra vehicula nulla nunc quis elit. Khăn 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>

Lưu ý rằng việc sử dụng các kỹ thuật này đòi hỏi phải có chu kỳ kết xuất có thể đạt được đáng kể 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 đã đạt được và có thể cản trở hiệu suất.

Hình ảnh thích ứng

Chỉ đường nghệ thuật

Hình ảnh thích ứng

Hình ảnh được đánh dấu

Tóm tắt

Sử dụng kích thước tương đối cho hình ảnh

Cải thiện img bằng srcset cho các thiết bị có DPI cao

Hướng nghệ thuật trong hình ảnh thích ứng bằng picture

Hình ảnh có kích thước tương đối

Tính đến các điểm ngắt trong hình ảnh thích ứng

Đặt hình ảnh sản phẩm có thể mở rộng

Các kỹ thuật tạo hình ảnh khác

Hình ảnh nén

Thay thế hình ảnh JavaScript

Hình ảnh cùng dòng: đường quét và vectơ

SVG

URI dữ liệu

Cùng dòng trong CSS

Ưu đãi và sản phẩm cùng dòng nhược điểm

Hình ảnh trong CSS

Tóm tắt

Sử dụng các truy vấn nội dung nghe nhìn để tải hình ảnh có điều kiện hoặc hướng ảnh

Sử dụng tính năng nhóm hình ảnh để cung cấp hình ảnh có độ phân giải cao

Dùng truy vấn nội dung đa phương tiện để cung cấp hình ảnh hoặc hướng nghệ thuật có độ phân giải cao

Dùng SVG cho biểu tượng

Tóm tắt

Thay thế các biểu tượng đơn giản bằng unicode

Thay thế các biểu tượng phức tạp bằng SVG

Hãy thận trọng khi sử dụng phông chữ cho biểu tượng

Tối ưu hoá hình ảnh để nâng cao hiệu suất

Tóm tắt

Chọn định dạng phù hợp

Giảm kích thước tệp

Dùng hình ảnh sprit

Cân nhắc tải từng phần

Tránh sử dụng hình ảnh hoàn toàn

Đặt văn bản vào thẻ đánh dấu thay vì nhúng trong hình ảnh

Sử dụng CSS để thay thế hình ảnh

Cải thiện `img` bằng `srcset` cho các thiết bị có DPI cao

Hướng nghệ thuật trong hình ảnh thích ứng bằng `picture`