Lưu ý: Cách sử dụng "hình ảnh" HTML cho hình ảnh phản hồi. Quản lý thức ăn. Giải pháp phổ biến nhất hiện nay

Một tính năng của tài liệu linh hoạt là thành phần có thể thay đổi của các trường trong các hình ảnh khác nhau. Do đó, khi tạo một phần tử, bạn nên lưu ý rằng (các) đối tượng được mô tả bởi phần tử này có thể không có trong một số hình ảnh nên sẽ không thể tìm thấy nó. Cũng có thể hình ảnh có thể bị hỏng trong quá trình quét, chẳng hạn như bị đen hoặc ngược lại, bị sáng khu vực riêng lẻ hình ảnh dẫn đến mất thông tin. Trong trường hợp này, đối tượng tương ứng với phần tử cũng sẽ không được tìm thấy. FlexiLayout Studio cho phép bạn tiếp tục tìm kiếm các phần tử khác nếu thiếu một phần tử trong hình ảnh. Để cho phép phủ mô tả lên hình ảnh nếu không tìm thấy đối tượng nào đó, bạn cần đặt nó là tùy chọn.

Các đối tượng hình ảnh được mô tả bằng các phần tử bắt buộc phải có trong hình ảnh và chương trình phải tìm thấy chúng khi áp dụng mô tả linh hoạt. Nếu không tìm thấy đối tượng như vậy trong ảnh thì quá trình thêm mô tả sẽ dừng lại.

Các phần tử bắt buộc phải được sử dụng để tìm các đối tượng xác định một biểu mẫu. Sự hiện diện của phần tử định danh như vậy sẽ ngăn cản việc áp đặt mô tả linh hoạt lên một hình thức không thuộc về nó. loại này các hình thức. Bạn cũng có thể sử dụng phần tử bắt buộc để mô tả các đối tượng hình ảnh, việc thiếu phần tử này trên biểu mẫu sẽ khiến việc áp dụng mô tả linh hoạt và nhận dạng dữ liệu sâu hơn trở nên vô nghĩa.

Trong tất cả các trường hợp khác, đối tượng hình ảnh phải được mô tả bằng các phần tử tùy chọn.

Các đối tượng sử dụng các phần tử tùy chọn để mô tả chúng có thể không có trong hình ảnh hoặc chương trình có thể không phát hiện được chúng khi áp dụng mô tả linh hoạt. Tuy nhiên, trong trường hợp này, một mô tả linh hoạt có thể được đặt chồng lên hình ảnh và các đối tượng hình ảnh được mô tả bởi các phần tử khác sẽ được tìm thấy.

Theo mặc định, tất cả các thành phần mô tả đơn giản đều là tùy chọn, tức là Người ta chấp nhận rằng chúng có thể không được tìm thấy trong hình ảnh.

Bình luận. không giống yếu tố đơn giản tất cả các thành phần nhóm được yêu cầu theo mặc định.

khả dụng yếu tố cụ thể có thể có nghĩa là chuỗi giả thuyết được xây dựng là không chính xác. Những phần tử này được gọi là phần tử không hợp lệ. Khi phần tử này được tìm thấy, việc tạo ra các giả thuyết cho nhánh cây nơi nó được tìm thấy sẽ dừng lại. Ví dụ: những phần tử này có thể được sử dụng để ngăn chặn việc mô tả sai bị phủ lên tài liệu.

Do đó, các phần tử có thể được sử dụng để xác định tài liệu (bắt buộc), tìm kiếm các khối (bắt buộc và tùy chọn) và loại bỏ các giả thuyết sai (các phần tử không hợp lệ).

Việc lựa chọn tùy chọn sử dụng một phần tử được thực hiện trong hộp thoại thuộc tính phần tử (tab Chung).

Hình ảnh cần thiết và phần tử không hợp lệđược phân bổ như sau.

Chúng ta tiếp tục chuỗi bài viết về thiết lập chiến dịch tìm kiếm động (Quảng cáo tìm kiếm động). Trước đây tôi đã viết về DSA cho quảng cáo Google. Hôm nay chúng ta sẽ xem xét các thành phần và ví dụ về nguồn cấp dữ liệu cho Yandex.Direct.

Nguồn cấp dữ liệu sản phẩm— một tệp chứa dữ liệu về tất cả các sản phẩm trên trang web và thuộc tính của chúng (mã định danh duy nhất, liên kết đến sản phẩm và hình ảnh của chúng).

Danh mục nguồn cấp dữ liệu trong Yandex.Direct

Các loại nguồn cấp dữ liệu sau đây có sẵn trong dịch vụ:

"Bán lẻ".

"Nhiều khách sạn"

"Địa ốc".

"Ô tô".

"Vé máy bay."

Cách chuẩn bị nguồn cấp dữ liệu cho "Bán lẻ"

Tạo nguồn cấp dữ liệu ở định dạng YML. Bất kỳ tài liệu XML nào cũng chỉ có thể chứa một phần tử gốc.

Định dạng YML sử dụng phần tử làm gốc . Thuộc tính ngày của phần tử phải tương ứng với ngày và giờ tạo tệp YML từ phía nhà quảng cáo. Đặt ngày ở định dạng YYYY-MM-DD hh:mm.

http://www.nadezhnayatekhnika.rf/catalog/element/index.php?from=ya_market&utm_source=ya_market&utm_medium=cpc& 889.00 17000.00 UAH 1111 http://89.123.45.678/catalog/photo/19/6.JPG false false true Máy in Dòng máy in HP Deskjet D2663 dành cho những người cần một chiếc máy in màu đáng tin cậy, dễ sử dụng để in ấn hàng ngày... Yêu cầu thanh toán trước. đúng là Nhật Bản

