Google sử dụng công nghệ AI để dịch nội dung sang ngôn ngữ bạn ưu tiên. Bản dịch bằng AI có thể có lỗi.

Hình ảnh thích ứng

Một bức ảnh có giá trị bằng cả ngàn lời nói 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 phần lớn số byte đã tải xuống. Với thiết kế web đáp ứng, không chỉ bố cục mà cả hình ảnh cũng có thể thay đổi dựa trên đặc điểm của thiết bị.

Pete LePage

Thiết kế web đáp ứng không chỉ giúp bố cục thay đổi dựa trên đặc điểm của thiết bị mà còn giúp nội dung thay đổi theo. Ví dụ: trên màn hình có độ phân giải cao (2x), đồ hoạ có độ phân giải cao sẽ đả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 lại chiếm quá nhiều không gian trên điện thoại hẹp và cần 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ỉ đạo nghệ thuật

Trong những trường hợp khác, hình ảnh có thể cần được thay đổi đáng kể 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ỉ đạo nghệ thuật. Hãy xem responsiveimages.org/demos/ để biết 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% số 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 làm việc với hình ảnh trên web hiện đại để hình ảnh của bạn trông đẹp mắt và tải nhanh trên mọi thiết bị.

Trong quá trình này, bạn sẽ học được nhiều 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, bạn sẽ phát triển hình ảnh thích ứng và phản hồi với các 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í được cung cấp thông qua Udacity

Tham gia khoá học

Hình ảnh trong mã đánh dấu

