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

Hình ảnh thích ứng

Một hình ảnh đáng giá 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 thích ứng, bố cục của chúng tôi không chỉ thay đổi theo đặc điểm của thiết bị mà còn theo hình ảnh.

Pete LePage

Thiết kế web thích ứng có nghĩa là bố cục của chúng ta không chỉ 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. Mộ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ỏ lại cho vừa với màn hình nhỏ hơn.

Chỉ đạo nghệ thuật

Đôi khi, bạn có thể cần thay đổi hình ảnh mạnh mẽ hơn: thay đổi tỷ lệ, cắt và thậm chí 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. 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 cần để 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 của bạn trông đẹp 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 để 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 các hình ảnh 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í đượ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ẽ, có thể tải xuống, giải mã và hiển thị nội dung. Ngoài ra, các trình duyệt hiện đại hỗ trợ nhiều định dạng hình ảnh. Việc đưa hình ảnh hoạt động trên các thiết bị cũng giống như trên máy tính, mà chỉ yêu cầu 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 để hình ảnh không vô tình tràn vùng chứa.
Sử dụng phần tử picture khi 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 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 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 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 chúng vô tình tràn khung nhìn. Ví dụ: width: 50%; khiến chiều rộng hình ảnh chiếm 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 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. Ví dụ:

img, embed, object, video {
    max-width: 100%;
}

Đừng quên cung cấp thông tin 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 người dùng dễ tiếp cận trang web của bạn 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ư 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 sẽ có hình ảnh 1x trên thiết bị 2x khi sử dụng mạng băng thông giới hạn.

<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 bạn phải luôn đưa vào hình ảnh 1x có thể hiển thị trên mọi thiết bị, bất kể chức 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 đưa ra 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ứ từ mật độ pixel đến chiều rộng và chiều cao, nhưng chỉ có mật độ pixel là được hỗ trợ tốt hiện nay. Để 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 chỉ cung cấp hình ảnh 2x trong thuộc tính này.

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 của 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 của thiết bị, hướng và các đặc điểm khác.

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

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 hiển thị một hình ảnh khác đôi chút trên một số loại màn hình. Tương tự như phần tử video, bạn có thể đưa nhiều phần tử source vào, 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>

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 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 mà phần tử picture không được hỗ trợ, trình duyệt sẽ hiển thị phần tử img và luôn đi kèm với phần tử đó.

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 khi chỉ định chỉ số mô tả mật độ cho nguồn hình ảnh. Điều này đặc biệt đúng với những hình ảnh có chiều rộng tương ứng với chiều rộng 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 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ị hình ảnh chiếm 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 có lớn hay không. 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ị	Đã sử dụng hình ảnh	Giải pháp hiệu quả
400px	1	`200.jpg`	1x
400px	2	`400.jpg`	2x
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 trên trang web. Ví dụ: trên màn hình nhỏ, bạn có thể muốn hình ảnh chiếm 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">

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 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 sẽ chiếm 50% chiều rộng khung nhìn và dưới 500px, hình ảnh là đầy đủ chiều rộng.

Làm cho hình ảnh sản phẩm có thể mở rộng được

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

Khách hàng muốn xem mặt hàng mà họ đang mua. Trên các trang web bán lẻ, người dùng mong muốn có thể xem được ảnh cận cảnh độ phân giải cao của các sản phẩm để nhìn rõ chi tiết hơn 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 điều đó.

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

Các kỹ thuật tạo 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 ở 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ể.

Thử nào

Thay thế hình ảnh JavaScript

Tính năng thay thế hình ảnh JavaScript kiểm tra các khả năng của thiết bị và "thực hiện đúng điều". Bạn có thể xác định tỷ lệ pixel của thiết bị thông qua window.devicePixelRatio, xem chiều rộng và chiều cao của màn hình và thậm chí có khả năng phát hiện một số 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ả 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 nhược điểm lớn của phương pháp này là khi sử dụng JavaScript, 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 trọng 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. Đ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 trình 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à nghệ thuật đường kẻ đượ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 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 giúp bạn có thể đưa đồ họa 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. Các định dạng vectơ mô tả hình dạng của hình ảnh—cách hình ảnh được xây dựng từ các đường, đườ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 chia tỷ lệ.

Dưới đây là 2 phiên bản của cùng một hình ảnh: một hình ảnh PNG ở bên trái và một SVG ở bên phải. Tệp SVG (Đồ hoạ vectơ có thể mở rộng) trông đẹp ở mọi kích thước, trong khi tệp PNG bên cạnh tệp này 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 thực hiện, bạn có thể viết mã 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ó khả năng hỗ trợ tuyệt vời trên thiết bị di động và máy tính để bàn và các công cụ tối ưu hóa 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 2 KB:

