Hình ảnh không hiển thị trong html trình duyệt di động

Hãy xem xét một tình huống điển hình. Một trang web điển hình có thể chứa hình ảnh tiêu đề và một số hình ảnh nội dung bên dưới tiêu đề. Hình ảnh tiêu đề có thể sẽ trải dài trên toàn bộ chiều rộng của tiêu đề và hình ảnh nội dung sẽ vừa với một nơi nào đó bên trong cột nội dung. Đây là một ví dụ đơn giản

Điều này hoạt động tốt trên thiết bị màn hình rộng, chẳng hạn như máy tính xách tay hoặc máy tính để bàn (bạn có thể xem ví dụ trực tiếp và tìm mã nguồn trên GitHub. ) Chúng ta sẽ không thảo luận nhiều về CSS trong bài học này, ngoại trừ việc nói rằng

• Nội dung nội dung đã được đặt thành chiều rộng tối đa là 1200 pixel — trong các cổng xem trên chiều rộng đó, nội dung vẫn ở mức 1200px và chính giữa trong không gian có sẵn. Trong các khung nhìn bên dưới chiều rộng đó, phần thân sẽ ở 100% chiều rộng của khung nhìn
• Hình ảnh tiêu đề đã được đặt sao cho trung tâm của nó luôn ở giữa tiêu đề, bất kể tiêu đề được đặt ở độ rộng nào. Nếu trang web đang được xem trên màn hình hẹp hơn, bạn vẫn có thể nhìn thấy chi tiết quan trọng ở giữa hình ảnh (con người) và phần thừa sẽ bị mất ở hai bên. Nó cao 200px
• Các hình ảnh nội dung đã được đặt sao cho nếu phần tử cơ thể trở nên nhỏ hơn hình ảnh, thì các hình ảnh bắt đầu co lại để chúng luôn ở bên trong cơ thể, thay vì tràn ra ngoài

Tuy nhiên, các vấn đề phát sinh khi bạn bắt đầu xem trang web trên thiết bị màn hình hẹp. Tiêu đề bên dưới có vẻ ổn, nhưng nó bắt đầu chiếm nhiều chiều cao màn hình đối với thiết bị di động. Và với kích thước này, rất khó để nhìn thấy khuôn mặt của hai người trong hình ảnh nội dung đầu tiên

Một cải tiến sẽ là hiển thị phiên bản đã cắt của hình ảnh hiển thị các chi tiết quan trọng của hình ảnh khi trang web được xem trên màn hình hẹp. Hình ảnh được cắt xén thứ hai có thể được hiển thị cho thiết bị màn hình có chiều rộng trung bình, chẳng hạn như máy tính bảng. Vấn đề chung mà theo đó bạn muốn phục vụ các hình ảnh được cắt xén khác nhau theo cách đó, cho các bố cục khác nhau, thường được gọi là vấn đề về hướng nghệ thuật

Ngoài ra, không cần phải nhúng những hình ảnh lớn như vậy trên trang nếu nó đang được xem trên màn hình di động. Làm như vậy có thể lãng phí băng thông; . Ngược lại, một hình ảnh raster nhỏ bắt đầu trông có hạt khi được hiển thị lớn hơn kích thước ban đầu của nó (hình ảnh raster là một số pixel chiều rộng và một số pixel chiều cao, như chúng ta đã thấy khi xem đồ họa vector). Lý tưởng nhất là nhiều độ phân giải sẽ được cung cấp cho trình duyệt web của người dùng. Sau đó, trình duyệt có thể xác định độ phân giải tối ưu để tải dựa trên kích thước màn hình của thiết bị người dùng. Đây được gọi là vấn đề chuyển đổi độ phân giải

Để làm cho mọi thứ trở nên phức tạp hơn, một số thiết bị có màn hình độ phân giải cao cần hình ảnh lớn hơn bạn mong đợi để hiển thị đẹp mắt. Đây thực chất là cùng một vấn đề, nhưng trong một bối cảnh hơi khác