Cách tạo nguồn cấp dữ liệu cho “Khách sạn”

Đối với loại hình kinh doanh "Khách sạn", bạn có thể sử dụng nguồn cấp dữ liệu "Khách sạn và Nhà trọ cho thuê" Quảng cáo Google (định dạng CSV). Nội dung của các cột được phân tách bằng dấu phẩy. Dữ liệu trong nguồn cấp dữ liệu phải ở dạng mã hóa UTF-8.

Yếu tố	Sự miêu tả
	Mã khách sạn. Yếu tố bắt buộc.
	Tên của khách sạn. Yếu tố bắt buộc.
	URL trang ưu đãi. Yếu tố bắt buộc.
Tên điểm đến	Vị trí khách sạn (tối đa 25 ký tự). Yếu tố bắt buộc.

	Chào giá. Mã số và tiền tệ trong mã hóa ISO 4217 Sử dụng dấu chấm (.) làm dấu phân cách thập phân. Mục được đề xuất.
	Số lượng sao. Một số nguyên từ 1 đến 5.
	Đánh giá của người dùng, số lượng. Sử dụng dấu chấm (.) làm dấu phân cách thập phân.
	Điểm tối đa có thể, số nguyên. Mặc định là 5.
	Dịch vụ khách sạn. Chỉ định các giá trị được phân tách bằng dấu chấm phẩy: bar; hồ bơi; wifi miễn phí.

Đặt các giá trị bằng dấu phẩy trong dấu ngoặc kép ("").

Cách chuẩn bị nguồn cấp dữ liệu cho “Bất động sản”

Danh sách các ưu đãi bất động sản của nhà quảng cáo được chứa trong phần tử . Mỗi sản phẩm (căn hộ) được mô tả bằng một yếu tố riêng biệt .

Trong một nguồn cấp dữ liệu, bạn có thể truyền tải thông tin về các khu dân cư phức hợp của các nhà phát triển khác nhau. Để làm điều này, hãy chỉ ra trong mỗi thông tin hợp pháp về nhà phát triển trong phần tử .

Yếu tố	Sự miêu tả
	Yếu tố bắt buộc.
	Loại giao dịch. Ý nghĩa chỉ là "bán". Yếu tố bắt buộc.
	Một tập hợp các phần tử mô tả vị trí của một đối tượng. Các thẻ lồng nhau chứa thông tin chi tiết về địa chỉ của đối tượng. Yếu tố bắt buộc.
	Tên của địa phương. Yếu tố bắt buộc.
tên tiểu địa phương

	Ga tàu điện ngầm gần nhất. Nếu có nhiều trạm thì mỗi trạm phải được chỉ định bằng một phần tử riêng biệt. Cung cấp thông tin chi tiết trong các thẻ phụ. Mục được đề xuất.

thời gian vận chuyển	Thời gian đến tàu điện ngầm trong vài phút bằng phương tiện giao thông.

	Yếu tố bắt buộc.
	Yếu tố bắt buộc.
	Một tập hợp các phần tử mô tả giá trị của một đối tượng. Các thẻ lồng nhau chứa giá và đơn vị tiền tệ mà chi phí được chỉ định: Mục được đề xuất.


	Tên khu dân cư phức hợp. Dựa trên yếu tố này, các căn hộ được kết hợp thành khu dân cư phức hợp. Nếu không biết tên của khu dân cư, hãy cho biết số đường và số nhà (ví dụ: Pushkinskaya, 25). Yếu tố bắt buộc.
	Thông tin về nhà phát triển. Cung cấp thông tin chi tiết trong các thẻ phụ. Yếu tố bắt buộc.
	Tiêu đề đầy đủ thực thể pháp lý nhà phát triển. Yếu tố bắt buộc.
	Toàn bộ khu vực. Giá trị diện tích và đơn vị được chuyển vào các thẻ lồng nhau.

	Đơn vị diện tích phòng. Phần tử được sử dụng nếu giá được chỉ định trên một đơn vị diện tích. Các giá trị có thể có: “sq. m"/"sq. m".

Nguồn cấp dữ liệu có đề nghị cho thuê tài sản không được chấp nhận.

bán căn hộ dân cư http://www.developer.ru/search18 2015-04-02T19:00:06+03:00 St. Petersburg o. Vasilyevsky Đường thứ 18 V.O., 32 Vasileostrovskaya 10 5 4780000 UAH ZAO "Nhà phát triển" 13 15 63,00 m2 m Northern Fantasy http://www.developer.ru/images/plans/000001289.jpg

Cách tạo nguồn cấp dữ liệu cho “Ô tô”

Yếu tố	Sự miêu tả
	ID ưu đãi sản phẩm. Phần tử bắt buộc nếu không có phần tử vin.
	Mẫu xe. Yếu tố bắt buộc.
	Tên mẫu. Yếu tố bắt buộc.
	Tên của sửa đổi. Yếu tố bắt buộc.
	Yếu tố bắt buộc.
	Yếu tố bắt buộc.
	Loại cơ thể. Yếu tố bắt buộc.
	Năm phát hành. Yếu tố bắt buộc.
	Giá xe. Yếu tố bắt buộc.
	Loại tiền tệ mà giá được chỉ định. Yếu tố bắt buộc.
	Số VIN (17 ký tự).

