Hướng dẫn how do i use srcset in wordpress? - làm cách nào để sử dụng srcset trong wordpress?

• 17 phút đọc
• WordPress, tối ưu hóa, hiệu suất, thiết kế đáp ứng, kỹ thuật (WP)

Hỗ trợ cho các hình ảnh phản hồi đã được thêm vào Core WordPress trong phiên bản 4.4 để giải quyết trường hợp sử dụng để chọn hình ảnh dựa trên chế độ xem, trong đó trình duyệt yêu cầu kích thước hình ảnh phù hợp nhất với bố cục cho chế độ xem cụ thể của nó.

Hỗ trợ cho các hình ảnh phản hồi đã được thêm vào Core WordPress trong phiên bản 4.4 để giải quyết trường hợp sử dụng để chọn hình ảnh dựa trên chế độ xem, trong đó trình duyệt yêu cầu kích thước hình ảnh phù hợp nhất với bố cục cho chế độ xem cụ thể của nó.

Hình ảnh được chèn trong văn bản của một bài đăng tự động được xử lý đáp ứng, trong khi hình ảnh được xử lý bởi chủ đề hoặc plugin - như hình ảnh đặc trưng và phòng trưng bày hình ảnh - có thể được mã hóa bởi các nhà phát triển sử dụng các chức năng và bộ lọc hình ảnh phản hồi mới. Với một vài bổ sung, các trang web WordPress có thể chứa một trường hợp sử dụng hình ảnh đáp ứng khác được gọi là hướng nghệ thuật. Hướng nghệ thuật cho chúng ta khả năng thiết kế với hình ảnh có cây trồng hoặc thành phần thay đổi tại các điểm dừng nhất định.

Đọc thêm về SmashingMag: on SmashingMag:

• Trình tạo điểm dừng hình ảnh đáp ứng
• Giới thiệu Trình tạo điểm dừng hình ảnh phản hồi
• Hình ảnh đáp ứng được thực hiện đúng: Hướng dẫn và SRCSET
• Hình ảnh đáp ứng hiện đã hạ cánh trong Core WordPress

Trong bài viết này, tôi sẽ chỉ cho bạn cách thiết lập một trang web WordPress cho định hướng nghệ thuật bằng cách trải qua ba ví dụ tiến bộ:

Thêm sau khi nhảy! Tiếp tục đọc bên dưới & NBSP; ↓

• Hỗ trợ tự động của WordPress, cho các hình ảnh phản hồi trong các bài đăng
• Hình ảnh biểu ngữ có chiều rộng thay đổi trong mẫu trang
• Một hình ảnh anh hùng theo hướng nghệ thuật trong một mẫu trang

Theo ví dụ về hướng nghệ thuật, chúng tôi sẽ thêm một số PHP, polyfill và plugin cắt vào trang web.

Hỗ trợ tự động cho hình ảnh đáp ứng WordPress trong các bài đăng

Hỗ trợ cho các hình ảnh phản hồi là tất cả về các tùy chọn: Chúng tôi cung cấp một mảng các tệp hình ảnh được mô tả tốt cho trình duyệt và trình duyệt áp dụng kiến ​​thức của nó về mật độ chiều rộng và pixel của chế độ xem để yêu cầu tệp có độ phân giải phù hợp nhất. Công việc ở đây là thuộc tính srcset, có thể được sử dụng với các thẻ img và

    $id = get_post_thumbnail_id();
    $src = wp_get_attachment_image_src( $id, 'full' );
    $srcset = wp_get_attachment_image_srcset( $id, 'full' );
    $sizes = wp_get_attachment_image_sizes( $id, 'full' );
    $alt = get_post_meta( $id, '_wp_attachment_image_alt', true);

    "
        sizes=""
        alt="" />

0. Tương tự, nhưng nhiều thông tin hơn, người anh em họ cũ của nó, thuộc tính

    $id = get_post_thumbnail_id();
    $src = wp_get_attachment_image_src( $id, 'full' );
    $srcset = wp_get_attachment_image_srcset( $id, 'full' );
    $sizes = wp_get_attachment_image_sizes( $id, 'full' );
    $alt = get_post_meta( $id, '_wp_attachment_image_alt', true);

    "
        sizes=""
        alt="" />

1, srcset về cơ bản là một tập hợp các nguồn của Hồi giáo - nghĩa là một danh sách các tệp hình ảnh có sẵn để tải xuống. Đối với nền chi tiết về thuộc tính srcset, tôi đề xuất bài viết của Eric Portis, về hình ảnh phản hồi.

