Thiết kế đáp ứng yêu cầu sự cân bằng giữa hiệu suất và tính linh hoạt—cung cấp hình ảnh có kích thước chính xác và được tối ưu hóa cho tất cả các thiết bị có thể không có nghĩa là thời gian tải chậm.  Do có nhiều phương pháp để triển khai thiết kế đáp ứng, điều quan trọng là phải hiểu phương pháp nào hoạt động tốt nhất cho các trường hợp sử dụng khác nhau.  Trong hướng dẫn này, chúng ta sẽ xem xét thời điểm sử dụng phần tử   và cách triển khai phần tử này hiệu quả nhất với imgix. <picture>  Chỉ đạo nghệ thuật so với chuyển đổi độ phân giải  Hình ảnh đáp ứng thường được sử dụng để giải quyết một trong hai vấn đề: nhu cầu sửa đổi hình ảnh để phù hợp với thiết kế thay đổi tùy thuộc vào thiết bị (hướng nghệ thuật) hoặc nhu cầu   (chuyển đổi độ phân giải). điều chỉnh độ phân giải của hình ảnh cho thiết bị  Về mặt triển khai, đó là sự lựa chọn giữa việc cung cấp cho trình duyệt đủ thông tin để quyết định phiên bản hình ảnh nào sẽ sử dụng hoặc ra lệnh trực tiếp cho nó.  Phần tử   được sử dụng tốt nhất cho trường hợp sử dụng hướng nghệ thuật vì những thay đổi được yêu cầu có thể sẽ bao gồm thay đổi tỷ lệ khung hình, cắt xén hình ảnh theo cách khác và các khía cạnh thiết kế khác phức tạp hơn là chỉ cung cấp hình ảnh có độ phân giải cao hơn. <picture>  Trong trường hợp này, bạn muốn ra lệnh trực tiếp cho trình duyệt, bất chấp khả năng ảnh hưởng đến hiệu suất.  Sử dụng imgix và   cho Art Direction <picture>  imgix có hai lợi ích chính khi sử dụng phần tử   . Đầu tiên, nó loại bỏ nhu cầu duy trì các bản sao riêng biệt, được xử lý trước của hình ảnh cho từng kích thước khung nhìn. Áp dụng bất kỳ tham số nào cần thiết để điều chỉnh kích thước, cắt xén và tỷ lệ pixel của thiết bị. <picture>  Thứ hai, nó giúp giảm thiểu hiệu suất bị ảnh hưởng bằng cách tối ưu hóa hình ảnh và lưu vào bộ nhớ đệm tất cả các phiên bản khác nhau được yêu cầu.    Phần tử     đối với một số trình duyệt cũ. Bạn có thể sử dụng   để thêm hỗ trợ cho những khách hàng đó. Lưu ý: <picture> không khả dụng Picturefill  Hãy xem làm thế nào tất cả điều này phù hợp với nhau. Chúng tôi sẽ bắt đầu với một hình ảnh theo hướng ngang, sau đó cung cấp các tham số khác nhau để hiển thị phần có ý nghĩa nhất của hình ảnh cho các thiết bị khác nhau có thể có hướng khác.     Nhấp vào hình ảnh để xem thay đổi chế độ xem ở kích thước đầy đủ   <picture> <source srcset="https://assets.imgix.net/blog/unsplash-kiss.jpg?w=1280" media="(min-width: 1280px)" > <source srcset="https://assets.imgix.net/blog/unsplash-kiss.jpg?w=768&h=1024&fit=crop" media="(min-width: 768px)" > <source srcset="https://assets.imgix.net/blog/unsplash-kiss.jpg?w=568&h=320&fit=crop" media="(min-width: 480px)" > <img src="https://assets.imgix.net/blog/unsplash-kiss.jpg?w=320&h=568&fit=crop"> </picture>  Mặc dù chúng có thể không có kích thước chính xác cho thiết bị (do có sẵn nhiều kích thước màn hình khác nhau), việc đặt một số điểm ngắt khung nhìn đơn giản và áp dụng một vài tham số có thể giúp bạn đạt được hầu hết các cách đó với ít chi phí hơn nhiều so với việc tạo các hình ảnh gốc khác nhau cho mỗi kích cỡ.  Bạn có thể tiếp tục mở rộng số lượng điểm dừng nếu cần, tùy thuộc vào những gì bạn biết về thiết bị của người dùng.  Ngay cả với cách triển khai   đơn giản này, chúng tôi đã đề cập đến những điều cơ bản, điều chỉnh một hình ảnh duy nhất nếu cần để cung cấp phiên bản hình ảnh hấp dẫn nhất cho từng kích thước mục tiêu. <picture>  Tuy nhiên, với một vài bổ sung cho mã này, bạn có thể biến   thành một công cụ mạnh mẽ để tự động hóa hướng nghệ thuật trên toàn bộ bộ ảnh của mình, không chỉ một ảnh đơn lẻ. <picture>  Chỉ đạo nghệ thuật tự động  Trong các ví dụ trên, việc cắt xén diễn ra đơn giản vì nội dung có ý nghĩa nằm ở giữa (là giá trị mặc định cho   ). fit=crop  Tuy nhiên, nếu phần có liên quan nhất của hình ảnh không được căn giữa, bạn vẫn có thể sử dụng các chế độ   của imgix để điều chỉnh theo chương trình nơi bắt đầu cắt xén mà không cần phải xuất các phiên bản đã cắt sẵn theo cách thủ công cho các tỷ lệ khung hình khác nhau. crop  imgix cung cấp hai chế độ cắt xén dựa trên nội dung hình ảnh:   và   . Chúng hoạt động tương tự bằng cách đánh giá hình ảnh và phát hiện khuôn mặt hoặc khu vực có độ tương phản cao, sau đó cắt xén với những khuôn mặt ở trung tâm. crop=faces crop=entropy  Có nhiều chi tiết hơn về cách sử dụng các chế độ này trong hướng dẫn của chúng tôi về   và   . cách tạo hình đại diện cắt xén điểm ưa thích  Hãy xem cách sử dụng   và các tính năng chính của imgix như lớp phủ văn bản và hình mờ có thể tạo ra một tập hợp hình ảnh có thương hiệu đầy đủ cắt và thay đổi để phù hợp với bất kỳ màn hình thiết bị nào. <picture>  Mỗi phiên bản của những hình ảnh này đang được tạo nhanh chóng từ tệp Hình ảnh gốc để đáp ứng với kích thước khung nhìn và được lưu vào bộ nhớ đệm, giúp giảm thiểu đáng kể cả dung lượng lưu trữ hình ảnh và bất kỳ ảnh hưởng hiệu suất nào mà   thường có thể gây ra. <picture>  cắt xén    Xem các ví dụ cắt xén khuôn mặt/entropy trong CodePen   https://codepen.io/imgix/pen/ZQVXBY?embedable=true  Xem Pen   của imgix (   ) trên   . Picture Element & Art Direction với imgix @imgix CodePen  Trong ví dụ về CodePen, hình ảnh điều chỉnh theo khung nhìn về kích thước và tỷ lệ khung hình, đồng thời kiểu cắt xén thay đổi dựa trên những gì cần thiết ở các kích thước đó để giữ cho Tổng thống Obama ở giữa.  Tùy thuộc vào biến thể của hình ảnh, điều này được thực hiện với   ,   , căn chỉnh cây trồng (   , v.v.) và đôi khi   để phóng to một phần của hình ảnh ở kích thước nhỏ hơn. crop=faces crop=entropy crop=top rect  Hình mờ logo và tín dụng ảnh cũng được điều chỉnh về kích thước và phần đệm để phù hợp với các thay đổi của chế độ xem và thay đổi vị trí để tránh chồng chéo chủ thể.  Chia tỷ lệ văn bản và hình mờ  Bất kỳ lớp phủ văn bản, pha trộn hoặc hình mờ nào bạn thêm vào hình ảnh của mình đều có thể được thu nhỏ và điều chỉnh cùng với hình ảnh. Đây là một ví dụ sử dụng   để chỉ đạo nghệ thuật một cách ấn tượng hơn nữa.  <picture>   Xem các ví dụ về hình mờ/pha trộn trong CodePen   https://codepen.io/imgix/pen/NxoadL?embedable=true  Thêm hỗ trợ DPR  Nếu bạn muốn hỗ trợ nhiều độ phân giải pixel trong   , bạn có thể làm như vậy bằng cách thêm các biến thể   cho mỗi   . Ví dụ: nếu chúng tôi muốn hỗ trợ thiết bị có mật độ cao hơn cho ví dụ ban đầu của mình, thì mã sẽ như sau: <picture> DPR srcset   <picture> <source srcset="https://assets.imgix.net/blog/unsplash-kiss.jpg?w=1280&dpr=1 1x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=1280&dpr=2 2x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=1280&dpr=3 3x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=1280&dpr=4 4x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=1280&dpr=5 5x" media="(min-width: 1280px)" > <source srcset="https://assets.imgix.net/blog/unsplash-kiss.jpg?w=768&h=1024&fit=crop&dpr=1 1x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=768&h=1024&fit=crop&dpr=2 2x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=768&h=1024&fit=crop&dpr=3 3x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=768&h=1024&fit=crop&dpr=4 4x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=768&h=1024&fit=crop&dpr=5 5x" media="(min-width: 768px)" > <source srcset="https://assets.imgix.net/blog/unsplash-kiss.jpg?w=568&h=320&fit=crop&dpr=1 1x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=568&h=320&fit=crop&dpr=2 2x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=568&h=320&fit=crop&dpr=3 3x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=568&h=320&fit=crop&dpr=4 4x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=568&h=320&fit=crop&dpr=5 5x" media="(min-width: 480px)" > <img srcset="https://assets.imgix.net/blog/unsplash-kiss.jpg?w=320&h=568&fit=crop&dpr=1 1x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=320&h=568&fit=crop&dpr=2 2x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=320&h=568&fit=crop&dpr=3 3x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=320&h=568&fit=crop&dpr=4 4x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=320&h=568&fit=crop&dpr=5 5x"> </picture>  Một lần nữa lưu ý rằng không cần tạo các phiên bản mới của hình ảnh—chỉ cần tạo một bản sao của nguồn, thêm tham số   vào URL và gắn nhãn cho từng phiên bản bằng bộ mô tả mật độ pixel thích hợp (   ,   , v.v.). dpr 1x 2x  Hình ảnh ban đầu của bạn là tất cả những gì cần thiết để tạo ra các biến thể vô hạn khi nhu cầu và thiết kế của bạn thay đổi.  Bản tóm tắt    là một đồng minh mạnh mẽ trong việc tiếp cận sự phức tạp của hình ảnh đáp ứng trong các thiết kế thay đổi nhanh chóng. Với các thay đổi tham số đơn giản, bạn có thể giải quyết các vùng chứa thiết kế mới, thiết bị và độ phân giải thiết bị theo chương trình thay vì xử lý lại toàn bộ danh mục hình ảnh của mình. imgix  Chúng tôi cũng hỗ trợ các phương pháp tiếp cận có tư duy tiến bộ như   đang cố gắng đơn giản hóa việc triển khai và thiết kế đáp ứng. Gợi ý dành cho khách hàng    để tận dụng lợi thế của imgix. Tạo một tài khoản miễn phí ngay hôm nay  Tham số imgix có liên quan    | Chế độ cắt crop    | Tỷ lệ pixel của thiết bị dpr    | Thay đổi kích thước Chế độ Fit fit    | Vùng hình chữ nhật nguồn rect  Các nguồn lực khác    Tuyển chọn các trang web được thiết kế đáp ứng bằng cách sử dụng các truy vấn phương tiện. Hữu ích cho việc xem xét các cách tiếp cận khác nhau đối với chỉ đạo nghệ thuật.  : Truy vấn phương tiện    Loạt bài giới thiệu từ Cloud Four Design bao gồm tất cả các phương pháp thực hiện hình ảnh phản hồi cũng như sự đánh đổi và trường hợp sử dụng của chúng  : Responsive Images 101    Tìm hiểu cách sử dụng   với các tham số cắt tiêu điểm của imgix để làm cho hình ảnh của bạn hấp dẫn ở mọi kích cỡ.  : Cắt tiêu điểm cho Chỉ đạo nghệ thuật đáp ứng <picture>

Sign Up for Free

Get A Demo

Read the Docs

Visit Website

Nghe bài viết này bằng Tiếng Anh, đọc bởi robot thông minh của HackerNoon

dài quá đọc không nổi

Make resilience your competitive advantage

Sử dụng<picture> để Tự động kết xuất hình ảnh cho các môi trường người dùng khác nhau

About Author

BÌNH LUẬN

chuyên mục

BÀI VIẾT NÀY CŨNG CÓ MẶT TẠI

Related Stories

287 Stories To Learn About Blockchain Development

309 Stories To Learn About Smart Contracts

85 Stories To Learn About Travel

145 Stories To Learn About Book

287 Stories To Learn About Blockchain Development

309 Stories To Learn About Smart Contracts

85 Stories To Learn About Travel

145 Stories To Learn About Book

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps