Shortcode not work in picture source srcset tag

i have in my WP plugin:

<picture>     <source srcset="[bloginfo key='template_url']/images/image.webp" type="image/webp">     <img src="[bloginfo key='template_url']/images/image.png"> </picture> 

In a browser, img src code is OK, but on a srcset stays [bloginfo key=’template_url’]. What i missing about shortcode and srcset attribute to display it right?

Regards!

How do you determine a good set of breakpoints for srcset image sizes

My website right now is marginal for page loading speed on mobile. Originally written for desktop, I use a lot of images that are relatively high resolution, and only lightly compressed.

I’d like provide srcset images at various resolutions, but before I start, what are the optimum sizes, and how are they determined?

First approximation that occurs to me is (image as % of screen) * (viewport in pixels) and then calculate this for typical (and what is that, this week?) screen resolutions of desktop, tablet and phone.

On reflection, this approximation is naive.

  • Reducing the resolution of an image that’s too big will give better results than increasing one that is too small.

  • There aren’t really three situations to consider, but five, as both mobile and tablet can be use in either orientation. I don’t want the mobile user to have to slurp up new images when they rotate their phone. This isn’t as big a concern for tablets most of the time, as the bulk of tablet usage is on wifi.

  • Desktop usage has another factor: While screens have gotten wider, many users will have a browser up at less than full width. This one may not matter that much, as desktops have both the bandwidth and the processing speed to resize images.

  • Phones now come in a bewildering range of sizes and resolutions.

At present I’m looking at producing images at widths of 1300, 800, 500, 300 and setting cutoffs at 900 600 and 350, but this is little more than a WAG.

How to get the best resolution of image from srcset

I have an image code with srcset and sizes like this:

    <img src="/uploads/2012/12/Multitronics-TC-750-300x175.jpg"  class="attachment-medium size-medium wp-post-image lazyloaded"  alt="Multitronics TC 750"  srcset="/uploads/2012/12/Multitronics-TC-750-300x175.jpg 300w, /uploads/2012/12/Multitronics-TC-750-513x265.jpg 513w, /uploads/2012/12/Multitronics-TC-750.jpg 1260w"  sizes="(max-width: 300px) 100vw, 300px"> 

How to get the maximum image size (like Multitronics-TC-750.jpg 1260w) using the function? For example wp_calculate_image_srcset ()?

Remove Srcset Image From the_post_thumbnail

I want to delete the srcset image in the related posts widget. Here is my related posts function code:

// START related posts function get_max_related_posts( $  taxonomy_1 = 'post_tag', $  taxonomy_2 = 'category', $  total_posts = 4 ) { // First, make sure we are on a single page, if not, bail if ( !is_single() )     return false;  // Sanitize and vaidate our incoming data if ( 'post_tag' !== $  taxonomy_1 ) {     $  taxonomy_1 = filter_var( $  taxonomy_1, FILTER_SANITIZE_STRING );     if ( !taxonomy_exists( $  taxonomy_1 ) )         return false; }  if ( 'category' !== $  taxonomy_2 ) {     $  taxonomy_2 = filter_var( $  taxonomy_2, FILTER_SANITIZE_STRING );     if ( !taxonomy_exists( $  taxonomy_2 ) )         return false; }  if ( 4 !== $  total_posts ) {     $  total_posts = filter_var( $  total_posts, FILTER_VALIDATE_INT );         if ( !$  total_posts )             return false; }  // Everything checks out and is sanitized, lets get the current post $  current_post = sanitize_post( $  GLOBALS['wp_the_query']->get_queried_object() );  // Lets get the first taxonomy's terms belonging to the post $  terms_1 = get_the_terms( $  current_post, $  taxonomy_1 );  // Set a varaible to hold the post count from first query $  count = 0; // Set a variable to hold the results from query 1 $  q_1   = [];  // Make sure we have terms if ( $  terms_1 ) {     // Lets get the term ID's     $  term_1_ids = wp_list_pluck( $  terms_1, 'term_id' );      // Lets build the query to get related posts     $  args_1 = [         'post_type'      => $  current_post->post_type,         'post__not_in'   => [$  current_post->ID],         'posts_per_page' => $  total_posts,         'fields'         => 'ids',         'tax_query'      => [             [                 'taxonomy'         => $  taxonomy_1,                 'terms'            => $  term_1_ids,                 'include_children' => false             ]         ],     ];     $  q_1 = get_posts( $  args_1 );     // Count the total amount of posts     $  q_1_count = count( $  q_1 );      // Update our counter     $  count = $  q_1_count; }  // We will now run the second query if $  count is less than $  total_posts if ( $  count < $  total_posts ) {     $  terms_2 = get_the_terms( $  current_post, $  taxonomy_2 );     // Make sure we have terms     if ( $  terms_2 ) {         // Lets get the term ID's         $  term_2_ids = wp_list_pluck( $  terms_2, 'term_id' );          // Calculate the amount of post to get         $  diff = $  total_posts - $  count;          // Create an array of post ID's to exclude         if ( $  q_1 ) {             $  exclude = array_merge( [$  current_post->ID], $  q_1 );         } else {             $  exclude = [$  current_post->ID];         }          $  args_2 = [             'post_type'      => $  current_post->post_type,             'post__not_in'   => $  exclude,             'posts_per_page' => $  diff,             'fields'         => 'ids',             'tax_query'      => [                 [                     'taxonomy'         => $  taxonomy_2,                     'terms'            => $  term_2_ids,                     'include_children' => false                 ]             ],         ];         $  q_2 = get_posts( $  args_2 );          if ( $  q_2 ) {             // Merge the two results into one array of ID's             $  q_1 = array_merge( $  q_1, $  q_2 );         }     } }  // Make sure we have an array of ID's if ( !$  q_1 )     return false;  // Run our last query, and output the results $  final_args = [     'ignore_sticky_posts' => 1,     'post_type'           => $  current_post->post_type,     'posts_per_page'      => count( $  q_1 ),     'post__in'            => $  q_1,     'order'               => 'ASC',     'orderby'             => 'post__in',     'suppress_filters'    => true,     'no_found_rows'       => true ]; $  final_query = new WP_Query( $  final_args );  return $  final_query; } // END related posts 

And this is the caller:

<!-- start related bawah --> <?php      $  query = get_max_related_posts('post_tag', 'category', 6);     if ( $  query->have_posts() ) : ?> <div class="related-posts-below">         <div class="related-title-below">Related Posts:</div> <ul class="related-list-below">     <?php while ( $  query->have_posts() ) : $  query->the_post(); ?>     <li>         <a href="<?php the_permalink(); // <- this shows the url to the post ?>">             <?php the_post_thumbnail(array(100,75) ); // <- this shows the thumbnail ?>             <?php the_title(); // <- this shows the title ?>         </a>     </li>     <?php endwhile; wp_reset_postdata(); ?> </ul> </div> <?php endif; ?> <!-- end related bawah --> 

How do you delete a srcset image?