Vì phiên bản 4.4, WordPress tự động thêm thuộc tính srcset vào bất kỳ hình ảnh nào được chạy qua bộ lọc

    $id = get_post_thumbnail_id();
    $src = wp_get_attachment_image_src( $id, 'full' );
    $srcset = wp_get_attachment_image_srcset( $id, 'full' );
    $sizes = wp_get_attachment_image_sizes( $id, 'full' );
    $alt = get_post_meta( $id, '_wp_attachment_image_alt', true);

    "
        sizes=""
        alt="" />

5. Nói cách khác, khi WordPress tạo HTML cho trang web của bạn, nó sẽ quét văn bản bài đăng hoặc trang cho các thẻ img và thêm thuộc tính srcset cho bất kỳ thẻ nào mà không có chứa. Bạn đã thắng được xem srcset trong trình chỉnh sửa bài (trừ khi bạn thêm một cách rõ ràng, mặc dù bạn thường nên để WordPress chăm sóc nó), nhưng nó sẽ có mặt trong nguồn HTML của trang.

Để cung cấp nhiều kích thước hình ảnh trong srcset, WordPress tận dụng hành vi tiêu chuẩn của nó là tự động tạo một số phiên bản nhỏ hơn của các tệp hình ảnh của bạn khi bạn tải chúng lên thư viện phương tiện truyền thông. Bạn có thể tìm thấy các kích thước này được liệt kê trên màn hình Cài đặt phương tiện trên mạng (trong menu Cài đặt cài đặt trên mạng trong giao diện quản trị WordPress), cùng với các giá trị mặc định của chúng; Không được liệt kê là kích thước hình ảnh mới Medium Medium_large (rộng 768 pixel, không có giới hạn chiều cao), kích thước có thể được thay đổi bởi một chủ đề hoặc plugin nhưng không thông qua giao diện quản trị.

Kích thước tối đa mặc định được hiển thị trên màn hình Cài đặt phương tiện truyền thông WordPress trong đó là 1024 × 1024 pixel cho kích thước lớn của các loại lớn, 300 × 300 pixel cho kích thước trung bình trên mạng và 150 × 150 pixel cho kích thước hình thu nhỏ. Không thể thay đổi kích thước 768 pixel medium_large ở đây. (Xem phiên bản lớn)

Theo mặc định, phương tiện được tự động hóa, các kích thước hình ảnh của Mediumed Medium_Large và các kích thước hình ảnh lớn của Wap được cắt mềm-nghĩa là, chúng duy trì tỷ lệ khung hình tương tự như tệp gốc. . Ngược lại, kích thước hình thu nhỏ của người Viking được cắt cứng đến một hình vuông 150 pixel, do đó, rất có thể nó có tỷ lệ khung hình khác với anh em lớn hơn. WordPress dựa vào tỷ lệ khung hình để xác định kích thước hình ảnh nào nên được đưa vào srcset và chúng tôi sẽ thấy trò chơi này trong mỗi ví dụ của chúng tôi.soft-cropped — that is, they maintain the same aspect ratio as the original file. (I refer to these as “scaled” versions.) In these cases, the width given on the “Media Settings” screen is the constraining parameter. In contrast, the “thumbnail” size is hard-cropped to a 150 pixel square, so it most likely has a different aspect ratio than its bigger brothers. WordPress relies on aspect ratio to determine which image sizes should be included in a srcset, and we’ll be seeing this play out in each of our examples.

Hãy để nói rằng bạn tải lên hình ảnh 1400 × 952 pixel lên thư viện phương tiện WordPress và giữ các kích thước hình ảnh ở các giá trị mặc định của chúng. Đằng sau hậu trường, WordPress tạo ra các phiên bản sau của hình ảnh gốc:

Tạo hình ảnh trong WordPress dựa trên hình ảnh 1400 × 952 pixel

Size	Chiều rộng (PX)	Chiều cao (PX)	Cắt xén	Tỷ lệ khung hình (w/h)
Full (Bản gốc) (original)	1400	952	mềm	1.47
lớn	1024	696	mềm	1.47
medium_large	768	522	mềm	1.47
lớn	300	204	mềm	1.47
lớn	150	150	vừa phải	1

hình nhỏ

cứng

Nếu sau đó bạn chèn phiên bản lớn (rộng 1024 pixel) vào một bài đăng và xem nguồn HTML cho trang web được xuất bản, bạn sẽ thấy một cái gì đó như thế này:

WordPress đã tạo ra một srcset cho chúng tôi bằng cách sử dụng phương tiện của người Hồi giáo, có kích thước trung bình, và các kích thước lớn và các kích thước lớn vì những hình ảnh này đều có chung tỷ lệ khung hình. Phiên bản hình thu nhỏ của người Viking đã được bao gồm, điều này có ý nghĩa bởi vì chúng tôi muốn những hình ảnh đó trông giống nhau trong mọi chế độ xem.

Hai bit thông tin khác cũng được bao gồm trong HTML ở trên. Đầu tiên, các mô tả

2 trong srcset cho trình duyệt biết độ rộng pixel thực tế của các tệp; Không có những thứ này, trình duyệt sẽ cần tải xuống hình ảnh để tìm ra kích thước của chúng. Thứ hai, giá trị mặc định của WordPress, cho thuộc tính

4 cho biết trình duyệt hình ảnh được dự định rộng như thế nào trong bố cục cụ thể này. Ở đây, đối với chế độ xem hẹp hơn 1024 pixel, hình ảnh sẽ lấp đầy và mở rộng với kích thước của chế độ xem; Mặt khác, hình ảnh phải được hiển thị ở chiều rộng mặc định là 1024 pixel và không rộng hơn. Với những phần cuối cùng này cho câu đố, trình duyệt giờ đây có thể đưa ra yêu cầu hình ảnh thông minh, cho dù đó là hiển thị tệp độ phân giải cao trên màn hình Retina Retina hay một tệp độ phân giải thấp trên điện thoại nhỏ.

Bây giờ chúng tôi đã hiểu cách WordPress tận dụng các kích thước hình ảnh tiêu chuẩn để xây dựng srcset, đã đến lúc làm quen với các chức năng hình ảnh đáp ứng mới của WordPress Core bằng cách áp dụng lựa chọn hình ảnh dựa trên chế độ xem vào một chủ đề. Đối với ví dụ này, chúng tôi sẽ xem xét một hình ảnh biểu ngữ toàn chiều rộng xuất hiện trên trang nhất tĩnh.

    $id = get_post_thumbnail_id();
    $src = wp_get_attachment_image_src( $id, 'full' );
    $srcset = wp_get_attachment_image_srcset( $id, 'full' );
    $sizes = wp_get_attachment_image_sizes( $id, 'full' );
    $alt = get_post_meta( $id, '_wp_attachment_image_alt', true);

    "
        sizes=""
        alt="" />

Hãy giả sử rằng chúng tôi có một trang web hiện có bằng cách sử dụng phiên bản WordPress hiện tại và hỗ trợ cho hình thu nhỏ bài được bật trong chủ đề của chúng tôi. . Nếu mẫu trang nhất của chúng tôi sử dụng thẻ mẫu WordPress

6 để tạo HTML cho biểu ngữ, thì tất cả chúng tôi đều được đặt: hàm này đã xuất ra thẻ img bao gồm các thuộc tính srcset và

4. Đó là một lý do tại sao việc sử dụng các chức năng mẫu WordPress là tốt khi chúng có sẵn!

Mặc dù vậy, có lẽ, mẫu trang của chúng tôi xây dựng HTML cho từng mảnh hình ảnh biểu ngữ, như bạn có thể cần làm nếu biểu ngữ của bạn thực sự là một phần của băng chuyền của bên thứ ba. Để làm cho hình ảnh này đáp ứng, chúng tôi yêu cầu WordPress rõ ràng cho các thuộc tính srcset và

4, sử dụng các hàm

// adds Picturefill to 'js' subdirectory inside child theme

function theme_add_javascripts() {
    wp_enqueue_script( 'picturefill-js', get_stylesheet_directory_uri() .
        '/js/picturefill.min.js', '', '', false );
}

add_action( 'wp_enqueue_scripts', 'theme_add_javascripts' );

2 và

// adds Picturefill to 'js' subdirectory inside child theme

function theme_add_javascripts() {
    wp_enqueue_script( 'picturefill-js', get_stylesheet_directory_uri() .
        '/js/picturefill.min.js', '', '', false );
}

add_action( 'wp_enqueue_scripts', 'theme_add_javascripts' );

3, tương ứng:

Ở đây, chúng tôi đã dựa trên srcset và