Ví dụ về nguồn cấp dữ liệu:

Ford Fusion 1.4d AT (68 mã lực) http://www.auto.ru/1 http://picture.auto.ru/1.jpg Hatchback 5 cửa. màu đỏ trong kho đã được hải quan thông quan 2015 575000 UAH XWBCA41ZXDK259205

Cách chuẩn bị nguồn cấp dữ liệu cho “Vé máy bay”

Yếu tố	Sự miêu tả
	URL trang ưu đãi. Yếu tố bắt buộc.
	Yếu tố bắt buộc (đối với biểu ngữ thông minh).
	Chào giá. Mã số và tiền tệ trong mã hóa ISO 4217 Sử dụng dấu chấm (.) làm dấu phân cách thập phân.
	ID đích. Yếu tố bắt buộc.
	ID gốc.
Tên điểm đến	Tên điểm đến. Yếu tố bắt buộc.
	Tên điểm khởi hành.

Cách thêm nguồn cấp dữ liệu

Để thêm nguồn cấp dữ liệu vào Yandex.Direct, hãy chuyển đến giao diện bằng liên kết “Nguồn cấp dữ liệu” ở cuối chiến dịch.

Sau đó nhấp vào “Thêm nguồn cấp dữ liệu”.

Cách thêm nguồn cấp dữ liệu bằng liên kết

Để được đăng trên trang web, kích thước của nguồn cấp dữ liệu không được vượt quá 512 MB. Mỗi ngày một lần, nguồn cấp dữ liệu được robot tải xuống và nhập vào Yandex.Direct. Khi tạo quảng cáo động, robot sẽ kiểm tra nguồn cấp dữ liệu để chọn ưu đãi sản phẩm bằng các bộ lọc được chỉ định mỗi ngày một lần hoặc thường xuyên hơn nếu có thể.

Tệp phải có thể truy cập được thông qua Giao thức HTTP, HTTPS hoặc FTP. Sử dụng ủy quyền để truy cập.

Nếu các liên kết trong nguồn cấp dữ liệu của bạn chứa thẻ UTM không phù hợp để theo dõi chiến dịch quảng cáo, Tôi khuyên bạn nên loại bỏ chúng. Để thực hiện việc này, hãy chọn hộp kiểm “Tự động xóa thẻ UTM”. Bạn có thể thêm thẻ UTM mới trên trang chỉnh sửa nhóm quảng cáo.

Cách thêm tệp nguồn cấp dữ liệu

Chọn tập tin bạn cần tải lên. Kích thước của tệp được tải lên không được vượt quá 512 MB. Khi cập nhật, tệp sẽ được robot tải xuống và dữ liệu mới được nhập vào Yandex.Direct.

Bạn có thể đặt nguồn cấp dữ liệu của mình vào kho lưu trữ được tạo bằng thuật toán nén ZIP (phần mở rộng .zip) hoặc GNU ZIP (phần mở rộng .gz).

Nếu xảy ra lỗi khi thêm nguồn cấp dữ liệu (ví dụ: kích thước/định dạng/liên kết nguồn cấp dữ liệu không đáp ứng yêu cầu), bạn sẽ thấy trạng thái "Lỗi tải lên". Để xem báo cáo lỗi, hãy nhấp vào liên kết "Thêm chi tiết".

Xác thực nguồn cấp dữ liệu hoạt động như thế nào?

Xác nhận là kiểm tra toàn diện việc tuân thủ các yêu cầu.

Kiểm tra điều kiện khi đọc file:

tất cả các yếu tố cần thiết đều có mặt;
tất cả tên phần tử đều đúng;
Mỗi phần tử xuất hiện nhiều nhất một lần.

Nếu bất kỳ điều kiện nào trong số này không được đáp ứng, tệp sẽ bị từ chối.

Phần kết luận

Chúng tôi đã xem xét tất cả các tùy chọn và định dạng nguồn cấp dữ liệu để thiết lập các chiến dịch động trong Yandex Direct.

Hãy để tôi nhắc nhở bạn, vì sáng tạo đúng cho ăn:

Xác định loại hình kinh doanh của bạn.

Tùy chỉnh nguồn cấp dữ liệu của bạn dựa trên loại hình kinh doanh của bạn.
Mẹo: càng điền nhiều trường vào nguồn cấp dữ liệu thì hệ thống tốt hơn sẽ có thể xác định người dùng mong muốn.

Tải nguồn cấp dữ liệu lên tài khoản Yandex.Direct của bạn.

Trong bài viết tiếp theo, tôi sẽ chỉ cho bạn cách thiết lập các chiến dịch nhắm mục tiêu đến nội dung trang web và nguồn cấp dữ liệu trang.

Hình ảnh nổi tiếng là một trong những khía cạnh khó khăn nhất web thích ứng thiết kế. Hôm nay chúng ta sẽ xem xét một phần tử là giải pháp cho vấn đề như thế nào hình ảnh thích ứng, có thể được sử dụng ngay lập tức.

Đầu tiên về vấn đề

Đã qua rồi cái thời của thiết kế pixel hoàn hảo và có chiều rộng cố định. Bây giờ trong thời gian màn hình rộng, Truyền hình Internet, máy tính bảng và điện thoại thông minh Đa dạng về kích cỡ Thiết kế của chúng tôi phải phù hợp với mọi chiều rộng thiết bị từ 320px đến 7680px tiềm năng.