Phần tử img rất mạnh mẽ – phần tử này tải xuống, giải mã và kết xuất nội dung, đồng thời các trình duyệt hiện đại hỗ trợ nhiều định dạng hình ảnh. Việc thêm hình ảnh hoạt động trên nhiều thiết bị cũng không khác gì so với máy tính và chỉ cần một vài điều 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 ra ngoài 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 đặc điểm của thiết bị (hay 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 để gợi ý cho trình duyệt về hình ảnh phù hợp nhất để sử dụng khi chọn trong số nhiều mật độ.
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 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ố lượng 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 để tránh vô tình làm tràn khung nhìn. Ví dụ: width: 50%; khiến chiều rộng hình ảnh bằng 50% phần tử 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 ra ngoài vùng chứa, nên bạn có thể cần sử dụng max-width: 100% để ngăn hình ảnh và nội dung khác tràn ra ngoài. 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 nội dung này giúp trang web của bạn dễ tiếp cận hơn bằng cách cung cấp bối 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 nâng cao 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 gốc của 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 đ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 trên thiết bị 2x khi ở trên mạng có 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ỉ cần 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 bạn luôn phải thêm hình ảnh 1x có thể hiển thị trên mọi thiết bị, bất kể khả năng của thiết bị. 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 đưa ra bất kỳ yêu cầu nào 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ứ, từ mật độ pixel đến chiều rộng và chiều cao, nhưng hiện chỉ có mật độ pixel được hỗ trợ đầy đủ. Để cân bằng hành vi hiện tại với các tính năng trong tương lai, bạn chỉ cần cung cấp hình ảnh 2x trong thuộc tính.

Chỉ đạo 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 của một hình ảnh dựa trên các đặc điểm khác nhau, chẳng hạn như kích thước thiết bị, độ phân giải thiết bị, hướng và nhiều đặc điểm khác.

Lưu ý: Phần tử picture đang bắt đầu xuất hiện trong các trình duyệt. Mặc dù chưa có trong mọi trình duyệt, nhưng bạn nên sử dụng phần tử này vì khả năng tương thích ngược mạnh mẽ và khả năng sử dụng Picturefill polyfill. Hãy xem 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ế đáp ứng yêu cầu hình ảnh có phần khác biệt trên một số loại màn hình. Tương tự như phần tử video, bạn có thể thêm nhiều phần tử source, 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 đa 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 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 có kích thước từ 450px đến 800px, thì head-small.jpg hoặc head-small- 2x.jpg sẽ được sử dụng, 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 nhỏ hơn 450px và khả năng tương thích ngược khi phần tử picture không được hỗ trợ, trình duyệt sẽ hiển thị phần tử img và phần tử này phải luôn được đưa vào.

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

Khi không biết kích thước cuối cùng của hình ảnh, bạn có thể gặp khó khăn khi chỉ định một 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 một 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 toán mật độ pixel hiệu quả và chọn hình ảnh phù hợp 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 khung nhìn (sizes="50vw") và tuỳ thuộc vào chiều rộng của trình duyệt cũng như 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 như thế nào. Ví dụ: bảng dưới đây cho biết hình ảnh mà trình duyệt sẽ chọn:

Chiều rộng trình duyệt	Tỷ lệ pixel của thiết bị	Hình ảnh được sử dụng	Độ phân giải hiệu quả
400px	1	`200.jpg`	1x
400px	2	`400.jpg`	2x
320px	2	`400.jpg`	2,5x
600px	2	`800.jpg`	2,67x
640px	3	`1000.jpg`	3,125x
1100px	1	`800.png`	1,45x

Xem xét 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 đ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 kéo dài toàn bộ chiều rộng của khung nhìn, trong khi trên 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">

Thử nào

Thuộc tính sizes trong ví dụ trên sử dụng một số truy vấn đa 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 600px, hình ảnh sẽ chiếm 25% chiều rộng khung nhìn; khi chiều rộng của trình duyệt nằm trong khoảng từ 500px đến 600px, hình ảnh sẽ chiếm 50% chiều rộng khung nhìn; và khi chiều rộng của trình duyệt dưới 500px, hình ảnh sẽ chiếm toàn bộ chiều rộng.

Cho phép mở rộng hình ảnh sản phẩm

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

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

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

Hình ảnh nén

Kỹ thuật nén hình ảnh phân phát hình ảnh 2x được nén ở mức cao cho tất cả thiết bị, bất kể khả 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ể.

Thử nào

Thay thế hình ảnh JavaScript

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

Một nhược điểm 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 quy mô trang.

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

Có hai cách khác nhau về cơ bản để 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 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.

Hình ảnh vectơ như biểu trưng và hình vẽ nét được xác định là một tập hợp các đường cong, đường thẳng, hình dạng, màu nền và dải chuyển màu. Bạn có thể tạo hình ảnh vectơ bằng các chương trình như Adobe Illustrator hoặc Inkscape, hoặc viết tay bằng mã bằng định dạng vectơ như SVG.

SVG

SVG cho phép đưa đồ hoạ vectơ thích ứng vào 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ể kết xuất hình ảnh vectơ ở mọi kích thước. Định dạng vectơ mô tả hình học của hình ảnh, tức là cách hình ảnh được tạo từ các đường thẳng, đường cong và màu sắc, v.v. Mặt khác, định dạng đường quét chỉ có thông tin về từng chấm màu, 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 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à SVG ở bên phải. SVG trông rất đẹp ở mọi kích thước, trong khi PNG bên cạnh bắt đầu trông mờ ở kích thước hiển thị 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ể lập trình hình ảnh cùng dòng bằ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: một URI dữ liệu và một SVG.

SVG có khả năng 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ể 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 hệt 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 2 KB:

URI dữ liệu

URI dữ liệu cho phép bạn chèn một tệp (chẳng hạn như một hình ảnh) cùng dòng bằng cách đặt thuộc tính src của một phần tử img thành một chuỗi mã hoá Base64 theo đị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 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ự!)

Bạn có thể dùng công cụ kéo và thả như jpillora.com/base64-encoder để 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 trình duyệt dành cho thiết bị di động và máy tính.

Chèn nội tuyến trong CSS

URI dữ liệu và SVG cũng có thể được chèn cùng dòng trong CSS và điều này được hỗ trợ trên cả thiết bị di động và máy tính. Sau đây là hai hình ảnh trông 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 việc chèn nội tuyến

Mã cùng dòng cho hình ảnh có thể dài dòng (đặ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 cả hình ảnh, CSS và JavaScript, chỉ bằng một yêu cầu duy nhất.

Mặt hạn chế:

Trên thiết bị di động, URI dữ liệu có thể hiển thị chậm hơn đáng kể 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 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 đến 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 mọi trang sử dụng URI dữ liệu.
IE 6 và 7 không hỗ trợ, IE8 hỗ trợ không đầy đủ.
Với HTTP/2, việc giảm số lượng yêu cầu tài sản sẽ ít được ưu tiên hơn.

Cũng như tất cả các yếu tố thích ứng, bạn cần thử nghiệm để tìm ra phương án hiệu quả nhất. Sử dụng 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 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 khác. Nếu bạn cần chèn hình ảnh vectơ cùng dòng, thì SVG là lựa chọn phù hợp 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à lặp lại hình ảnh, v.v. Khi kết hợp với truy vấn đa phương tiện, thuộc tính nền sẽ trở nên mạnh mẽ hơn, 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

Sử dụng hình ảnh phù hợp nhất với các đặc điểm của màn hình, cân nhắc 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-image trong CSS cho màn hình có DPI cao bằng cách sử dụng truy vấn phương tiện với 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.
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 cao cho các thiết bị có độ phân giải thấp hơn.

Sử dụng truy vấn đa phương tiện để tải hình ảnh có điều kiện hoặc chỉ đạo nghệ thuật

Truy vấn phương tiện không chỉ ảnh hưởng đến bố cục trang; bạn cũng có thể sử dụng chúng để tải hình ảnh 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 màn hình nhỏ hơn, chỉ có small.png được tải xuống và áp dụng cho nội dung div, trong khi 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 image-set để cung cấp hình ảnh có độ phân giải cao

Hàm image-set() trong CSS cải thiện thuộc tính hành vi background, 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. Điều này cho phép trình duyệt chọn hình ảnh phù hợp nhất tuỳ 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 hoặc hình ảnh 1x trên thiết bị 2x khi sử dụng mạng có 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 cho phù hợp. Nói cách khác, trình duyệt giả định rằng hình ảnh 2x lớn gấp đôi hình ảnh 1x, nên sẽ thu nhỏ 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 với tiền tố nhà cung cấp -webkit. Hãy nhớ thêm một hình ảnh dự phòng cho trường hợp 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

Đoạn mã trên tải thành phần thích hợp trong các trình duyệt hỗ trợ image-set; nếu không, đoạn mã này sẽ quay lại thành phần 1x. Lưu ý rõ ràng là mặc dù khả năng hỗ trợ của trình duyệt image-set() thấp, nhưng hầu hết các trình duyệt đều nhận được thành phần 1x.

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

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 bạn có thể chỉ định các hình ảnh khác nhau cho màn hình 2x so với 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 trình duyệt Safari và Android đều yêu cầu cú pháp có tiền tố của nhà cung cấp cũ hơn mà không có đơn vị dppx. Xin lưu ý 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 được hiển thị nếu trình duyệt không hỗ trợ 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 min-width để 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 sẽ không được tải xuống nếu truy vấn đa 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 là 500px trở lên:

@media (min-width: 500px) {
    body {
    background-image: url(bg.png);
    }
}

Sử dụng SVG cho biểu tượng

Khi thêm biểu tượng vào trang, hãy sử dụng biểu tượng SVG nếu có thể hoặc trong một số trường hợp, hãy sử dụng 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ế biểu tượng đơn giản bằng ký tự unicode

Nhiều phông chữ hỗ trợ vô số ký tự unicode, có thể dùng thay cho hình ảnh. Không giống như hình ảnh, phông chữ unicode có thể điều chỉnh tỷ lệ và trông đẹp mắt bất kể kích thước hiển thị trên màn hình lớn hay nhỏ.

Ngoài bộ ký tự thông 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 (√), 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 (Ω), thậm chí cả quân cờ (♞).

Việc thêm ký tự unicode được thực hiện theo cách tương tự như các thực thể được đặt tên: &#XXXX, trong đó XXXX đại diện cho số ký tự unicode. Ví dụ:

You're a super &#9733;

Bạn là một ngôi sao ★

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

Đối với các yêu cầu về biểu tượng phức tạp hơn, biểu tượng SVG thường gọn 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:

Đây là đồ hoạ vectơ có thể được điều chỉnh tỷ lệ vô hạn.
Các hiệu ứng CSS như màu sắc, đổ bóng, độ trong suốt và ảnh động đều rất đơn giản.
Bạn có thể chèn hình ảnh SVG ngay trong tài liệu.
Chúng có ý nghĩa.
Các thành phần này hỗ trợ tiếp cận tốt hơn nhờ có 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ữ 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 rất phổ biến và dễ sử dụng, nhưng có một số hạn chế so với biểu tượng SVG:

Đây là đồ họa vectơ có thể được điều chỉnh tỷ lệ vô hạn, nhưng có thể được khử răng cưa, dẫn đến các biểu tượng không sắc nét như mong đợi.
Kiểu dáng hạn chế với CSS.
Việc định vị chính xác đến từng pixel có thể gặp khó khăn, tuỳ thuộc vào chiều cao dòng, khoảng cách giữa các chữ cái, v.v.
Các phần tử 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 đúng cách, các phông chữ này có thể dẫn đến kích thước tệp lớn chỉ để sử dụng một tập hợp con nhỏ các biểu tượng có sẵn.

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

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 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ề biểu tượng. Ví dụ: nếu bạn chỉ cần một số ít biểu tượng, thì bạn nên sử dụng hình ảnh hoặc sprite hình ảnh.

Tối ưu hoá hình ảnh để cải thiện hiệu suất

Hình ảnh thường chiếm phần lớn số byte đã 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ể giúp tiết kiệm nhiều byte nhất và cải thiện hiệu suất nhiều nhất cho trang web của bạn: trình duyệt càng phải tải ít byte thì băng thông của máy khách càng ít bị cạnh tranh và trình duyệt càng có thể tải xuống và hiển thị tất cả tài sản nhanh hơn.

Tóm tắt

Đừng chỉ chọn ngẫu nhiên một định dạng hình ảnh, 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 các hình ảnh thường dùng vào hình ảnh tổng hợp.
Để cải thiện thời gian tải trang ban đầu và giảm quy mô trang ban đầu, hãy cân nhắc chỉ tải hình ảnh sau khi người dùng cuộn đến hình ảnh đó.

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

Có hai loại hình ảnh cần xem xét: ảnh vectơ và ả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 dấu chấm hoặc pixel riêng lẻ. Hình ảnh đường quét thường được lấy từ máy ảnh hoặc máy quét, hoặc có thể được tạo trong trình duyệt bằng phần tử canvas. Kích thước hình ảnh càng lớn thì kích thước tệp cũng càng lớn. Khi được điều chỉnh 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 điền các pixel bị thiếu.

Hình ảnh vectơ, chẳng hạn như biểu trưng và hình vẽ đường thẳng, được xác định bằng một tập hợp các đường cong, đường thẳng, hình dạng và màu nền. Hình ả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. Vì hình ảnh vectơ được xây dựng dựa trên các dữ liệu gốc đơn giản, nên chúng có thể được điều chỉnh tỷ lệ mà không làm giảm chất lượng hoặc thay đổi kích thước tệp.

Khi chọn định dạng phù hợp, bạn cần xem xét cả nguồn gốc của hình ảnh (mành 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 tất cả các loại hình ảnh và mỗi định dạng đều có điểm mạnh và điểm yếu riêng.

Hãy bắt đầu bằng những nguyên tắc sau khi chọn định dạng phù hợp:

Sử dụng JPG cho hình ảnh chụp.
Sử dụng SVG cho đồ hoạ vector và đồ hoạ màu đồng nhất, chẳng hạn như biểu trưng và hình minh hoạ đường kẻ. Nếu không có hình minh hoạ vectơ, hãy thử WebP hoặc PNG.
Sử dụng PNG thay vì GIF vì định dạng này cho phép nhiều màu hơn và cung cấp 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> để có chất lượng hình ảnh tốt hơn 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 "xử lý hậu kỳ" hình ảnh sau khi lưu. Có một số công cụ để nén hình ảnh – có tổn hao 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 hoá việc tối ưu hoá hình ảnh để tính năng này được tích hợp sẵn vào quy trình làm việc của bạn.

Có một số công cụ thực hiện nén không tổn hao hơn nữa 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ử OptiPNG hoặc PNGOUT.

Sử dụng sprite hình ảnh

Tạo hình sprit CSS là một kỹ thuật kết hợp một số hình ảnh thành một hình ảnh "tấm sprite" duy nhất. Sau đó, bạn có thể sử dụng từng hình ảnh bằng cách chỉ định hình nền cho một phần tử (tấm sprite) cộng với độ 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;
}

Thử nào

Kỹ thuật sprite có ưu điểm là giảm số lượt tải xuống cần thiết để nhận được nhiều hình ảnh, trong khi vẫn cho phép lưu vào bộ nhớ đệm.

Cân nhắc việc tải chậm

Tính năng tải chậm có thể tăng tốc đáng kể quá trình tải trên các trang dài có nhiều hình ảnh dưới màn hình đầu tiên bằng cách tải các 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 trang cuộn vô hạn vì nội dung được tải khi xuất hiện, nên có thể công cụ tìm kiếm sẽ không bao giờ thấy nội dung đó. Ngoài ra, những người dùng đang tì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 việc sử dụng hình ảnh

Đôi khi, hình ảnh tốt nhất thực ra không phải là hình ảnh. Bất cứ khi nào có thể, hãy sử dụng các chức năng gốc của trình duyệt để cung cấp chức năng tương tự hoặc giống nhau. Trình duyệt tạo ra hình ảnh mà trước đây cần có hình ảnh. Điều này có nghĩa là 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ờ đó tránh được tình trạng hình ảnh bị điều chỉnh tỷ lệ không phù hợp. Bạn có thể sử dụng phông chữ biểu tượng đặc biệt hoặc unicode để hiển thị biểu tượng.

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

Bất cứ khi nào có thể, văn bản phải là văn bản chứ 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ỉ) ngay trong hình ảnh sẽ khiến người dùng không thể sao chép và dán thông tin; trình đọc màn hình không thể truy cập thông tin và thông tin không thích ứng. Thay vào đó, hãy đặt văn bản trong 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 cần có hình ảnh. Ví dụ: bạn có thể tạo dải chuyển màu phức tạp bằng thuộc tính background, tạo bóng bằng box-shadow và 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 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. 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 đòi hỏi phải có chu kỳ kết xuất, điều này có thể rất quan trọng trên thiết bị di động. Nếu sử dụng quá mức, bạn sẽ mất mọi lợi ích có thể đạt được và điều này có thể cản trở hiệu suất.

Hình ảnh thích ứng Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.

Chỉ đạo nghệ thuật

Hình ảnh thích ứng

Hình ảnh trong mã đá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

Chỉ đạo nghệ thuật trong hình ảnh thích ứng bằng picture

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

Xem xét các điểm ngắt trong hình ảnh thích ứng

Cho phép mở rộng hình ảnh sản phẩm

Các kỹ thuật 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

Chèn nội tuyến trong CSS

Ưu và nhược điểm của việc chèn nội tuyến

Hình ảnh trong CSS

Tóm tắt

Sử dụng truy vấn đa phương tiện để tải hình ảnh có điều kiện hoặc chỉ đạo nghệ thuật

Sử dụng image-set để cung cấp hình ảnh có độ phân giải cao

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

Sử dụng SVG cho biểu tượng

Tóm tắt

Thay thế biểu tượng đơn giản bằng ký tự unicode

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

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

Tối ưu hoá hình ảnh để cải thiện hiệu suất

Tóm tắt

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

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

Sử dụng sprite hình ảnh

Cân nhắc việc tải chậm

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

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

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

Hình ảnh thích ứng

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

Chỉ đạo nghệ thuật trong hình ảnh thích ứng bằng `picture`