4 về kích thước hình ảnh gốc bằng cách chuyển từ khóa // adds Picturefill to 'js' subdirectory inside child theme function theme_add_javascripts() { wp_enqueue_script( 'picturefill-js', get_stylesheet_directory_uri() . '/js/picturefill.min.js', '', '', false ); } add_action( 'wp_enqueue_scripts', 'theme_add_javascripts' ); 6 cho các chức năng của chúng tôi. Nếu hình ảnh đó là 1280 × 384 pixel và nếu chúng ta giữ các kích thước hình ảnh tiêu chuẩn ở các giá trị mặc định của chúng, thì đầu ra HTML sẽ trông như thế này:

Trong trường hợp này, như trong lần cuối, giá trị mà WordPress cung cấp cho chúng tôi cho thuộc tính

4 được chấp nhận cho bố cục giả thuyết của chúng tôi. Nói chung, giá trị mặc định của WordPress đối với

4 hoạt động tốt cho các hình ảnh toàn chiều rộng, nhưng đối với bất kỳ bố cục nào khác, bạn sẽ cần phải tự viết giá trị. Một số bố cục phức tạp hơn các bố cục khác: thuộc tính

4 cho lưới hình ảnh phản hồi (xem ví dụ Eric Portis,) khá đơn giản, nhưng bố cục thay đổi ở các điểm dừng khác nhau, chẳng hạn như các trang có cột bên, đòi hỏi nhiều suy nghĩ hơn. Đối với trường hợp sau, Tim Evko sử dụng chủ đề Twenty Sixteen làm ví dụ về việc áp dụng bộ lọc

// cropped hero
add_image_size( 'mytheme-hero-cropped', 767, 460, true );

// scaled-down cropped hero 1
add_image_size( 'mytheme-hero-cropped-smaller', 560, 336, true );

// scaled-down cropped hero 2
add_image_size( 'mytheme-hero-cropped-smallest', 360, 216, true );

0 để làm cho giá trị

4 khớp với các điểm dừng CSS của bố cục.

Một hình ảnh anh hùng theo hướng nghệ thuật trong một mẫu trang

Theo ví dụ về hướng nghệ thuật của chúng tôi, chúng tôi sẽ sử dụng hình ảnh 1400 × 952-pixel từ ví dụ đầu tiên của chúng tôi để tạo ra một hình ảnh anh hùng đáp ứng. Trên các chế độ xem lớn, hình ảnh anh hùng sẽ trông như thế này (mặc dù lớn hơn nhiều):

Hình ảnh anh hùng có kích thước đầy đủ, 1400 × 952 pixel (Hình ảnh: Josh Felise) (Xem phiên bản lớn)

Nhưng đối với các chế độ xem nhỏ hơn, chúng tôi sẽ cắt hình ảnh trong WordPress để trông như thế này:

Hình ảnh anh hùng bị cắt với tỷ lệ khung hình 5: 3

Cách tiếp cận này cho chúng ta hai hình ảnh với giá của một-một kích thước đầy đủ và được cắt xén-mỗi hình ảnh có srcset riêng.

Thiết lập môi trường WordPress của chúng tôi để hướng dẫn nghệ thuật mất bốn bước. Như trong ví dụ trước, hình ảnh anh hùng sẽ là hình ảnh nổi bật cho trang chủ của trang web và chúng tôi sẽ chỉnh sửa mẫu trang nhất. Tôi cho rằng bạn đang thực hiện các thay đổi cho một chủ đề hiện có và do đó, đã tạo ra một chủ đề con để làm việc.

1. Bao gồm tập lệnh Picturefill

Chúng tôi sẽ mã hóa hình ảnh anh hùng của chúng tôi bằng cách gói nó trong phần tử HTML5

// cropped hero
add_image_size( 'mytheme-hero-cropped', 767, 460, true );

// scaled-down cropped hero 1
add_image_size( 'mytheme-hero-cropped-smaller', 560, 336, true );

// scaled-down cropped hero 2
add_image_size( 'mytheme-hero-cropped-smallest', 360, 216, true );

7. Phần tử

// cropped hero
add_image_size( 'mytheme-hero-cropped', 767, 460, true );

// scaled-down cropped hero 1
add_image_size( 'mytheme-hero-cropped-smaller', 560, 336, true );

// scaled-down cropped hero 2
add_image_size( 'mytheme-hero-cropped-smallest', 360, 216, true );

7 cho phép chúng tôi cung cấp nhiều nguồn cho một hình ảnh, cùng với các truy vấn phương tiện để xác định khi nào một nguồn sẽ được sử dụng. Theo văn bản này,

// cropped hero
add_image_size( 'mytheme-hero-cropped', 767, 460, true );

