Cho dù bạn có đang tìm hiểu cách thiết kế và phát triển cho web đến đâu, chúng ta cần giới thiệu rất ít về phần tử <img>.
Ra mắt trong Netscape (“hiển thị” vào thời điểm đó) vào năm 1993 và được thêm vào thông số kỹ thuật HTML năm 1995, <img> từ lâu đã đóng một vai trò đơn giản nhưng mạnh mẽ trong nền tảng web. Nhà phát triển sẽ thêm tệp hình ảnh "nguồn" có thuộc tính src và cung cấp phương án thay thế văn bản bằng thuộc tính alt trong trường hợp không thể kết xuất hình ảnh hoặc công nghệ hỗ trợ yêu cầu phương án thay thế. Từ đó, trình duyệt chỉ có một công việc: lấy dữ liệu hình ảnh, sau đó kết xuất hình ảnh nhanh nhất có thể.
Đối với hầu hết lịch sử phát triển web, việc xử lý hình ảnh không phức tạp hơn thế. Mặc dù phức tạp như web hiện đại, các nguyên tắc cơ bản khi làm việc với hình ảnh vẫn không thay đổi: sử dụng định dạng hình ảnh thân thiện với web để có khả năng tương thích, nén hợp lý để tiết kiệm băng thông và kích thước phù hợp với không gian hình ảnh sẽ chiếm trong bố cục của trang.
Khi sử dụng bố cục có chiều rộng cố định, như cách chúng tôi vẫn muốn thể hiện nhiều hơn về cách người dùng trải nghiệm web, thì việc này khiến việc này trở thành một quy trình không phức tạp. Việc đặt kích thước của nguồn hình ảnh đặc biệt dễ dàng. Đối với một hình ảnh chiếm một không gian rộng 500 pixel và cao 300 pixel, trường hợp này là trường hợp chỉ định hình ảnh nguồn có cùng kích thước đó.
Hình ảnh trong bố cục thích ứng
Bên cạnh bố cục linh hoạt và việc sử dụng các truy vấn phương tiện truyền thông CSS, "hình ảnh và nội dung nghe nhìn linh hoạt" là một trong 3 khía cạnh xác định của thiết kế web thích ứng. Để làm cho hình ảnh linh hoạt, các nhà phát triển đã bắt đầu sử dụng CSS để đặt max-width: 100% trên hình ảnh (hoặc tất cả hình ảnh, trên toàn trang web) nhằm yêu cầu công cụ kết xuất của trình duyệt ngăn hình ảnh vượt quá vùng chứa gốc bằng cách giảm tỷ lệ. Rõ ràng, giải pháp này hoạt động hoàn hảo khi giảm quy mô hình ảnh đường quét một cách liền mạch về mặt hình ảnh. Với một hoặc hai dòng CSS, hình ảnh thu nhỏ sẽ luôn trông giống như chúng ta đã chỉ định nguồn hình ảnh sẽ được hiển thị ở kích thước đó.
Khi công cụ kết xuất được cung cấp nhiều dữ liệu hình ảnh hơn mức cần thiết cho không gian mà hình ảnh chiếm trong một bố cục, chúng có thể đưa ra quyết định sáng suốt về cách hiển thị hình ảnh đã thu nhỏ, và có thể làm như vậy mà không cần làm mờ hoặc làm mờ hình ảnh.
Thường thì bạn không muốn tăng tỷ lệ hình ảnh, nghĩa là hiển thị <img> ở kích thước lớn hơn kích thước nội tại của hình ảnh nguồn.
Hình ảnh được hiển thị sẽ bị mờ và trông sần sùi.
Việc sử dụng img { max-width: 100% } có nghĩa là khi vùng chứa linh hoạt đổi kích thước, hình ảnh sẽ được giảm kích thước theo tỷ lệ phù hợp.
Không giống như việc thiết lập một width: 100% cố định hơn, thao tác này cũng đảm bảo hình ảnh không bị tăng kích thước vượt quá kích thước nội tại của nó.
Từ lâu, đó đã trở thành quy tắc làm việc với hình ảnh: sử dụng một định dạng mà trình duyệt có thể hiểu, sử dụng mức độ nén hợp lý và không bao giờ tăng tỷ lệ hình ảnh lên trên.
Tuy đơn giản và hiệu quả như cách tiếp cận trực quan, nhưng chi phí hiệu suất là rất lớn. Vì <img> chỉ hỗ trợ một nguồn duy nhất cho dữ liệu hình ảnh, nên phương pháp này yêu cầu chúng tôi cung cấp thành phần hình ảnh có kích thước nội tại lớn bằng kích thước lớn nhất mà nó có thể hiển thị. Hình ảnh nhằm chiếm một không gian trong một bố cục có thể ở bất kỳ vị trí nào rộng từ 300px đến 2000px, tuỳ thuộc vào kích thước khung nhìn của người dùng, cần phải có một nguồn hình ảnh có chiều rộng nội tại tối thiểu là 2000px. Đối với người dùng chỉ xem trang khi nhìn qua một khung nhìn nhỏ, mọi thứ sẽ trông như mong đợi — hình ảnh sẽ hiển thị đúng tỷ lệ. Trong trang được kết xuất, hình ảnh nguồn lớn nhưng được thu nhỏ sẽ trông không khác với hình ảnh
có kích thước phù hợp. Tuy nhiên, các trình xử lý đó vẫn sẽ truyền và kết xuất hình ảnh rộng 2000px, đốt cháy một lượng lớn băng thông và năng lượng xử lý mà không mang lại lợi ích rõ ràng.
Mọi thứ trở nên tệ hơn nhiều khi các thiết bị "Retina" đầu tiên ra đời, vì mật độ hiển thị trở thành mối lo ngại bên cạnh kích thước khung nhìn. Nguồn hình ảnh cần chiều rộng nội tại lớn hơn nhiều để phù hợp với màn hình có mật độ hiển thị cao. Nói một cách đơn giản, màn hình có mật độ gấp đôi cần số pixel hình ảnh gấp đôi để hiển thị hình ảnh sắc nét nhất có thể.
Tại đây, các nhà phát triển lại có thể dựa vào khả năng thu nhỏ hình ảnh của công cụ kết xuất hình ảnh một lần nữa. Bằng cách cung cấp cho trình duyệt
một hình ảnh nguồn rộng 800px trong src, sau đó chỉ định rằng hình ảnh đó nên hiển thị ở chiều rộng 400px bằng CSS, kết quả là một hình ảnh
được hiển thị với mật độ pixel gấp đôi:
Tất nhiên, một hình ảnh nguồn duy nhất, được cắt cho phù hợp với không gian lớn nhất có thể trong bố cục của bạn và màn hình mật độ cao, sẽ phù hợp với tất cả người dùng trực quan. Một nguồn hình ảnh khổng lồ, có độ phân giải cao được hiển thị trên màn hình nhỏ, có mật độ mật độ thấp sẽ trông giống như bất kỳ hình ảnh nhỏ, có mật độ thấp nào khác, nhưng cảm thấy chậm hơn nhiều. Người dùng sẽ phải chịu toàn bộ chi phí hiệu suất của nguồn hình ảnh khổng lồ, rộng 4000px mà không được hưởng lợi ích gì.
Trong một thời gian dài, <img> chủ yếu đã làm một việc: "lấy dữ liệu hình ảnh và đưa lên màn hình". Tất nhiên là nó hoạt động khá tốt, nhưng <img> không phải là một nhiệm vụ thích ứng với những thay đổi lớn về bối cảnh duyệt web mà chúng tôi đang gặp phải. Mặc dù thiết kế web thích ứng đã trở thành một phương pháp phát triển chính thống, nhưng các trình duyệt đã tối ưu hoá hiệu suất của img trong gần 20 năm. Tuy nhiên, đối với tất cả ngoại trừ người dùng có đặc quyền cao nhất, nội dung hình ảnh của các trang không hiệu quả ngay từ đầu. Cho dù trình duyệt có thể yêu cầu, phân tích cú pháp và hiển thị một nguồn hình ảnh nhanh đến mức nào, thành phần đó có thể sẽ lớn hơn nhiều so với mức độ mà người dùng cần.