Chúng ta thích thú cái đẹp của con bướm, nhưng hiếm khi ưa những thay đổi mà nó đã trải qua để đạt được vẻ đẹp đó.

Maya Angelou

THÊM ẢNH

Categories

Thêm ảnh

Phần tử img

Phần tử img ra lệnh cho trình duyệt: “Đặt ảnh ở đây”.

<p>This summer, try making pizza <img src="pizza.pgn" alt="">
on your grill.</p>

Phần tử img bắt buộc phải có hai thuộc tính src và alt. Thuộc tính src (viết tắt của source) cung cấp địa chỉ của ảnh (địa chỉ URL). Thuộc tính alt cung cấp văn bản thay thế khi trình duyệt không thể tải ảnh.

Phần tử img là phần tử trống và là phần tử dòng (inline element).

Mặc định, chân ảnh ngang hàng với chân chữ xung quanh.

Khi trình duyệt tải ảnh và hiển thị, nó đồng thời cũng lưu ảnh trong bộ nhớ tạm (gọi là cache). Sau đó, khi cần hiển thị lại ảnh này, trình duyệt không tải nó về từ máy chủ nữa mà lấy ngay từ cache.

Kích thước hiển thị của ảnh được xác định bởi hai thuộc tính width và height. Nếu chỉ cung cấp một thuộc tính tỉ lệ ảnh không bị thay đổi tỉ lệ, chỉ bị phóng to hoặc thu nhỏ. Ngày nay, bạn không nên sử dụng hai thuộc tính này để thay đổi kích thước ảnh, thay vì thế hãy sử dụng CSS.

width và height chỉ nên dùng, nếu ảnh xuất hiện ở nhiều trang với kích thước không đổi, như logo, biểu tượng…

Thêm ảnh SVG

SVG là định dạng ảnh véctơ, không bị thay đổi chất lượng khi phóng to hay thu nhỏ.

Ảnh SVG là ảnh “lập trình được”, gõ mã sau vào một trình soạn thảo văn bản đơn giản (như notepad chẳng hạn):

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 180">
  <rect width="300" height="180" fill="purple" rx="20" ry="20"/>
  <text x="40" y="114" fill="yellow" font-family="'Verdana-Bold'"
  font-size="72">hello!
  </text>
</svg>

Lưu lại với tên hello.svg ta được ảnh SVG trông như sau:

Thêm ảnh SVG bằng phần tử img

Ảnh SVG cũng có thể thêm vào bằng img:

<img src="hello.svg" alt="">

Ưu điểm và nhược điểm:

  • Được hỗ trợ bởi hầu hết các trình duyệt.

  • Không thể áp dụng CSS ngoài để thay đổi diện mạo của ảnh.

  • Không thể áp dụng JavaScript để thao tác với các phần tử trong ảnh SVG.

Thêm ảnh SVG trực tiếp trong tài liệu HTML

Ta có thể sao chép mã nguồn của ảnh SVG và dán trực tiếp vào trong mã HTML để chèn ảnh SVG.

<p>This summer, try making pizza
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72" width="100" height="100">
  <circle fill="#D4AB00" cx="36" cy="36" r="36"/>
  <circle opacity=".7" fill="#FFF" stroke="#8A291C" cx="36.1" cy="35.9" r="31.2"/>
  <circle fill="#A52C1B" cx="38.8" cy="13.5" r="4.8"/>
  <circle fill="#A52C1B" cx="22.4" cy="20.9" r="4.8"/>
  <circle fill="#A52C1B" cx="32" cy="37.2" r="4.8"/>
  <circle fill="#A52C1B" cx="16.6" cy="39.9" r="4.8"/>
  <circle fill="#A52C1B" cx="26.2" cy="53.3" r="4.8"/>
  <circle fill="#A52C1B" cx="42.5" cy="27.3" r="4.8"/>
  <circle fill="#A52C1B" cx="44.3" cy="55.2" r="4.8"/>
  <circle fill="#A52C1B" cx="54.7" cy="42.9" r="4.8"/>
  <circle fill="#A52C1B" cx="56" cy="28.3" r="4.8"/>
</svg>
on your grill.</p>

Để có được mã nguồn ảnh SVG, bạn có thể sử dụng phần mềm để tạo ảnh này như Adobe Illustrator hoặc Inkscape.

Ưu điểm và nhược điểm

  • Cho phép sử dụng hết mọi tính năng của SVG. Mọi thành phần của ảnh (như circle trong ví dụ trên) được xem như một phần tử HTML thông thường. Nhờ vậy bạn có thể tác động lên ảnh SVG bằng CSS hoặc JavaScript.

  • Nhược điểm là mã SVG đôi khi rất dài và khó sử dụng, nó làm cho tài liệu HTML bị tăng kích thước và khó đọc.

  • Một nhược điểm khác là các ảnh SVG thêm theo cách này không được lưu vào bộ nhớ đệm.

Responsive Images

“Responsive Images”, là cung cấp nhiều phiên bản ảnh tương ứng với các màn hình hiển thị khác nhau. Trình duyệt tự động tìm một phiên bản ảnh thích hợp nhất trên mỗi loại màn hình hiển thị.

Hiển thị ảnh trên các màn hình có độ phân giải khác nhau

Các màn hình được tạo nên từ các điểm ảnh (pixel) vật lý. Số điểm ảnh trải dài trên độ dài 1 inch gọi là ppi, hay mật độ điểm ảnh. Mật độ điểm ảnh đặc trưng cho độ phân giải của màn hình.

Các ảnh bitmap, như JPG, PNG, và GIF, cũng được tạo nên từ các điểm ảnh như vậy. Khi có ánh xạ 1-1 giữa điểm ảnh của ảnh và điểm ảnh vật lý của thiết bị. Ảnh có kích thước 100 pixel sẽ có kích thước đúng 100 pixel vật lý trên thiết bị.

Ngày nay, với cùng kích thước màn hình, các nhà sản xuất đang cố nhồi nhét các nhiều pixel vật lý càng tốt để tăng độ phân giải. Bởi vậy các điểm ảnh vật lý có kích thước ngày càng nhỏ. Nếu giữ nguyên ánh xạ 1-1, ảnh trông rất nhỏ đi khi hiển thị trên màn hình có độ phân giải cao.

Khái niệm điểm ảnh tham chiếu (reference pixel) ra đời. Ta không ánh xạ 1 điểm ảnh trên ảnh với 1 điểm ảnh vật lý nữa, mà ánh xạ 1 điểm ảnh trên ảnh với 1 điểm ảnh tham chiếu.

Điểm ảnh tham chiếu có tên gọi khác nhau:

  • Trên iOS nó được gọi được là một PT (point).

  • Trên Android nói được gọi là DP (hoặc DiP).

  • Trên trình duyệt nó được gọi là CSS Pixel.

Tùy thiết bị mà kích thước điểm ảnh tham chiếu khác nhau. Tỉ lệ kích thước điểm ảnh tham chiếu so với kích thước điểm ảnh vật lý được gọi là “device-pixel-ratios” và viết thêm chữ x đăng sau.

Chẳng hạn nếu kích thước điểm ảnh tham chiếu gấp 2 lần kích thước điểm ảnh vật lý thì tỉ số này là 2x. Lúc này cần 2x2 = 4 điểm ảnh vật lý để biểu diễn một điểm ảnh tham chiếu. Nếu tỉ số này là 3x thì cần 9 điểm ảnh vật lý, 4x thì cần 16 điểm ảnh vật lý để biểu diễn một điểm ảnh tham chiếu.

Khi hiển thị trên màn hình Nx thì kích thước ảnh tăng lên N lần.

Giả sử bạn có một ảnh chiều rộng 200px, trên màn hình 1x nó có chiều rộng 200px, trên màn hình 2x nó có kích thước 400px…

Kích thước ảnh lớn lên, nhưng ảnh trông sẽ không được sắc nét. Để khắc phục bạn có thể tạo ảnh như vậy, nhưng có độ rộng 400px. Như vậy, để đảm bảo chất lượng hình ảnh, trên những màn hình có độ phân giải cao, ảnh cũng phải có độ phân giải cao tương ứng.

Trên những thiết bị có device-pixel-ratio khác nhau, ta có thể ra lệnh cho trình duyệt sử dụng những ảnh khác nhau bằng cách sử dụng thuộc tính srcset của phần tử img. Thuộc tính src vẫn được sử dụng nhưng khai báo ảnh sử dụng khi device-pixel-ratio là 1x.

<img
  src="/images/turkey-200px.jpg" alt=""
  srcset="/images/turkey-400px.jpg 2x,
          /images/turkey-600px.jpg 3x" >

Các giá trị 1x, 2x,… được gọi là “x-descriptor”. Ta đặt x-descriptor ngay sau đường dẫn tới ảnh, mỗi ảnh có một x-descriptor tương ứng, nhiều ảnh phân cách nhau bằng dấu phảy.

Khi nào sử dụng x-descriptor?

x-selector dùng cho những ảnh có kích thước hiển thị không đổi, như các logo, ảnh đại diện bài viết, hay ảnh có kích thước cố định…

Hiển thị ảnh trên các màn hình có kích thước khác nhau

Khi thiết kế, bạn muốn thay đổi kích thước ảnh cho phù hợp với kích thước của viewport (vùng hiển thị trang web của trình duyệt). Để thực hiện bạn sử dụng thuộc tính srcset như sau:

<img src="strawberries-640.jpg"
     alt="baskets of ripe strawberries"
     srcset="strawberries-480.jpg 480w,
             strawberries-960.jpg 960w,
             strawberries-1280.jpg 1280w,
             strawberries-2400.jpg 2400w">

Các giá trị 480w, 960w,… được gọi là w-descriptor (width descriptor) khai báo cho trình duyệt biết độ rộng thực tế của mỗi ảnh (tính theo pixel).

Tuy nhiên khi bạn sử dụng w-descriptor bạn phải sử dụng cùng với thuộc tính sizes. Đây là một ví dụ:

<img src="strawberries-640.jpg"
     alt="baskets of ripe strawberries"
     srcset="strawberries-480.jpg 480w,
             strawberries-960.jpg 960w,
             strawberries-1280.jpg 1280w,
             strawberries-2400.jpg 2400w"
     sizes="100vw">

Giá trị 100vw nói cho trình duyệt biết rằng ảnh sẽ chiếm 100% độ rộng viewport. Đơn vị vw là viết tắt của “viewport width”, 100vw tương ứng với 100% độ rộng viewport, giá trị 50vw sẽ là 50% độ rộng viewport… Ngoài đơn vị vw có thể sử dụng em, px… nhưng không được sử dụng giá trị phần trăm.

Thuộc tính src được dùng trong những trường hợp trình duyệt không hỗ trợ srcset và sizes.

Nếu trình duyệt hỗ trợ srcset và sizes, nó sẽ tự động phát hiện độ rộng của viewport và chọn ảnh có độ rộng thích hợp nhất dựa theo khai báo w-descriptor. Khi hiển thị ảnh tự động được điều chỉnh kích thước để chiếm trọn độ rộng viewport (do sizes="100vw").

Thuộc tính sizes có thể tùy chỉnh được nhiều hơn. Bạn có thể sử dụng sizes để xác định độ rộng của ảnh so với độ rộng của viewport ứng với mỗi kích thước viewport khác nhau.

Chẳng hạn:

<img src="strawberries-640.jpg"
     alt="baskets of ripe strawberries"
     srcset="strawberries-240.jpg 240w,
             strawberries-480.jpg 480w,
             strawberries-672.jpg 672w"
     sizes="(max-width: 480px) 100vw,
            (max-width: 960px) 70vw,
            240px">

Thuộc tính sizes nói cho trình duyệt biết những điều sau:

  • Nếu viewport có độ rộng nhỏ hơn hoặc bằng 480px độ rộng ảnh bằng độ rộng viewport.

  • Nếu viewport có độ rộng lớn hơn 480px nhỏ hơn hoặc bằng 960px độ rộng ảnh bằng 70% độ rộng viewport.

  • Nếu viewport có độ rộng lớn hơn 960px ảnh có độ rộng cố định là 240px.

Một lần nữa chú ý rằng, trình duyệt biết độ rộng viewport và biết cả độ rộng thực tế của các ảnh khai báo trong srcset nhờ các w-descriptor. Từ đó nó biết chọn ảnh thích hợp nhất.

max-width: 480px hay max-width: 960px được gọi là các “media condition” có cú pháp tổng quát như sau:

media-feature: condition

Hiển thị ảnh trên màn hình có hướng khác nhau

Trên máy tính, hướng hiển thị của màn hình thường là nằm ngang, trong khi với điện thoại hướng hiển thị thường là hướng dọc. Ảnh hiển thị trên màn hình hướng ngang, thường là các ảnh có chiều rộng lớn hơn chiều cao, trong khi ảnh hiển thị trên màn hình hướng dọc, là ảnh có chiều cao lớn hơn chiều rộng.

Như vậy tùy theo hướng của màn hình, ta cần cung cấp cho trình duyệt các ảnh khác nhau.

Ở hai phần trên, ta cung cấp cho trình duyệt cùng một ảnh, nhưng với các độ phân giải và kích thước khác nhau.

Khi cần cung cấp cho trình duyệt các ảnh hoàn toàn khác nhau, dựa trên kích thước viewport, ta có thể sử dụng phần tử picture.

picture là một phần tử bao lấy các phần tử source và img. Phần tử img bắt buộc phải có và nằm cuối cùng trong picture.

<picture>
  <source media="(min-width: 1024px)" srcset="icecream-large.jpg">
  <source media="(min-width: 760px)" srcset="icecream-medium.jpg">
  <img src="icecream-small.jpg" alt="hand holding ice cream cone and text that reads Savor the Summer">
</picture>

Nó nói cho trình duyệt biết rằng:

  • Nếu độ rộng viewport lớn hơn hoặc bằng 1024px thì sử dụng ảnh icecream-large.jpg.

  • Nếu độ rộng viewport lớn hoăn hoặc bằng 760px nhỏ hơn 1024px thì sử dụng ảnh icecream-medium.jpg.

  • Nếu độ rộng viewport nhỏ hơn 760px thì sử dụng ảnh icecream-small.jpg.

Cung cấp định dạng ảnh thay thế

<picture>
  <source type="image/webp" srcset="pizza.webp">
  <source type="image/jxr" srcset="pizza.jxr">
  <img src="pizza.jpg" alt="">
</picture>

Nếu trình duyệt hỗ trợ ảnh webp thì pizza.webp được dùng. Nếu không và trình duyệt hỗ trợ ảnh jxr thì pizza.jxr được dùng. Nếu trình duyệt không hỗ trợ webp và jxr thì sử dụng pizza.jpg.

Giá trị của thuộc tính type là các MIME type, để biết thêm về các MIME type hợp lệ bạn có thể truy cập www.iana.org/assignments/media-types.