// scaled-down cropped hero 1
add_image_size( 'mytheme-hero-cropped-smaller', 560, 336, true );

// scaled-down cropped hero 2
add_image_size( 'mytheme-hero-cropped-smallest', 360, 216, true );

7 được hỗ trợ trên toàn cầu bởi 62% trình duyệt, vì vậy chúng tôi sẽ cần phải dựa vào PolentFill Polyfill để thực hiện yếu tố này trong các trình duyệt không hỗ trợ. Dự án PictureFill được duy trì bởi nhóm dây tóc và tệp JavaScript PictureFill có thể được tải xuống từ GitHub.

Để bao gồm tập lệnh PictureFill trong

    $id = get_post_thumbnail_id();
    $alt = get_post_meta( $id, '_wp_attachment_image_alt', true);

    /* get the width of the largest cropped image to 
       calculate the breakpoint */
    $hero_cropped_info = 
        wp_get_attachment_image_src( $id, 'mytheme-hero-cropped' );
    $breakpoint = absint( $hero_cropped_info[1] ) + 1;

    // pass the full image size to these functions
    $hero_full_srcset = 
        wp_get_attachment_image_srcset( $id, 'full' );
    $hero_full_sizes = 
        wp_get_attachment_image_sizes( $id, 'full' );

    // pass the cropped image size to these functions
    $hero_cropped_srcset = 
        wp_get_attachment_image_srcset( $id, 'mytheme-hero-cropped' );
    $hero_cropped_sizes = 
        wp_get_attachment_image_sizes( $id, 'mytheme-hero-cropped' );

  
    
    "
        sizes=""
        alt="" />

0. Ví dụ của chúng tôi, phần tử ____10 duy nhất sẽ chứa truy vấn

    
    "
        sizes=""
        alt="" />

1. Đây là một tạo tác của việc sử dụng polyfill để hỗ trợ phần tử

// cropped hero
add_image_size( 'mytheme-hero-cropped', 767, 460, true );

// scaled-down cropped hero 1
add_image_size( 'mytheme-hero-cropped-smaller', 560, 336, true );

// scaled-down cropped hero 2
add_image_size( 'mytheme-hero-cropped-smallest', 360, 216, true );

7: Trình duyệt không hỗ trợ sẽ tải trước tệp được đưa ra trong thuộc tính

    $id = get_post_thumbnail_id();
    $src = wp_get_attachment_image_src( $id, 'full' );
    $srcset = wp_get_attachment_image_srcset( $id, 'full' );
    $sizes = wp_get_attachment_image_sizes( $id, 'full' );
    $alt = get_post_meta( $id, '_wp_attachment_image_alt', true);

    "
        sizes=""
        alt="" />

1, dẫn đến tải xuống gấp đôi cho hình ảnh này.

HTML mà chúng tôi nhận được được hiển thị bên dưới:

    
    
 (VF, AL, IL)
 

			
WordPress srcset là gì?
			
SRCSET: Bạn thấy rằng thuộc tính SRCSET chứa 5 URL của cùng một hình ảnh nhưng có kích thước khác nhau.Ngoài ra, đối với mỗi URL, nó cũng chứa thông tin về chiều rộng của hình ảnh.Do đó, WordPress đặt vào thuộc tính SRCSET Tất cả các bản sao của một hình ảnh mà nó có theo ý của nó ngoại trừ một trong các kích thước hình thu nhỏ.contains 5 urls of the same image but of different size. In addition, for each url it also contains information on the width of the image. WordPress therefore puts in the srcset attribute all the copies of an image it has at its disposal except the one of the thumbnail size.
		
			
SRCSET có cần thiết không?
			
SRCSET rất quan trọng đối với SEO vì nó cho phép các trình duyệt tải kích thước hình ảnh tối ưu dựa trên các đặc tính của thiết bị.Hình ảnh lớn hơn có kích thước tệp lớn hơn.Không có điểm nào trong việc tải, ví dụ, rộng 2400 pixel, hình ảnh 20 MB trên điện thoại di động đơn giản.. Larger images have larger file sizes. There's no point in loading, for example, a 2400-pixel wide, 20 MB image on a simple mobile phone.
		
			
Srcset có hoạt động không có kích thước không?
			
Bạn có thể sử dụng kích thước để làm cho srcset hoạt động tốt hơn nữa.Không có nó, trình duyệt sử dụng toàn bộ chiều rộng của chế độ xem khi chọn hình ảnh từ srcset.Without it, the browser uses the full width of the viewport when choosing an image from a srcset .