Với nhiều độ phân giải màn hình, nhu cầu nén hoặc kéo giãn hình ảnh để phù hợp với các yêu cầu khác nhau. Điều này có thể trở thành một vấn đề, bởi vì... ngoại trừ đồ họa vector, phần lớn hình ảnh có chiều rộng cơ sở là px không thể thay đổi.

Vậy chúng ta nên làm gì?

Giải pháp chung hiện nay

Thông thường, bạn sẽ tìm thấy mã này trên bất kỳ trang web nào có thiết kế đáp ứng:

Img (chiều rộng tối đa: 100%; chiều cao: tự động; )

Ở đây độ rộng tối đa được sử dụng: 100%; để đảm bảo rằng hình ảnh không bao giờ vượt quá chiều rộng của vùng chứa chính. Nếu như vùng chứa gốcđược nén đến chiều rộng nhỏ hơn chiều rộng của hình ảnh - chiều rộng sau được nén cùng với vùng chứa. Cài đặt chiều cao: tự động; cần thiết để duy trì tỷ lệ.

Một hình ảnh “linh hoạt” cho mọi dịp

Vấn đề được giải quyết chỉ bằng một cách, cho phép chúng ta hiển thị cùng một hình ảnh cho mọi trường hợp. Nhưng điều này không cho chúng ta cơ hội cài đặt khác biệt hình ảnh cho các tình huống khác nhau.

Giải pháp mới:

Cái này phần tử mới, là một phần của HTML5.

Nó thực hiện một cách để mô tả các hình ảnh phản hồi theo cách tương tự như được thực hiện trong và. Bằng cách này, bạn có thể đặt nhiều thẻ, mỗi thẻ chứa tên tệp của các hình ảnh khác nhau cùng với các điều kiện để tải chúng.

Điều này sẽ cho phép bạn tải các hình ảnh khác nhau tùy thuộc vào:

Kết quả của các biểu thức đa phương tiện, chẳng hạn như chiều cao, chiều rộng hoặc hướng khung nhìn
Mật độ pixel

Điều này có nghĩa là bạn có thể:

Upload file hình ảnh có kích thước phù hợp sử dụng hiệu quả thông lượng.
Tải các hình ảnh có định hướng khác nhau theo các tỷ lệ khác nhau để phù hợp với những thay đổi về bố cục ở các độ rộng khác nhau.
Tải hình ảnh lên từ độ phân giải cao dành cho màn hình có mật độ điểm ảnh cao.

Sử dụng các hình ảnh khác nhau tùy theo điều kiện Nó hoạt động như thế nào?

Các bước cơ bản khi làm việc với

Tạo thẻ mở và đóng.

Bên trong, tạo một phần tử cho mỗi biểu thức bạn muốn xử lý.

Thêm thuộc tính phương tiện chứa các biểu thức cho những thứ như chiều cao và chiều rộng của khung nhìn, hướng, v.v.

Thêm thuộc tính srcset với tên thích hợp của file ảnh cần upload.

Thêm tên tệp bổ sung vào thuộc tính srcset nếu bạn cần hỗ trợ các mật độ pixel khác nhau, ví dụ: Màn hình Retina.

Thêm phần tử dự phòng .

Đây là một ví dụ đơn giản, trong trường hợp chiều rộng của vùng hiển thị nhỏ hơn 768px, một hình ảnh nhỏ hơn sẽ được tải:

Bạn sẽ nhận thấy rằng cú pháp được sử dụng trong thuộc tính media giống như khi được sử dụng trong Phương tiện CSS truy vấn. Bạn có thể sử dụng các kiểm tra tương tự, tức là. kiểm tra chiều rộng tối đa, chiều rộng tối thiểu, chiều cao tối đa, chiều cao tối thiểu, hướng, v.v.

Ví dụ: những lần kiểm tra này có thể được sử dụng để tải phiên bản ngang (ngang) hoặc dọc (dọc) của hình ảnh tùy thuộc vào hướng của thiết bị và bạn có thể đồng thời kiểm tra kích thước trong các biểu thức này. Ví dụ:

Mã này tải phiên bản hình ảnh ngang nhỏ hơn cho các thiết bị có màn hình nhỏ và hướng thích hợp. Và một phiên bản lớn hơn của cùng một hình ảnh dành cho các thiết bị có màn hình lớn.

Nếu thiết bị có hướng dọc, phiên bản dọc của hình ảnh sẽ được tải, thu nhỏ đối với các thiết bị có màn hình nhỏ và phóng to đối với các thiết bị có màn hình lớn.

Nếu bạn muốn phân phát hình ảnh ở độ phân giải khác để hiển thị mật độ điểm ảnh cao hơn, bạn có thể làm như vậy bằng cách chỉ định tên tệp bổ sung trong thuộc tính srcset. Hãy lấy một ví dụ về quá trình thêm đoạn mã đầu tiên của chúng tôi cho màn hình Retina 2x:

Bởi vì truy vấn phương tiện được xử lý trước tiên, bạn có thể kiểm soát kích thước của hình ảnh mà nó sẽ hiển thị trên màn hình. Sau đó, mật độ điểm ảnh sẽ được kiểm tra: nếu màn hình hỗ trợ mật độ điểm ảnh cao hơn và thiết lập người dùng Nếu bạn được phép thực hiện việc này, các phiên bản tương ứng của hình ảnh sẽ được tải xuống.

Sử dụng ngay hôm nay

Hiện tại, hỗ trợ gốc được triển khai trong Chrome, Firefox và Opera. Trong tương lai, rất có thể chúng ta sẽ thấy sự hỗ trợ rộng rãi trên các trình duyệt khác. Nhưng chúng ta vẫn phải sống đến thời điểm này.

Trong thời gian chờ đợi, bạn không phải chờ đợi nếu muốn sử dụng Right Now. Chỉ cần sử dụng Picturefill 2.0; polyfill từ người thông minh từ Tập đoàn Filament.

Sau khi tải tệp picturefill.js xuống dự án của bạn, chỉ cần đưa nó vào tiêu đề:

Ngoài ra còn có một tùy chọn cho tải không đồng bộ tập lệnh mà bạn có thể đọc trong tài liệu Picturefill.

Khi sử dụng tập lệnh này, phần tử Will sẽ hoạt động như tôi đã giải thích nhưng có một số hạn chế.

Những hạn chế của Picturefill IE9

Picturefill hoạt động tốt với phiên bản khác nhau IE, tuy nhiên IE9 không hỗ trợ các phần tử được . Để giải quyết vấn đề này, hãy bọc các phần tử nguồn trong thẻ bằng cách sử dụng bình luận có điều kiện; điều này sẽ làm cho chúng hiển thị với IE9, ví dụ:

Android 2.3

Giống như IE9, Android 2.3 không hiển thị các phần tử bên trong. Tuy nhiên, nó hiểu thuộc tính srcset khi sử dụng bình thường. thẻ. Đảm bảo bạn luôn có bản sao lưu với tên tệp mặc định trong thuộc tính srcset dành cho Android 2.3 và các trình duyệt khác có thể gặp vấn đề tương tự.

Yêu cầu hỗ trợ JavaScript và Media Query gốc

Theo đó, JavaScript bắt buộc phải được kích hoạt trên trình duyệt. Picturefill 2.0 không cung cấp giải pháp “no-js”, vì nếu điều này được thực hiện thì khi trình duyệt triển khai hỗ trợ gốc, một số hình ảnh sẽ được hiển thị. Tuy nhiên, bạn có thể sử dụng Picturefill 1.2 nếu tùy chọn "no-js" là bắt buộc đối với bạn.

Một yêu cầu khác của Picturefill là hỗ trợ truy vấn phương tiện gốc để cho phép xử lý các biểu thức trong thuộc tính phương tiện. Tất cả trình duyệt hiện đại hỗ trợ các biểu thức đa phương tiện, chỉ IE8 trở xuống không hỗ trợ chúng, điều này chỉ tương ứng với một bộ phận nhỏ người dùng.

Có thể yêu cầu HTTP bổ sung

Có thể trong các trình duyệt có hỗ trợ gốc cho srcset nhưng chưa hỗ trợ cho trình duyệt được chỉ định trong phần tử dự phòng tệp có thể được yêu cầu trước khi xác định tùy chọn phù hợp từ tệp .

Đây chỉ là sự cố tạm thời và sẽ biến mất ngay khi triển khai hỗ trợ tích hợp.

Đọc thêm về Picturefill 2.0 và tải xuống cho dự án của bạn từ trang này.
Thủ tục thanh toán thông tin đầy đủ theo yếu tố Trên trang web responsiveimages.org.

Hãy thử sử dụng nó trong dự án của bạn ngay hôm nay!

Trong bản dựng dành cho nhà phát triển trình duyệt Chrome, Firefox và Opera hiện hỗ trợ phần tử hình ảnh mới, được thiết kế để giải quyết một số vấn đề gặp phải trong quá trình phát triển thiết kế thích ứng. Chúng ta hãy xem xét kỹ hơn về nó.

Phần tử hình ảnh mới giải quyết các vấn đề sau mà nhà phát triển ứng dụng web đáp ứng gặp phải (Tôi sẽ sử dụng cách phân loại do pepelsbey đề xuất tại một trong những hội nghị giao diện người dùng gần đây):

R võng mạc, tức là màn hình có mật độ dpi từ 150 trở lên, trên đó hình ảnh bình thường xuất hiện mờ

Và khả năng đáp ứng là nhiệm vụ thay đổi kích thước hình ảnh theo quy tắc của bạn được ghi trong thiết kế tùy thuộc vào kích thước của khung nhìn.

Định dạng, khả năng sử dụng các định dạng hiện đại như WebP nếu chúng được trình duyệt hỗ trợ

Để đóng khung hoặc mục đích nghệ thuật. Cắt bớt những phần không quan trọng của hình ảnh khi hiển thị trên thiết bị có màn hình nhỏ hơn.

Thêm các chữ cái đầu tiên, chúng ta có được Cú pháp RAFC dễ nhớ. Thông thường, cú pháp mở rộng của phần tử mới trông như thế này
...

Phần tử hình ảnh không hiển thị bất kỳ nội dung nào mà chỉ đơn thuần là một vùng chứa tham chiếu cho những gì được lồng trong đó. thẻ img.

Vì vậy, đối với hầu hết các nhiệm vụ, ký hiệu viết tắt là đủ mà không cần sử dụng hình ảnh.

Hãy xem cách giải quyết các vấn đề trên bằng cách sử dụng một phần tử mới. Tất cả các tệp ví dụ có thể được tìm thấy trong kho lưu trữ này github.com/fetis/picture

Để kiểm tra các ví dụ trong bài viết này trên máy tính để bàn, bạn sẽ cần Firefox Nighlty (hỗ trợ hình ảnh được bật bằng cách cài đặt dom.image.picture.enable trong about:config) hoặc Chrome Canary hoặc Nhà phát triển Opera. TRÊN thiết bị di động yếu tố mới có thể được thử nghiệm trong Chrome Beta

Retina Chúng tôi có một hình ảnh 400x300 px mà chúng tôi cũng muốn hiển thị đẹp mắt với mật độ pixel gấp đôi và gấp ba. Để làm điều này, hãy chuẩn bị thêm 2 bức ảnh có kích thước 800x600 và 1200x900 và viết đoạn mã sau

2x và 3x là mô tả mật độ pixel, họ cho trình duyệt biết rằng những hình ảnh này đã được chuẩn bị cho mật độ này, nếu muốn, bạn có thể sử dụng nó. Xin lưu ý rằng họ không ép buộc trình duyệt sử dụng những hình ảnh này mà chỉ nhắc nhở. Quyết định cuối cùng thuộc về anh ta tùy thuộc vào các điều kiện khác, chẳng hạn như kết nối hiện tại.

Thuộc tính src trong trong trường hợp này phục vụ như một nguồn hình ảnh cho mật độ< 2 и фолбеком на случай, если браузер не поддерживает новый элемент.

Khả năng thích ứng Hãy tưởng tượng một bố cục trong đó có một điểm dừng duy nhất là 700 px. Khi kích thước khung nhìn lớn hơn 700 px, chúng tôi hiển thị thanh bên ở bên phải và kích thước hình ảnh của chúng tôi phải bằng 75% chiều rộng màn hình. Nếu không, thanh bên sẽ nằm ở cuối trang và hình ảnh phải được kéo dài hết chiều rộng. Điều này được thực hiện bằng đoạn mã sau

400w, 800w, 1200w - đây là những mô tả chiều rộng, chúng cho trình duyệt biết chiều rộng của hình ảnh tại một URL nhất định và dựa trên thông tin này, trình duyệt sẽ quyết định hình ảnh nào phù hợp nhất tình hình hiện tại. Như trong trường hợp của võng mạc, thông tin mang tính chất tư vấn và quyết định cuối cùng về việc tải hình ảnh nào vẫn thuộc về trình duyệt.

Không được phép sử dụng đồng thời các mô tả mật độ và chiều rộng.

Thuộc tính kích thước liệt kê kích thước hình ảnh cho tất cả các điểm kiểm soát trong thiết kế của chúng tôi. Điểm dừng được đặt ở dạng biểu thức phương tiện thông thường, trình duyệt lấy điểm đầu tiên, trả về True và không xem xét thêm chuỗi. Giá trị chiều rộng sử dụng đơn vị độ dài mới vw , trả về giá trị dưới dạng phần trăm của chiều rộng khung nhìn.

Nếu không cần sử dụng hình ảnh Điểm kiểm soát, thì mục nhập có thể được rút ngắn thành size="100vw" này. Và đối với những thiết kế phức tạp hơn, bạn có thể sử dụng hàm CSS calc() , Ví dụ
size="(độ rộng tối đa: 30em) 100vw, (độ rộng tối đa: 50em) 50vw, calc(33vw - 100px)"

Theo tôi, thuộc tính khó cư xử nhất. Nếu bạn không chỉ định kích thước thì trình duyệt luôn chọn hình ảnh lớn nhất. Kết hợp với chiều rộng, nó không hoạt động, mặc dù nó có vẻ là sự kết hợp hợp lý và một số trục trặc khác. Có lẽ đây là những tính năng của việc thực hiện sớm.

Như bạn có thể thấy, chúng tôi đã đáp ứng được 80% nhu cầu về bố cục thích ứng và chưa bao giờ sử dụng hình ảnh, đã đến lúc nó phát huy tác dụng.

Định dạng Sử dụng các định dạng khác nhau cho hình ảnh không khác nhiều so với các phương pháp được sử dụng cho thẻ video hoặc âm thanh

Chúng tôi chỉ định danh sách các nguồn và mime/loại cho từng nguồn và trình duyệt đã chọn nguồn đầu tiên mà nó biết. Hình ảnh từ thuộc tính src.Cắt xén Khi chúng tôi hiển thị một bức ảnh trên màn hình nhỏ hơn, đôi khi việc cắt xén là điều hợp lý chi tiết không cần thiết, chỉ để lại phần chính. Thuộc tính media sẽ giúp chúng ta đối phó với nhiệm vụ này.

Trong mỗi thuộc tính phương tiện, chúng tôi chỉ định một biểu thức phương tiện, trong đó hình ảnh gốc sẽ thay đổi và, không giống như các ví dụ trước, trình duyệt sẽ phải theo dõi anh ấy. Cũng lưu ý cách cắt xén được kết hợp ở đây với khả năng thích ứng để kéo dài hình ảnh đến hết chiều rộng RAFC Và bây giờ là tất cả 4 phương pháp trong một chai :) Có lẽ đây là giao diện chèn ảnh trong vài năm nữa (ví dụ từ blog Opera)

2 được sử dụng ở đây định dạng JPEG và WebP. Khi chiều rộng màn hình lớn hơn 1280 px, hình ảnh kích thước đầy đủ sẽ được hiển thị ở một nửa khung nhìn. Với chiều rộng từ 640 đến 1279, ảnh đã cắt được hiển thị ở 60% chiều rộng khung nhìn. Khi chiều rộng màn hình nhỏ hơn 640px, ảnh đã cắt sẽ hiển thị ở độ rộng 100%. Việc lựa chọn dpi màn hình hiện tại được thực hiện dựa trên độ rộng của tệp nguồn.

Hình ảnh từ lâu đã được biết đến là khía cạnh tiêu tốn nhiều thời gian nhất của thiết kế web đáp ứng. Hôm nay, chúng ta sẽ xem cách chúng ta có thể sử dụng thành phần hình ảnh như một giải pháp cho vấn đề về hình ảnh phản hồi ngay bây giờ.

Thứ nhất, bản thân vấn đề

Thời của các thiết kế trang web có chiều rộng cố định với sự tuân thủ đầy đủ về bố cục đã qua lâu rồi. Trong thời đại ngày nay của màn hình rộng, Internet TV, máy tính bảng và điện thoại thông minh với nhiều kích cỡ khác nhau, thiết kế của chúng ta phải tính đến mọi độ phân giải - từ 320 pixel đến 7680.

Tất cả các độ phân giải này đều đặt ra yêu cầu về hình ảnh - chúng phải kéo dài và co lại để đáp ứng nhiều yêu cầu khác nhau. Đây có thể là một vấn đề vì... Ngoại trừ đồ họa vector, hầu hết các hình ảnh đều có chiều rộng pixel cố định không thay đổi.

Vậy lam gi?

Giải pháp phổ biến nhất hiện nay

Thông thường, bạn sẽ tìm thấy những điều sau trong mã CSS của hầu hết mọi trang web đáp ứng:

img (độ rộng tối đa: 100%; chiều cao: tự động;)

img (tối đa - chiều rộng: 100%; chiều cao: tự động;)

Mã này sử dụng cài đặt độ rộng tối đa: 100%; để đảm bảo rằng hình ảnh sẽ không vượt ra ngoài vùng chứa chính. Nếu vùng chứa chính trở nên nhỏ hơn chiều rộng của hình ảnh, hình ảnh sẽ co lại theo nó. Cài đặt chiều cao: tự động; hiện diện để khi giảm, tỷ lệ của hình ảnh được giữ nguyên.

Một hình ảnh cao su cho tất cả các thiết bị

Điều này giải quyết vấn đề bằng một phím, cho phép chúng tôi hiển thị cùng một hình ảnh trong các trường hợp khác nhau. Tuy nhiên, nó không cho phép chúng tôi hiển thị các hình ảnh khác nhau cho các trường hợp khác nhau.

Giải pháp mới: thẻ hình ảnh

hình ảnh là một phần tử mới nên là một phần của HTML5. Nó sẽ tăng tốc đáng kể quá trình đặt hình ảnh thích ứng, tương tự như nguyên tắc hoạt động của các phần tử âm thanh và video. Nó sẽ cho phép bạn chỉ định một số thành phần nguồn, mỗi thành phần đó sẽ trỏ đến các tập tin khác nhau hình ảnh cùng với các điều kiện mà chúng phải được tải.

Nó sẽ cho phép bạn tải xuống hình ảnh khác nhau tùy thuộc vào:

Kết quả truy vấn phương tiện, chẳng hạn như chiều cao, chiều rộng, hướng của khung nhìn

Mật độ điểm ảnh

Điều đó có nghĩa là bạn có thể:

Tải lên hình ảnh có kích thước phù hợp, từ lợi nhuận tối đa sử dụng độ rộng kênh có sẵn.

Tải lên hình ảnh với các tỷ lệ khung hình và cắt xén khác nhau để phù hợp với việc thay đổi bố cục cho các độ rộng màn hình khác nhau.

Tải hình ảnh có độ phân giải cao cho màn hình có mật độ pixel cao.

Các hình ảnh khác nhau được tải tùy theo hoàn cảnh

Yếu tố hình ảnh hoạt động như thế nào?

Các bước cơ bản để làm việc với phần tử hình ảnh là:

Tạo thẻ hình ảnh mở và đóng.

Trong các thẻ này, hãy tạo phần tử nguồn cho mỗi yêu cầu bạn muốn thực hiện.

Thêm thuộc tính phương tiện vào truy vấn của bạn cho những thứ như chiều cao, chiều rộng, hướng của khung nhìn, v.v.

Thêm thuộc tính srcset với tên thích hợp của file ảnh cần upload.

Thêm tên tệp bổ sung vào thuộc tính srcset nếu bạn muốn hỗ trợ màn hình có mật độ điểm ảnh cao như Retina.

Thêm phần tử img làm dự phòng.

Đây là một ví dụ đơn giản để kiểm tra xem khung nhìn có nhỏ hơn 768 pixel hay không và nếu có, hãy tải hình ảnh nhỏ hơn:

< picture > < source srcset = "smaller.jpg" media = "(max-width: 768px)" > < source srcset = "default.jpg" > < img srcset = "default.jpg" alt = "Hình ảnh mặc định của tôi" > < / picture >

Bạn sẽ nhận thấy rằng cú pháp được sử dụng trong thuộc tính media hoàn toàn giống với cú pháp bạn thường sử dụng khi viết truy vấn phương tiện CSS. Bạn có thể sử dụng các bước kiểm tra tương tự, nghĩa là bạn có thể tạo truy vấn cho chiều rộng tối đa, chiều rộng tối thiểu, chiều cao tối đa, chiều cao tối thiểu, hướng, v.v.

Bạn có thể sử dụng các bước kiểm tra này để tải phiên bản ngang hoặc dọc của hình ảnh tùy thuộc vào hướng của thiết bị và bạn cũng có thể thêm truy vấn kích thước. Ví dụ:

< picture > < source srcset = "smaller_landscape.jpg" media = "(max-width: 40em) and (orientation: landscape)" > < source srcset = "smaller_portrait.jpg" media = "(max-width: 40em) and (orientation: portrait)" > < source srcset = "default_landscape.jpg" media = "(min-width: 40em) and (orientation: landscape)" > < source srcset = "default_portrait.jpg" media = "(min-width: 40em) and (orientation: portrait)" > < img srcset = "default_landscape.jpg" alt = "Hình ảnh mặc định của tôi" > < / picture >

Đoạn mã trên tải phần đã giảm, đã cắt cho định hướng phong cảnh phiên bản hình ảnh cho thiết bị với hướng thích hợp. Nó tải phiên bản lớn hơn của cùng một hình ảnh cho các thiết bị màn hình lớn hơn.

Nếu thiết bị ở hướng dọc, thiết bị sẽ tải xuống hình ảnh được cắt tương ứng: trong kích thước nhỏ hơn- Vì thiết bị nhỏ và hình ảnh lớn hơn cho các thiết bị có độ phân giải cao hơn.

Nếu bạn muốn cung cấp các phiên bản hình ảnh có độ phân giải khác nhau cho màn hình có mật độ cao hơn, bạn có thể làm như vậy bằng cách thêm tên tệp bổ sung vào thuộc tính srcset. Ví dụ: hãy xem ví dụ mã đầu tiên ở trên với việc bổ sung hỗ trợ độ phân giải màn hình Retina 2x:

< picture > < source srcset = "smaller.jpg, smaller_retina.jpg 2x" media = "(max-width: 768px)" > < source srcset = > < img srcset = "default.jpg, default_retina.jpg 2x" alt = "Hình ảnh mặc định của tôi" > < / picture >

Yêu cầu phương tiện được xử lý trước tiên nên bạn có thể kiểm soát kích thước của hình ảnh trên màn hình. Tiếp theo, mật độ điểm ảnh của màn hình được kiểm tra và nếu mật độ caođược hỗ trợ và cho phép bởi cài đặt người dùng, phiên bản hình ảnh có độ phân giải cao hơn sẽ được tải.

Sử dụng hình ảnh ngày hôm nay

Hiện tại, việc triển khai hình ảnh gốc đang được phát triển cho các trình duyệt Chrome, Firefox và Opera. Trong tương lai, rất có thể chúng ta sẽ thấy sự hỗ trợ rộng rãi hơn trong các trình duyệt khác. Tuy nhiên, cho đến ngày hôm nay, sự hỗ trợ chỉ được mong đợi.

Hiện tại, bạn không phải đợi nếu muốn bắt đầu sử dụng hình ảnh ngay bây giờ. Bạn chỉ cần sử dụng Picturefill 2.0, một polyfill được cung cấp bởi các nhà phát triển tại Filament Group.

Khi bạn tải tệp picturefill.js xuống dự án của mình, bạn có thể sử dụng tệp này bằng cách tải tệp đó vào phần đầu của trang web:

Ngoài ra còn có tùy chọn tải tập lệnh không đồng bộ để có hiệu quả cao hơn mà bạn có thể đọc trong tài liệu Picturefill. Cùng với việc tải tập lệnh này, thành phần hình ảnh sẽ hoạt động như tôi mô tả với một số hạn chế nhỏ. ] -- >< source srcset = "smaller.jpg" media = "(max-width: 768px)" > < source srcset = "default.jpg" > < ! -- [ if IE 9 ] > < / video > < ! [ endif ] -- > < img srcset = "default.jpg" alt = "Hình ảnh mặc định của tôi" > < / picture >

Android 2.3

Giống như IE9, Android 2.3 không thấy các thành phần nguồn bên trong thẻ hình ảnh. Tuy nhiên, nó nhận ra thuộc tính srcset khi nó được gán cho thẻ img thông thường. Đảm bảo bạn bao gồm phần tử img dự phòng với tên tệp mặc định trong thuộc tính srcset dành cho Android 2.3 hoặc bất kỳ trình duyệt nào khác có vấn đề tương tự.

Yêu cầu hỗ trợ JavaScript và truy vấn phương tiện gốc

Vì giải pháp này được triển khai bằng JavaScript nên nó cần JavaScript để hoạt động chính xác trong trình duyệt. Picturefill 2.0 không cung cấp giải pháp cho “no-js” vì nếu không, rất nhiều hình ảnh sẽ xuất hiện trên các trang khi triển khai hỗ trợ gốc. Tuy nhiên, bạn có thể sử dụng Picturefill 1.2 nếu tính năng “no-js” quan trọng đối với bạn.

Yêu cầu tiếp theo của Picturefill là hỗ trợ riêng cho các truy vấn phương tiện để các truy vấn trong thuộc tính phương tiện hoạt động. Tất cả các trình duyệt hiện đại đều hỗ trợ truy vấn phương tiện, trong khi IE8 trở xuống là trình duyệt duy nhất không hỗ trợ, với một lượng nhỏ người dùng còn sót lại.

Có thể bổ sung Yêu cầu HTTP

Đối với các trình duyệt có hỗ trợ srcset gốc nhưng không hỗ trợ hình ảnh, có thể Tên tập tin trong phần tử img dự phòng có thể được yêu cầu trước hình ảnh phù hợp sẽ được xác định trong phần tử img. Sự cố này chỉ là tạm thời và sẽ được giải quyết khi triển khai hỗ trợ ảnh gốc.