URI dữ liệu

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

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 các 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 dành cho thiết bị di động và 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à được hỗ trợ trên cả thiết bị di động và máy tính. Dưới đây là 2 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ùng dòng

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 cho phép truy xuất toàn bộ trang web (bao gồm cả 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ừ 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.
Các phần tử này làm tăng độ phức tạp cho mã đánh dấu và quy trình làm việc của bạ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 được vào bộ nhớ đệm, vì vậy bạn phải tải các URI đó xuống cho từng 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.

Giống như với mọi sản phẩm thích ứng, bạn cần kiểm tra xem yếu tố 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 cho hình ảnh đường quét – ví dụ: trên một 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 chèn ảnh vectơ 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 background của CSS 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 bạn dễ dàng thêm nhiều hình ảnh, cũng như khiến các hình ảnh đó 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 thậm chí cò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.v.

Tóm tắt

Hãy sử dụng hình ảnh tốt 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 thiết bị và bố cục trang.
Thay đổi thuộc tính background-image trong 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ớ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 đến các thiết bị có độ phân giải thấp hơn.

Sử dụng các truy vấn đa phương tiện để 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 mà còn có thể dùng để tải hình ảnh một 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 của 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 các 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 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, 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 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 sử dụng mạng băng thông giới hạn.

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 lớn gấp đôi hình ảnh 1x và do đó 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.

Dịch vụ 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 cẩn thận để đưa vào một 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

Thông số ở trên sẽ tải thành phần thích hợp trong các trình duyệt có hỗ trợ tính năng đặt hình ảnh; nếu không, thành phần này sẽ quay lại thành phần 1x. Cảnh báo rõ ràng là mặc dù mức độ hỗ trợ của 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 gấp 1 lần.

Sử dụng truy vấn đa phương tiện để cung cấp hình ảnh có độ phân giải cao hoặc 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 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 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ác trình duyệt Safari và Android đều yêu cầu cú pháp có tiền tố cũ của nhà cung cấp 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 đó sẽ hiển thị nếu trình duyệt không hỗ trợ các truy vấn nội dung nghe nhìn dành riêng cho độ phân giải.

.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 nội dung nghe nhì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 sử dụng biểu tượng SVG nếu có thể hoặc sử 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 các 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ể 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 bất kể kích thước 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 ký hiệu cho mũi tên (←), toán tử toán học ({3}), hình dạng hình học (★), hình ảnh điều khiển (▶), ký hiệu âm nhạc (♬), chữ 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 tên: &#XXXX, trong đó XXXX đại diện cho số ký tự unicode. Ví dụ:

You're a super &#9733;

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

Đó là đồ hoạ vectơ có thể thay đổi 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.
Giới hạn kiểu bằng CSS.
Việc định vị hoàn hảo cho pixel có thể khó, tuỳ thuộc vào chiều cao dòng, khoảng cách chữ cái, v.v.
Các API 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, chúng có thể dẫn đến kích thước tệp lớn nếu chỉ sử dụng một số ít 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

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 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 chỉ cần một số 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 byte được tải xuống và cũng thường chiếm một lượng đáng kể không gian trực quan trên trang. Kết quả là, việc tối ưu hoá hình ảnh thường có thể mang lại một số cải tiến về hiệu suất và mức tiết kiệm byte lớn nhất cho trang web của bạn: trình duyệt phải tải xuống càng ít byte, băng thông của máy khách càng có ít cạnh tranh và trình duyệt càng có thể tải xuống và hiển thị tất cả các thành phần nhanh hơn.

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ụ 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 các ảnh sprite 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 cuộn vào khung hiển thị.

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

Có hai loại hình ảnh cần xem xét: 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, 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 điể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 máy quét, hoặc bạn có thể tạo hình ảnh 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 điền các pixel bị thiếu.

Hình ảnh vectơ, chẳng hạn như biểu trưng và nghệ thuật đường kẻ, đượ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. 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 ở một định dạng vectơ như SVG. Vì ả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 tỷ lệ hình ảnh 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 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 từ những nguyên tắc sau đây khi chọn định dạng phù 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, chẳng hạn như biểu trưng và nghệ thuật đường kẻ. Nếu không có nghệ thuật vectơ, hãy thử WebP hoặc PNG.
Hãy dùng PNG thay vì GIF vì cách này cho phép có nhiều màu hơn và 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> nhằm 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 việc 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ông cụ nén và không tổn hao, trực tuyến, GUI (Giao diện người dùng đồ hoạ) và dòng lệnh. Nếu có thể, tốt nhất bạn nên cố gắng 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.

Một số công cụ có thể thực hiện thêm quá trình nén không mất dữ liệu trên các tệp JPG và PNG mà không làm ảnh hưởng đến chất lượng hình ảnh. Đối với JPG, hãy thử dùng 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 hình ảnh sprite

Cộng dồn CSS là kỹ thuật kết hợp một số hình ảnh thành một hình ả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ử (trang 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

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

Cân nhắc sử dụng phương thứ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ể 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 phương thức 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 các 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 được nội dung đó. Ngoài ra, những người dùng đang 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 tốt nhất thực sự không phải 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 giống hoặc tương tự. Các trình duyệt tạo ra hình ảnh theo yêu cầu trước đây. Điều này có nghĩa là các trình duyệt không còn cần tải các tệp hình ảnh riêng biệt xuống, nhờ đó ngăn các hình ảnh được điều chỉnh theo tỷ lệ không hợp lý. Bạn có thể sử dụng Unicode hoặc phông chữ biểu tượng đặc biệt để hiển thị các 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ẽ ngăn người dùng sao chép và dán thông tin; điều này khiến trình đọc màn hình không thể truy cập thông tin và thông tin sẽ không phản hồi. 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 để đạ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 bắt buộc phải có hình ảnh. Ví dụ: bạn có thể tạo các hiệu ứng 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 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 đòi hỏi phải có chu kỳ kết xuất. Đây có thể là chu kỳ đáng kể 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 mà có thể bạn đã nhận được và điều này có thể cản trở hiệu suất.

Hình ảnh thích ứng

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

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

Làm cho hình ảnh sản phẩm có thể mở rộng được

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 và nhược điểm cùng dòng

Hình ảnh trong CSS

Tóm tắt

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

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

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

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ữ biểu tượng

Tối ưu hoá hình ảnh để tăng 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 hình ảnh sprite

Cân nhắc sử dụng phương thức tải từng phần

Tránh hoàn toàn hình ảnh

Đặt văn bản trong mã đá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`