Bạn có thể nghĩ rằng hình ảnh vector sẽ giải quyết được những vấn đề này và chúng làm được ở một mức độ nhất định — chúng có kích thước tệp nhỏ và tỷ lệ tốt và bạn nên sử dụng chúng bất cứ khi nào có thể. Tuy nhiên, chúng không phù hợp với tất cả các loại hình ảnh. Hình ảnh vector rất phù hợp cho đồ họa đơn giản, mẫu, thành phần giao diện, v.v. , nhưng nó bắt đầu trở nên rất phức tạp để tạo một hình ảnh dựa trên véc-tơ với loại chi tiết mà bạn sẽ tìm thấy trong một bức ảnh chẳng hạn. Các định dạng hình ảnh raster như JPEG phù hợp hơn với loại hình ảnh chúng ta thấy trong ví dụ trên

Loại vấn đề này không tồn tại khi web lần đầu tiên xuất hiện, vào đầu những năm 90 đến giữa những năm 90 - vào thời điểm đó, thiết bị duy nhất tồn tại để duyệt Web là máy tính để bàn và máy tính xách tay, vì vậy các kỹ sư trình duyệt và người viết thông số kỹ thuật thậm chí còn không nghĩ đến việc triển khai . Các công nghệ hình ảnh đáp ứng đã được triển khai gần đây để giải quyết các vấn đề nêu trên bằng cách cho phép bạn cung cấp cho trình duyệt một số tệp hình ảnh, tất cả đều hiển thị cùng một thứ nhưng chứa số lượng pixel khác nhau (chuyển đổi độ phân giải) hoặc các hình ảnh khác nhau phù hợp với các phân bổ không gian khác nhau (hướng nghệ thuật

Ghi chú. Các tính năng mới được thảo luận trong bài viết này — //_______54_______ — đều được hỗ trợ trong trình duyệt máy tính để bàn và thiết bị di động hiện đại (bao gồm cả trình duyệt Edge của Microsoft, mặc dù không phải Internet Explorer. )

Trong phần này, chúng ta sẽ xem xét hai vấn đề được minh họa ở trên và chỉ ra cách giải quyết chúng bằng các tính năng hình ảnh phản hồi của HTML. Bạn nên lưu ý rằng chúng tôi sẽ tập trung vào các yếu tố

<img
  srcset="elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w"
  sizes="(max-width: 600px) 480px,
         800px"
  src="elva-fairy-800w.jpg"
  alt="Elva dressed as a fairy" />

Vì vậy, vấn đề mà chúng tôi muốn giải quyết với chuyển đổi độ phân giải là gì? . Theo truyền thống, phần tử

<img
  srcset="elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w"
  sizes="(max-width: 600px) 480px,
         800px"
  src="elva-fairy-800w.jpg"
  alt="Elva dressed as a fairy" />

<img src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy" />

Tuy nhiên, chúng tôi có thể sử dụng hai thuộc tính — và — để cung cấp một số hình ảnh nguồn bổ sung cùng với các gợi ý để giúp trình duyệt chọn đúng hình ảnh. Bạn có thể xem một ví dụ về điều này trong phản hồi của chúng tôi. html ví dụ trên GitHub (xem thêm mã nguồn)

<img
  srcset="elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w"
  sizes="(max-width: 600px) 480px,
         800px"
  src="elva-fairy-800w.jpg"
  alt="Elva dressed as a fairy" />

Các thuộc tính srcset và

<img
  srcset="elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w"
  sizes="(max-width: 600px) 480px,
         800px"
  src="elva-fairy-800w.jpg"
  alt="Elva dressed as a fairy" />

srcset xác định tập hợp các hình ảnh mà chúng tôi sẽ cho phép trình duyệt lựa chọn và kích thước của mỗi hình ảnh. Mỗi tập hợp thông tin hình ảnh được phân tách với thông tin trước đó bằng dấu phẩy. Đối với mỗi người, chúng tôi viết

1. Tên tệp hình ảnh (

   <img
     srcset="elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w"
     sizes="(max-width: 600px) 480px,
            800px"
     src="elva-fairy-800w.jpg"
     alt="Elva dressed as a fairy" />
   

   9)
2. một không gian
3. Chiều rộng nội tại của hình ảnh tính bằng pixel (

   <img
     srcset="elva-fairy-320w.jpg, elva-fairy-480w.jpg 1.5x, elva-fairy-640w.jpg 2x"
     src="elva-fairy-640w.jpg"
     alt="Elva dressed as a fairy" />
   

   0) — lưu ý rằng điều này sử dụng đơn vị

   <img
     srcset="elva-fairy-320w.jpg, elva-fairy-480w.jpg 1.5x, elva-fairy-640w.jpg 2x"
     src="elva-fairy-640w.jpg"
     alt="Elva dressed as a fairy" />
   

   1, không phải

   <img
     srcset="elva-fairy-320w.jpg, elva-fairy-480w.jpg 1.5x, elva-fairy-640w.jpg 2x"
     src="elva-fairy-640w.jpg"
     alt="Elva dressed as a fairy" />
   

   2 như bạn có thể mong đợi. Kích thước nội tại của hình ảnh là kích thước thực của nó, có thể tìm thấy kích thước này bằng cách kiểm tra tệp hình ảnh trên máy tính của bạn (ví dụ: trên máy Mac, bạn có thể chọn hình ảnh trong Finder và nhấn Cmd + I để hiển thị màn hình thông tin)

<img
  srcset="elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w"
  sizes="(max-width: 600px) 480px,
         800px"
  src="elva-fairy-800w.jpg"
  alt="Elva dressed as a fairy" />

1. Điều kiện phương tiện (

   <img
     srcset="elva-fairy-320w.jpg, elva-fairy-480w.jpg 1.5x, elva-fairy-640w.jpg 2x"
     src="elva-fairy-640w.jpg"
     alt="Elva dressed as a fairy" />
   

   4) — bạn sẽ tìm hiểu thêm về những điều này trong chủ đề CSS, nhưng bây giờ, hãy chỉ nói rằng điều kiện phương tiện mô tả trạng thái có thể xảy ra mà màn hình có thể ở trong đó. Trong trường hợp này, chúng tôi đang nói "khi chiều rộng của khung nhìn từ 600 pixel trở xuống"
2. một không gian
3. Chiều rộng của vùng mà hình ảnh sẽ lấp đầy khi điều kiện phương tiện là đúng (

   <img
     srcset="elva-fairy-320w.jpg, elva-fairy-480w.jpg 1.5x, elva-fairy-640w.jpg 2x"
     src="elva-fairy-640w.jpg"
     alt="Elva dressed as a fairy" />
   

   5)

Ghi chú. Đối với chiều rộng vùng, thay vì cung cấp chiều rộng tuyệt đối (ví dụ:

<img
  srcset="elva-fairy-320w.jpg, elva-fairy-480w.jpg 1.5x, elva-fairy-640w.jpg 2x"
  src="elva-fairy-640w.jpg"
  alt="Elva dressed as a fairy" />

<img
  srcset="elva-fairy-320w.jpg, elva-fairy-480w.jpg 1.5x, elva-fairy-640w.jpg 2x"
  src="elva-fairy-640w.jpg"
  alt="Elva dressed as a fairy" />

Vì vậy, với các thuộc tính này, trình duyệt sẽ

1. Nhìn vào chiều rộng thiết bị của nó
2. Tìm ra điều kiện phương tiện nào trong danh sách

   <img
     srcset="elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w"
     sizes="(max-width: 600px) 480px,
            800px"
     src="elva-fairy-800w.jpg"
     alt="Elva dressed as a fairy" />
   

   0 là điều kiện đầu tiên đúng
3. Nhìn vào kích thước vị trí được cung cấp cho truy vấn phương tiện đó
4. Tải hình ảnh được tham chiếu trong danh sách srcset có cùng kích thước với vị trí hoặc, nếu không có, hình ảnh đầu tiên lớn hơn kích thước vị trí đã chọn

Và đó là nó. Tại thời điểm này, nếu trình duyệt hỗ trợ có chiều rộng khung nhìn là 480px tải trang, điều kiện phương tiện

img {
  width: 320px;
}

<img
  srcset="elva-fairy-320w.jpg, elva-fairy-480w.jpg 1.5x, elva-fairy-640w.jpg 2x"
  src="elva-fairy-640w.jpg"
  alt="Elva dressed as a fairy" />

<img
  srcset="elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w"
  sizes="(max-width: 600px) 480px,
         800px"
  src="elva-fairy-800w.jpg"
  alt="Elva dressed as a fairy" />

<img
  srcset="elva-fairy-320w.jpg, elva-fairy-480w.jpg 1.5x, elva-fairy-640w.jpg 2x"
  src="elva-fairy-640w.jpg"
  alt="Elva dressed as a fairy" />

Ghi chú. Khi kiểm tra điều này với trình duyệt trên máy tính để bàn, nếu trình duyệt không tải được hình ảnh hẹp hơn khi bạn đã đặt cửa sổ của nó thành chiều rộng hẹp nhất, hãy xem chế độ xem là gì (bạn có thể ước tính nó bằng cách vào bảng điều khiển JavaScript của trình duyệt . Các trình duyệt khác nhau có kích thước tối thiểu mà chúng sẽ cho phép bạn giảm chiều rộng cửa sổ xuống và chúng có thể rộng hơn bạn nghĩ. Khi kiểm tra nó với trình duyệt di động, bạn có thể sử dụng các công cụ như trang

img {
  width: 320px;
}

Để xem hình ảnh nào đã được tải, bạn có thể sử dụng tab Giám sát mạng của Firefox DevTools hoặc bảng điều khiển Mạng của Chrome DevTools. Đối với Chrome, bạn cũng có thể muốn tắt bộ đệm để ngăn không cho bộ đệm chọn các hình ảnh đã tải xuống

Các trình duyệt cũ hơn không hỗ trợ các tính năng này sẽ bỏ qua chúng. Thay vào đó, các trình duyệt đó sẽ tiếp tục và tải hình ảnh được tham chiếu trong thuộc tính như bình thường

Ghi chú. Trong

img {
  width: 320px;
}

img {
  width: 320px;
}

Nếu bạn đang hỗ trợ nhiều độ phân giải màn hình, nhưng mọi người nhìn thấy hình ảnh của bạn ở cùng kích thước thực tế trên màn hình, bạn có thể cho phép trình duyệt chọn hình ảnh có độ phân giải phù hợp bằng cách sử dụng srcset với bộ mô tả x và không có bộ mô tả

<img
  srcset="elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w"
  sizes="(max-width: 600px) 480px,
         800px"
  src="elva-fairy-800w.jpg"
  alt="Elva dressed as a fairy" />

<img
  srcset="elva-fairy-320w.jpg, elva-fairy-480w.jpg 1.5x, elva-fairy-640w.jpg 2x"
  src="elva-fairy-640w.jpg"
  alt="Elva dressed as a fairy" />

img {
  width: 320px;
}

Trong trường hợp này,

<img
  srcset="elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w"
  sizes="(max-width: 600px) 480px,
         800px"
  src="elva-fairy-800w.jpg"
  alt="Elva dressed as a fairy" />

<img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva" />

<img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva" />

Tóm lại, vấn đề về hướng nghệ thuật liên quan đến việc muốn thay đổi hình ảnh được hiển thị để phù hợp với các kích thước hiển thị hình ảnh khác nhau. Ví dụ: một trang web bao gồm ảnh phong cảnh lớn với một người ở giữa khi được xem trên trình duyệt máy tính để bàn. Khi xem trên trình duyệt dành cho thiết bị di động, hình ảnh đó bị thu nhỏ lại, khiến người trong ảnh rất nhỏ và khó nhìn thấy. Có lẽ sẽ tốt hơn nếu hiển thị hình ảnh chân dung, nhỏ hơn trên thiết bị di động, hình ảnh này sẽ phóng to người đó. Phần tử cho phép chúng tôi triển khai loại giải pháp này

Quay trở lại trạng thái không phản hồi ban đầu của chúng tôi. html, chúng tôi có một hình ảnh rất cần chỉ đạo nghệ thuật

<img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva" />

Hãy sửa lỗi này, với . Giống như

<img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva" />

<img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva" />

<picture>
  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg" />
  <source media="(min-width: 800px)" srcset="elva-800w.jpg" />
  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva" />
picture>

<img
  srcset="elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w"
  sizes="(max-width: 600px) 480px,
         800px"
  src="elva-fairy-800w.jpg"
  alt="Elva dressed as a fairy" />

<picture>
  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg" />
  <source media="(min-width: 800px)" srcset="elva-800w.jpg" />
  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva" />
picture>

• Các phần tử

  <picture>
    <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg" />
    <source media="(min-width: 800px)" srcset="elva-800w.jpg" />
    <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva" />
  picture>
  

  0 bao gồm thuộc tính

  <picture>
    <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg" />
    <source media="(min-width: 800px)" srcset="elva-800w.jpg" />
    <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva" />
  picture>
  

  3 có chứa điều kiện phương tiện — như với ví dụ về srcset đầu tiên, những điều kiện này là các thử nghiệm quyết định hình ảnh nào được hiển thị — hình ảnh đầu tiên trả về true sẽ được hiển thị. Trong trường hợp này, nếu chiều rộng khung nhìn rộng từ 799px trở xuống, hình ảnh của phần tử

  <picture>
    <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg" />
    <source media="(min-width: 800px)" srcset="elva-800w.jpg" />
    <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva" />
  picture>
  

  0 đầu tiên sẽ được hiển thị. Nếu chiều rộng khung nhìn từ 800px trở lên, thì đó sẽ là chiều rộng thứ hai
• Các thuộc tính srcset chứa đường dẫn đến hình ảnh để hiển thị. Như chúng ta đã thấy với

  <img
    srcset="elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w"
    sizes="(max-width: 600px) 480px,
           800px"
    src="elva-fairy-800w.jpg"
    alt="Elva dressed as a fairy" />
  

  2 ở trên,

  <picture>
    <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg" />
    <source media="(min-width: 800px)" srcset="elva-800w.jpg" />
    <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva" />
  picture>
  

  0 có thể nhận thuộc tính srcset với nhiều hình ảnh được tham chiếu, cũng như thuộc tính

  <img
    srcset="elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w"
    sizes="(max-width: 600px) 480px,
           800px"
    src="elva-fairy-800w.jpg"
    alt="Elva dressed as a fairy" />
  

  0. Vì vậy, bạn có thể cung cấp nhiều hình ảnh thông qua phần tử , nhưng sau đó cũng cung cấp nhiều độ phân giải cho mỗi hình ảnh. Trên thực tế, có thể bạn sẽ không muốn làm điều này thường xuyên.
• Trong mọi trường hợp, bạn phải cung cấp yếu tố

  <img
    srcset="elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w"
    sizes="(max-width: 600px) 480px,
           800px"
    src="elva-fairy-800w.jpg"
    alt="Elva dressed as a fairy" />
  

  2, với

  img {
    width: 320px;
  }
  

  6 và

  <picture>
    <source type="image/svg+xml" srcset="pyramid.svg" />
    <source type="image/webp" srcset="pyramid.webp" />
    <img
      src="pyramid.png"
      alt="regular pyramid built from four equilateral triangles" />
  picture>
  

  4, ngay trước

  <picture>
    <source type="image/svg+xml" srcset="pyramid.svg" />
    <source type="image/webp" srcset="pyramid.webp" />
    <img
      src="pyramid.png"
      alt="regular pyramid built from four equilateral triangles" />
  picture>
  

  5, nếu không sẽ không có hình ảnh nào xuất hiện. Điều này cung cấp một trường hợp mặc định sẽ áp dụng khi không có điều kiện phương tiện nào trả về đúng (bạn thực sự có thể xóa phần tử

  <picture>
    <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg" />
    <source media="(min-width: 800px)" srcset="elva-800w.jpg" />
    <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva" />
  picture>
  

  0 thứ hai trong ví dụ này) và một dự phòng cho các trình duyệt không hỗ trợ phần tử

Mã này cho phép chúng tôi hiển thị hình ảnh phù hợp trên cả màn hình rộng và màn hình hẹp, như hình bên dưới

Ghi chú. Bạn chỉ nên sử dụng thuộc tính

<picture>
  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg" />
  <source media="(min-width: 800px)" srcset="elva-800w.jpg" />
  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva" />
picture>

Khi trình duyệt bắt đầu tải một trang, nó sẽ bắt đầu tải xuống (tải trước) bất kỳ hình ảnh nào trước khi trình phân tích cú pháp chính bắt đầu tải và diễn giải CSS và JavaScript của trang. Cơ chế đó nói chung là hữu ích để giảm thời gian tải trang, nhưng nó không hữu ích cho hình ảnh phản hồi — do đó cần triển khai các giải pháp như srcset. Ví dụ: bạn không thể tải phần tử

<img
  srcset="elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w"
  sizes="(max-width: 600px) 480px,
         800px"
  src="elva-fairy-800w.jpg"
  alt="Elva dressed as a fairy" />

Các định dạng hình ảnh mới như và có thể duy trì đồng thời kích thước tệp thấp và chất lượng cao. Các định dạng này hiện có hỗ trợ trình duyệt tương đối rộng rãi nhưng ít "độ sâu lịch sử"

cho phép chúng tôi tiếp tục phục vụ các trình duyệt cũ hơn. Bạn có thể cung cấp các loại MIME bên trong thuộc tính srcset4 để trình duyệt có thể từ chối ngay các loại tệp không được hỗ trợ

<picture>
  <source type="image/svg+xml" srcset="pyramid.svg" />
  <source type="image/webp" srcset="pyramid.webp" />
  <img
    src="pyramid.png"
    alt="regular pyramid built from four equilateral triangles" />
picture>

• Không sử dụng thuộc tính

  <picture>
    <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg" />
    <source media="(min-width: 800px)" srcset="elva-800w.jpg" />
    <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva" />
  picture>
  

  3, trừ khi bạn cũng cần chỉ đạo nghệ thuật
• Trong phần tử

  <picture>
    <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg" />
    <source media="(min-width: 800px)" srcset="elva-800w.jpg" />
    <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva" />
  picture>
  

  0, bạn chỉ có thể tham khảo các hình ảnh thuộc loại được khai báo trong phần tử srcset4
• Sử dụng danh sách được phân tách bằng dấu phẩy với srcset và

  <img
    srcset="elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w"
    sizes="(max-width: 600px) 480px,
           800px"
    src="elva-fairy-800w.jpg"
    alt="Elva dressed as a fairy" />
  

  0, nếu cần

Đối với việc học tích cực này, chúng tôi mong bạn dũng cảm và làm điều đó một mình, chủ yếu là. Chúng tôi muốn bạn triển khai màn hình hẹp/ảnh chụp màn hình rộng theo định hướng nghệ thuật phù hợp của riêng bạn bằng cách sử dụng và một ví dụ chuyển đổi độ phân giải sử dụng srcset

1. Viết một số HTML đơn giản để chứa mã của bạn (sử dụng 2 làm điểm bắt đầu, nếu bạn thích)
2. Tìm một hình ảnh phong cảnh màn hình rộng đẹp với một số loại chi tiết có trong đó ở đâu đó. Tạo một phiên bản có kích thước web của nó bằng trình chỉnh sửa đồ họa, sau đó cắt nó để hiển thị một phần nhỏ hơn phóng to chi tiết và tạo một hình ảnh thứ hai (rộng khoảng 480px là tốt cho việc này)
3. Sử dụng phần tử để triển khai trình chuyển đổi hình ảnh theo hướng nghệ thuật
4. Tạo nhiều tệp hình ảnh có kích thước khác nhau, mỗi tệp hiển thị cùng một hình ảnh
5. Sử dụng srcset/5 để tạo ví dụ về trình chuyển đổi độ phân giải, để phục vụ cùng một hình ảnh có kích thước ở các độ phân giải khác nhau hoặc các kích thước hình ảnh khác nhau ở các độ rộng khung nhìn khác nhau

Đó là gói dành cho hình ảnh phản hồi — chúng tôi hy vọng bạn thích chơi với những kỹ thuật mới này. Như một bản tóm tắt, có hai vấn đề khác biệt mà chúng tôi đã thảo luận ở đây

• chỉ đạo nghệ thuật. Sự cố theo đó bạn muốn cung cấp hình ảnh đã cắt cho các bố cục khác nhau — ví dụ: hình ảnh phong cảnh hiển thị toàn cảnh cho bố cục máy tính để bàn và hình ảnh dọc hiển thị đối tượng chính được phóng to cho bố cục di động. Bạn có thể giải quyết vấn đề này bằng cách sử dụng phần tử
• chuyển đổi độ phân giải. Vấn đề theo đó bạn muốn phân phối các tệp hình ảnh nhỏ hơn cho các thiết bị màn hình hẹp, vì chúng không cần hình ảnh lớn như màn hình máy tính để bàn — và phân phát các hình ảnh có độ phân giải khác nhau cho màn hình mật độ cao/mật độ thấp. Bạn có thể giải quyết vấn đề này bằng đồ họa vector (hình ảnh SVG) và thuộc tính with

Điều này cũng dẫn đến việc đóng toàn bộ mô-đun Đa phương tiện và nhúng. Điều duy nhất cần làm bây giờ trước khi tiếp tục là thử đánh giá Đa phương tiện và nhúng của chúng tôi và xem bạn tiếp tục như thế nào. Chúc vui vẻ

Tại sao hình ảnh không hiển thị trong HTML trong Điện thoại di động?

Tại sao hình ảnh của tôi không hoạt động trong HTML?

Làm cách nào để thêm hình ảnh vào HTML trên thiết bị di động?

Tại sao liên kết hình ảnh của tôi không hiển thị trong HTML?