Có một số điều cần lưu ý khi phục vụ hình ảnh cho người xem.
- Giữ tỷ lệ hình ảnh giống với kích thước ban đầu
Chúng tôi làm điều này để ngăn hình ảnh bị lệch và để hình ảnh không bị mờ. Chúng tôi có thể giữ tỷ lệ kích thước giống nhau hoặc cắt bớt các phần không phù hợp.
Khi sử dụng một <img>yếu tố hoặc một cái gì đó tương tự, điều này khá đơn giản, nó chỉ yêu cầu sử dụng một bộ widthhoặc heightOR set max-widthhoặc max-height.
Tuy nhiên, trong trường hợp hình ảnh chiều rộng khung nhìn đầy đủ thì điều này phức tạp hơn một chút. Có một số cách CSS để làm điều đó , cách tốt nhất background-size:covergiống như ví dụ được liên kết đầu tiên trong bài viết và chương trình trả lời của Talkingrock .
Ngoài ra, giờ đây chúng tôi có khả năng sử dụng các tính năng được tìm thấy trong đặc tả hình ảnh phản hồi bao gồm srcsetvà thành <picture>phần, khá hữu ích. Tôi nói về điều này nhiều hơn sau này trong câu trả lời này.
- Chỉ cung cấp cho người xem hình ảnh họ cần
Để tải trang nhanh hơn và ngăn người dùng cần truyền thêm dữ liệu, điều cực kỳ quan trọng là chỉ phục vụ người dùng cuối hình ảnh mà họ cần, khi họ cần. Điều này có nghĩa là chúng tôi cung cấp cho họ một hình ảnh có cùng kích thước hoặc chỉ lớn hơn một chút so với hình ảnh mà họ đang sử dụng và chờ để tải hình ảnh sẽ không được nhìn thấy ngay lập tức cho đến sau khi tải trang ban đầu.
Chúng tôi có thể phân phát hình ảnh có kích thước phù hợp hơn bằng CSS bằng cách sử dụng @mediatruy vấn khi chúng tôi sử dụng hình nền. Các hình ảnh không có trong truy vấn phương tiện đang được sử dụng không được tải . Tôi khuyên bạn nên sử dụng ít nhất ba kích cỡ ảnh (có nghĩa là ít nhất 3 truy vấn phương tiện), nhưng có thêm một vài kích thước có thể là hiệu suất khôn ngoan. Dưới đây là một ví dụ, nhưng nó thường trùng với một số điểm dừng chung cho bố cục trang web của bạn.
@media (max-width: 320px) { /* For phones (this breakpoint is the one I'm least sure about) */
... background-image(imageURLforPhones.png); ...
}
@media (min-width:501px) and (max-width: 1024px) { /* For tablets and such */
... background-image(imageURLforTablets.png); ...
}
@media (min-width: 1025px) { /* For large screens */
... background-image(imageURLforLargeScreens.png); ...
}
Nhưng, hãy đối mặt với điều đó: chúng ta không giỏi trong việc chọn điểm dừng và chúng ta cũng không hoàn hảo trong việc chọn kích thước hình ảnh với một kích thước màn hình nhất định. Sẽ không tuyệt sao nếu chúng ta có thể để thứ gì đó làm điều này 'kỳ diệu' cho chúng ta?
Tin tuyệt vời là bây giờ chúng ta có thể !
Với đặc tả hình ảnh phản hồi, chúng tôi có thể để trình duyệt quyết định tất cả điều này cho chúng tôi, miễn là chúng tôi giúp nó một chút. srcsetThuộc tính hữu ích như vậy có thể được sử dụng với một <img>hoặc một <picture>phần tử. Để chuyển đổi độ phân giải như chúng ta đang làm ở đây, chúng ta nên sử dụng một <img>yếu tố.
Sau đây là một ví dụ về HTML cần thiết để cho phép srcsetthực hiện công việc của mình. Để biết thêm, bạn có thể đọc bài viết tuyệt vời của Yoav Weiss về chủ đề này. Ví dụ được lấy từ nó.
<img src="cat_500px.jpg"
srcset="cat_750px.jpg 1.5x, cat_1000px.jpg 2x"
width="500" alt="lolcat">
Lưu ý bên lề: Nếu bạn cần phân phát cùng một hình ảnh với các kích thước khác nhau ở các kích thước khung nhìn nhất định, bạn có thể sử dụng sizesthuộc tính.
Tôi không nói rằng việc sử dụng srcsetnhất thiết phải tốt hơn sử dụng hình nền CSS, tôi đã không thực hiện đủ công việc với nó để nói như vậy chắc chắn, nhưng nó có khả năng là một cách tốt hơn.
Ngoài ra, để giúp hiệu suất, chúng tôi có thể "tải lười biếng" những hình ảnh không thể nhìn thấy ban đầu. Điều này có nghĩa là chúng tôi ngăn chúng tải ban đầu nhưng bắt đầu tải chúng ngay khi trang ban đầu tải xong. Bằng cách đó, chúng tôi có thể khiến người xem thấy trang càng sớm càng tốt và điền vào một số chi tiết sau. Đây là một cách để làm điều đó, tôi sẽ không đi sâu vào chi tiết ngay bây giờ.
- Đảm bảo rằng nội dung trong hình ảnh bạn muốn hiển thị được hiển thị
Nếu chúng ta có kích thước chính xác và hiệu suất tuyệt vời thì thật tuyệt vời, nhưng nếu người xem không thấy những gì chúng ta muốn họ thấy thì không có điểm nào. Nếu chúng ta luôn hiển thị hình ảnh hoàn toàn thì đây không phải là vấn đề, nhưng nếu chúng ta phải cắt hình ảnh thì đây có thể là một vấn đề.
Chúng ta có thể cắt xén background-imagebằng cách sử dụng CSS bằng cách sử dụng background-sizevà background-position(và loại sử dụng clip, nhưng thường được sử dụng cho các hình dạng phức tạp, nghệ thuật hơn). Các chi tiết chính xác của điều này sẽ thay đổi từ hình ảnh sang hình ảnh tùy thuộc vào cách nó được thực hiện.
Tùy chọn thứ hai là sử dụng <picture>phần tử. Chúng tôi sử dụng điều này khi chúng tôi chỉ muốn một phần của hình ảnh hiển thị, như đã thấy ở đây , nhưng đây là một ví dụ đơn giản về nó trong thực tế (lấy từ bài viết tuyệt vời của Jason Grigsby về chủ đề này).
<picture>
<source media="(min-width: 45em)" srcset="large.jpg">
<source media="(min-width: 32em)" srcset="med.jpg">
<img src="small.jpg" alt="The president giving an award.">
</picture>
Tôi muốn nhắc lại, nếu bạn chỉ cần thực hiện chuyển đổi độ phân giải, đừng sử dụng <picture>phần tử , chỉ cần sử dụng <img>phần tử với srcset. Lần duy nhất chúng ta cần <picture>yếu tố là cho hướng nghệ thuật này, nghĩa là cắt, v.v.
Ngoài ra còn có khả năng thực hiện một số phía máy chủ cắt xén, sử dụng mặt nạ SVG hoặc thực hiện một số nội dung với Canvas, nhưng đó là một chút nằm ngoài phạm vi của câu trả lời này.
Một số lưu ý khác
Điểm dừng cụ thể không quan trọng. Như với tất cả các thiết kế đáp ứng, điều quan trọng là phải làm tốt nhất có thể cho tất cả các chế độ xem, nhưng không có truy vấn phương tiện nào sẽ hoàn hảo cho tất cả các trang web.
Thời gian tải trang là rất quan trọng và hình ảnh có thể làm chậm rất nhiều thời gian tải ban đầu. Hãy chắc chắn rằng bạn tải hình ảnh sẽ được nhìn thấy ngay lập tức đầu tiên, sau đó những người khác. Cố gắng ngăn hình ảnh (như JPEG) hiển thị một phần của hình ảnh trong khi nó tải phần còn lại. Đồng thời tối ưu hóa tất cả các hình ảnh của bạn để chúng có kích thước tệp nhỏ nhất có thể trong khi vẫn có số lượng chất lượng bạn yêu cầu.
Điều quan trọng cần nhớ là hình ảnh, trong hầu hết các trường hợp, phải là một phụ kiện, không phải là một điều cần thiết. Tôi khuyên bạn nên luôn kiểm tra xem trang web trông như thế nào mà không có hình ảnh để đảm bảo nó có thể sử dụng được.
Lưu ý : Chúng tôi có thể sử dụng một polyfill có tên là Picturefill để phục vụ các trình duyệt cũ không hỗ trợ đặc tả hình ảnh phản hồi.
