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

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ử <picture> và cách triển khai phần tử này hiệu quả nhất với imgix.

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 điều chỉnh độ phân giải của hình ảnh cho thiết bị (chuyển đổi độ phân giải).

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ử <picture> đượ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.

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à <picture> cho Art Direction

imgix có hai lợi ích chính khi sử dụng phần tử <picture> . Đầ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ị.

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.

Lưu ý: Phần tử <picture> không khả dụng đối với một số trình duyệt cũ. Bạn có thể sử dụng Picturefill để thêm hỗ trợ cho những khách hàng đó.

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 <picture> đơ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.

Tuy nhiên, với một vài bổ sung cho mã này, bạn có thể biến <picture> 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ẻ.

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ế độ crop 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.

imgix cung cấp hai chế độ cắt xén dựa trên nội dung hình ảnh: crop=faces và crop=entropy . 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.

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ề cách tạo hình đại diện và cắt xén điểm ưa thích .

Hãy xem cách sử dụng <picture> 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.

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à <picture> thường có thể gây ra.

cắt xén

Xem các ví dụ cắt xén khuôn mặt/entropy trong CodePen

Xem Pen Picture Element & Art Direction với imgix của imgix ( @imgix ) trên 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 crop=faces , crop=entropy , căn chỉnh cây trồng ( crop=top , v.v.) và đôi khi rect để phóng to một phần của hình ảnh ở kích thước nhỏ hơn.

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 <picture> để chỉ đạo nghệ thuật một cách ấn tượng hơn nữa.

Xem các ví dụ về hình mờ/pha trộn trong CodePen

Thêm hỗ trợ DPR

Nếu bạn muốn hỗ trợ nhiều độ phân giải pixel trong <picture> , bạn có thể làm như vậy bằng cách thêm các biến thể DPR cho mỗi srcset . 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> <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ố dpr 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 ( 1x , 2x , v.v.).

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

imgix 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.

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ư Gợi ý dành cho khách hàng đang cố gắng đơn giản hóa việc triển khai và thiết kế đáp ứng.

Tạo một tài khoản miễn phí ngay hôm nay để tận dụng lợi thế của imgix.

Tham số imgix có liên quan

• crop | Chế độ cắt
• dpr | Tỷ lệ pixel của thiết bị
• fit | Thay đổi kích thước Chế độ Fit
• rect | Vùng hình chữ nhật nguồn

Các nguồn lực khác

• Truy vấn phương tiện : 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.

• Responsive Images 101 : 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

• Cắt tiêu điểm cho Chỉ đạo nghệ thuật đáp ứng : Tìm hiểu cách sử dụng <picture> 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ỡ.