Web front-end (13) - HTML - Hình ảnh_img

Bài trước: Web front-end (12) - HTML - Liên kết trang web_3

-----

1.1       Hình ảnh

Khi mới xuất hiện (năm 1991), nội dung trang web chỉ toàn là văn bản. Bạn thử tưởng tượng, nếu trang web hiện tại cũng chỉ toàn văn bản, thì sẽ tẻ nhạt tới mức nào!

Trong phần này, chúng ta sẽ học cách để thêm hình ảnh cho trang web. Để thêm hình ảnh, bạn có 2 cách. Một là, bạn xem nó như là nội dung thông thường và sẽ dùng phần tử img để thêm. Hai là, bạn có thể chèn hình ảnh theo kiểu hình nền (background), cách này sẽ học ở phần CSS.

Trong trang web, hình ảnh được dùng để hiển thị các ảnh của sản phẩm, bộ sưu tập ảnh, các hình minh họa, các ảnh quảng cáo.

1.1.1       Phần tử img

Để chèn hình ảnh, cách đơn giản nhất là sử dụng phần tử img. Img là viết tắt của image (hình ảnh).

Chúng ta không thể thêm mọi loại ảnh cho trang web, mà chỉ thêm được các loại mà trình duyệt có hỗ trợ. Với các loại ảnh phổ biến như GIF, JPEG, PNG (tập tin ảnh có phần mở rộng tương ứng là .gif, .jpg (hoặc .jpeg), và .png) thì bạn có thể yên tâm sử dụng. Các định dạng WebP (.webp) và JPEG-XR (.jxr) cũng đang được các trình duyệt hỗ trợ ngày càng nhiều.

SVG là định dạng ảnh kiểu vector, nó được dùng để hiển thị các biểu tượng (icon) hoặc hình minh họa (illustration). Trong phần sau, chúng ta sẽ tìm hiểu kĩ hơn về nó.

Với các hình ảnh có định dạng khác, như TIFF, BMP hoặc EPS thì cần chuyển về định dạng mà trình duyệt chấp nhận. Nếu buộc phải giữ hình ảnh ở định dạng gốc, thì chúng ta sẽ tạo một liên kết trực tiếp tới hình ảnh, khi đó, trình duyệt sẽ gọi chương trình phù hợp để mở, hoặc sẽ yêu cầu người dùng tải hình ảnh về máy. Ví dụ, <a href="architecture.eps">Get the drawing</a>.

 

Nhắc lại một chút, tập tin mã nguồn của trang web (hay tài liệu HTML) chỉ là văn bản thô (plain text), nên nó không thể chứa hình ảnh. Chức năng của phần tử img chỉ là báo cho trình duyệt biết: “sẽ tải và hiển thị hình ảnh ở đây”.

Ví dụ sau sẽ chèn một hình ảnh nằm cùng hàng với văn bản,

<p>Đây là chú vịt trống và vịt mái, mà người ta hay gọi là đôi uyên-ương <img src="con-vit.png" alt="hai chú vịt"></p>

Khi trình duyệt dịch mã nguồn tới phần tử img, nó sẽ gửi một yêu cầu (request) tới server để tải hình ảnh về, sau đó sẽ hiển thị. Cần lưu ý đặc điểm này, vì nó ảnh hưởng rất nhiều đến tốc độ tải và hiển thị nội dung của cả trang web. Cụ thể là cần để ý đến số lượng, kích thước và thời điểm tải các hình ảnh của trang web về trình duyệt.

Một số ý quan trọng liên quan đến phần tử img:

– Hai thuộc tính srcalt là bắt buộc phải có (required). Src là viết tắt của source (nguồn), cho biết vị trí của tập tin hình ảnh; alt là viết tắt của alternative (lựa chọn thay thế), chứa văn bản mô tả cho hình ảnh.

Img là phần tử rỗng, chỉ có thẻ mở mà không có thẻ đóng. Muốn hiển thị hình ảnh ở chỗ nào thì đặt phần tử img ở đó

Img là phần tử inline, vì vậy hình ảnh sẽ được đặt trên cùng hàng với văn bản. Khi thay đổi kích thước màn hình giao diện, hình ảnh cùng với văn bản cũng sẽ bị sắp xếp lại cho hợp với kích thước cửa sổ.

Img được gọi là phần tử bị thay thế (replaced element), nghĩa là khi trình duyệt dịch mã nguồn và thực thi, phần tử này sẽ bị thay thế bằng một tập tin ảnh được tải từ nơi khác về. Điều này khác với các phần tử văn bản, là các phần tử không bị thay thế (non-replaced element)

– Mặc định, khi hiển thị, cạnh dưới của hình ảnh sẽ nằm trên đường cơ sở (baseline) của hàng văn bản. Để điều chỉnh cách hiển thị hình ảnh, chúng ta cần sử dụng đến CSS.

Thuộc tính src

Giá trị của thuộc tính src chính là URL (địa chỉ) của tập tin hình ảnh. Đa số các hình ảnh của trang web được lưu tại server. Vì vậy, chúng ta sẽ sử dụng URL tương đối để trỏ tới vị trí của hình ảnh. Xem lại phần Liên kết trang web, để rõ hơn về cách sử dụng URL tương đối.

Ví dụ, nếu tập tin hình ảnh ở cùng thư mục với tài liệu HTML, thì thuộc tính src sẽ có dạng như sau:

<img src="hinh-anh.png" alt="hình ảnh">

Thông thường, hình ảnh của một website sẽ được để trong một thư mục, ví dụ là images, assets, hoặc graphics. Tùy theo độ lớn của website, có thể có nhiều thư mục để chứa hình ảnh tương ứng với mỗi thành phần/chức năng của website. Khi đó, để trỏ tới vị trí của hình ảnh cần sử dụng đến đường dẫn tập tin (pathname). Ví dụ,

<img src="/images/hinh-anh.png" alt="hình ảnh">

Nếu hình ảnh nằm ở website khác, chúng ta cần sử dụng đường dẫn tuyệt đối để trỏ tới tập tin hình ảnh (phải đảm bảo là có quyền truy cập hình ảnh). Ví dụ,

<img src="http://www.vidu.com/images/hinh-anh.png" alt="hình ảnh">

 

Tận dụng cơ chế cache (lưu sẵn) để tăng tốc độ hiển thị hình ảnh

Trình duyệt có cơ chế cache các hình ảnh. Cụ thể, khi trình duyệt tải một hình ảnh từ server về máy người dùng, nó sẽ lưu tạm hình ảnh đó vào đĩa cứng. Mục đích là để sau đó nếu người dùng mở lại trang web, thì các hình ảnh sẽ được lấy từ đĩa cứng, thay vì phải tải lại từ server.

Như vậy, nếu cùng một hình ảnh mà được sử dụng ở nhiều nơi trên trang web/website thì chỉ cần tải hình ảnh về một lần. Các lần hiển thị sau, trình duyệt sẽ lấy hình ảnh đó từ đĩa cứng. Kết quả là, tốc độ hiển thị hình ảnh sẽ nhanh hơn và giảm được lưu lượng truyền dữ liệu giữa máy người dùng và server.

Lưu ý, trình duyệt sẽ nhận diện một hình ảnh dựa vào tên và đường dẫn tập tin. Do đó, hai hình ảnh được hiểu là một, khi chúng có tên và đường dẫn giống nhau. Vì vậy, trong một website, bạn không nên để cùng một hình ảnh ở nhiều thư mục khác nhau.

Thuộc tính alt

Alt là thuộc tính bắt buộc phải có trong phần tử img. Alt là viết tắt của Alternative, có nghĩa là "lựa chọn thay thế". Đầy đủ thì sẽ là “alternative text” (văn bản thay thế). Nó chứa thông tin mô tả vắn tắt của hình ảnh. Thông thường, các đối tượng không thấy được hình ảnh sẽ sử dụng thông tin này, ví dụ người dùng khiếm thị, chương trình đọc màn hình (screen reader), các thiết bị di động màn hình nhỏ, hoặc khi trình duyệt không tìm thấy hình ảnh.

Ví dụ, từ đoạn mã HTML sau,

<p>If you're <img src="happyface.gif" alt="happy"> and you know it clap

your hands.</p>

Chương trình đọc màn hình sẽ nhận diện ra hình ảnh bằng thuộc tính alt như sau:

“If you’re happy and you know it clap your hands.”

Một số tình huống sử dụng thuộc tính alt,

– Nếu hình ảnh chứa thông tin, thì giá trị của alt sẽ là mô tả ngắn gọn thông tin đó.

– Nếu hình ảnh nằm trong phần tử a, thì giá trị của alt sẽ cho biết liên kết (link) này sẽ dẫn tới đâu. Ví dụ: bạn tạo một liên kết cho hình ảnh, là hình bìa của cuốn sách; tuy nhiên, liên kết này muốn dẫn người dùng tới một website; khi đó, nội dung của alt sẽ chứa thông tin về website chứ không phải mô tả cái bìa sách.

 <a href="http://learningwebdesign.com"><img src="/images/LWD_cover.png"

alt="Learning Web Design site"></a>

– Nếu chỉ là hình ảnh trang trí/logo, thì giá trị của alt nên để trống (alt=“”), mặc dù alt mang giá trị trống, nhưng vẫn phải có, vì nếu không, đoạn mã sẽ bị chương trình validator báo lỗi.

Thuộc tính alt cũng rất hữu ích trong trường hợp hình ảnh không thể hiển thị trên giao diện, nhờ có nội dung của alt mà người sử dụng biết được hình ảnh đang bị thiếu là gì.

Ví dụ,

<img src="con-vit.jpg" alt="con vịt">

[Kết quả]                     

Nếu trình duyệt không thể hiển thị con-vit.jpg, thì trên cửa sổ giao diện sẽ có dòng chữ “con vịt” thay thế.

Đơn vị đo kích thước ảnh

Đơn vị để đo kích thước ảnh có thể là px hoặc phần trăm (%). Với HTML5 thì đơn vị để đo kích thước bắt buộc là px. px là viết tắt của pixel, pixel là viết tắt của picture element (phần tử ảnh).

Ví dụ,

<img src="/images/hinh-anh.jpg" alt="Hình ảnh" width="100" height="150">

[Kết quả]

Hình ảnh sẽ được hiển thị ở kích thước 100 x150 pixel.

Thiết lập sẵn kích thước cho ảnh

Chúng ta có thể cố định luôn kích thước của hình ảnh trên giao diện, bằng hai thuộc tính là width (chiều rộng) và height (chiều cao). Khi tải trang web về máy, trình duyệt sẽ dựa trên kích thước này để dành sẵn khoảng trống cho hình ảnh, chứ không phải tổ chức lại trang mỗi khi tải xong một hình ảnh. Theo cách này, kích thước của hình ảnh trên giao diện luôn là cố định. Nó giúp tăng đáng kể tốc độ hiển thị trang web, vì bố cục của trang web đã được định hình sẵn, không phải điều chỉnh lại trong quá trình tải và hiển thị nội dung. Nếu bạn chỉ cung cấp một trong hai kích thước (chiều rộng, hoặc chiều cao), hệ thống sẽ tự động tính kích thước còn lại, sao cho hình ảnh được cân đối.

Tuy nhiên, hiện nay, hai thuộc tính này không còn nhiều hữu ích nữa. Với xu hướng sử dụng nhiều loại thiết bị, có kích thước màn hình khác nhau để duyệt web, dẫn tới cần phải có một giao diện linh hoạt, có thể tùy chỉnh theo kích thước màn hình (kĩ thuật này gọi là responsive). Cụ thể, với mỗi hình ảnh, người ta sẽ chuẩn bị sẵn các kích thước khác nhau, với màn hình nhỏ sẽ sử dụng hình ảnh kích thước nhỏ; với màn hình lớn sẽ sử dụng hình ảnh có kích thước lớn. Ngoài ra, chúng ta cũng sẽ sử dụng CSS để thay đổi kích thước hình ảnh.

Hai thuộc tính này chỉ hữu ích với các hình ảnh mà kích thước luôn cố định trên mọi loại thiết bị như là logo hoặc các biểu tượng. Chúng ta cũng phải để ý khi thiết lập giá trị cho width và height, để đảm bảo: kích thước ảnh thật và giá trị width/height phải bằng nhau, nghĩa là chiều rộng của ảnh thật sẽ bằng giá trị của width, và chiều cao của ảnh thật sẽ bằng giá trị của height. Nếu không:

– Nếu kích thước ảnh thật nhỏ hơn giá trị width/height, hình ảnh sẽ bị mờ, méo mó.

– Nếu kích thước ảnh thật lớn hơn giá trị width/height, trình duyệt sẽ mất nhiều thời gian hơn để tải hình ảnh từ server

Bạn có thể sử dụng các ứng dụng chỉnh sửa ảnh, để thay đổi kích thước của hình ảnh cho khớp với với kích thước đã được thiết lập trên giao diện.

Thêm chú thích cho ảnh

Trong một bài viết, đôi khi chúng ta cần phải chèn thêm các hình ảnh minh họa. Đi kèm mỗi hình ảnh là thông tin chú thích. Để làm việc này, bạn sẽ sử dụng phần tử figure, bên trong nó là 2 phần tử img và figcaption. Ví dụ:

 <figure>

                        <img src="HTML-structure.png" alt="HTML document structure">

                        <figcaption>

                                    Cấu trúc một tài liệu HTML

                        </figcaption>

            </figure>

-----

-----

Cập nhật: 11/5/2024
-----

Tải tài liệu đầy đủ: Tự học HTML căn bản