Title: 2 questions about srcset function in wordpress?
Last modified: May 19, 2025

---

# 2 questions about srcset function in wordpress?

 *  Resolved [johannes999](https://wordpress.org/support/users/johannes999/)
 * (@johannes999)
 * [1 year ago](https://wordpress.org/support/topic/2-questions-about-srcset-function-in-wordpress/)
 * hello,
 * I see this explanation about srcset:
 * By default, **WordPress already generates `srcset` and `sizes`** for all images
   in the media library, so as long as you use the built-in functions like `the_post_thumbnail()`
   and `wp_get_attachment_image()`, WordPress will manage responsive images for 
   you.
 * However, if you’re **hardcoding** images in `header.php`, `footer.php`, or directly
   in page content, **WordPress won’t automatically generate `srcset`** unless you
   explicitly ask it to. That’s where you can leverage custom functions in `functions.
   php`.
 *  I am coding myself with html in header.php and footer.php I insert images from
   media library with copy link and paste it in header container or somewhere else.
 * now my question is :
 * 1-do I have to add some function for srcset in function.php to use the same srcset
   function of wordpress when I code myself with html in header.php , footer.php
   and self in page section of wordpress where I use code editor in place of virtual
   editor?
 * 2-what about retina and 4k resolution in modern time ? do I need to add some 
   extra code with srcset for this screens?
 * thanks

Viewing 5 replies - 1 through 5 (of 5 total)

 *  [Lakshyajeet Singh Goyal](https://wordpress.org/support/users/lakshyajeet/)
 * (@lakshyajeet)
 * [1 year ago](https://wordpress.org/support/topic/2-questions-about-srcset-function-in-wordpress/#post-18473847)
 * Hey [@johannes999](https://wordpress.org/support/users/johannes999/) ,
 * 1- Yes, you can get `scrset` and `sizes` automatically even when using URLs to
   load it.
 *     ```wp-block-code
       <img src="https://example.com/wp-content/uploads/2025/05/logo.png" alt="Logo">
       ```
   
 * This can be changed to use either the attachment id or even the URL directly:
 *     ```wp-block-code
       $image_id = attachment_url_to_postid('https://example.com/wp-content/uploads/2025/05/logo.png');echo wp_get_attachment_image($image_id, 'full'); // or 'medium', 'large', etc.
       ```
   
 * You can use the `attachment_url_to_postid()` function to convert from a URL to
   attachment ID and then use `wp_get_attachment_image()` function directly.
 * 2- If you use WordPress’s image system (i.e.,`srcset` and `sizes` from built 
   in functions), then you’re already covered.
    - WordPress generates multiple sizes when you upload an image (like `150x150`,`
      300x300`, `1024x1024`, which again can be changed through Media Settings).
    - `srcset` allows the browser to choose the best version based on the screen
      resolution and device pixel ratio (retina, 4K, etc).
 * You **can** also add extra image sizes in your `functions.php` if you want to
   particularly target high-res screens.
 *     ```wp-block-code
       add_image_size('ultra_hd', 3840); // for 4K screens
       ```
   
 * And then use:
 *     ```wp-block-code
       echo wp_get_attachment_image($image_id, 'ultra_hd');
       ```
   
 * Regards.
 *  [Gautam Mehta](https://wordpress.org/support/users/gautam23/)
 * (@gautam23)
 * [1 year ago](https://wordpress.org/support/topic/2-questions-about-srcset-function-in-wordpress/#post-18474033)
 * Hi
 * You are right that manually hardcoding the images simply do not generate the `
   srcset` attribute. But you can use helper functions like `wp_get_attachment_image`
   to generate an img tag that has these attributes. For example, if you have the
   URL of the image, you can do something like this:
 *     ```wp-block-code
       <?php$image_url = 'https://example.com/wp-content/uploads/2024/01/logo.png';$attachment_id = attachment_url_to_postid( $image_url );if ( $attachment_id ) {    echo wp_get_attachment_image( $attachment_id, 'full' );}?>
       ```
   
 * You can convert this into a utility function for easy use.
 * Regarding modern displays, if your original image is large enough, then you shouldn’t
   be worried about it as WordPress will handle the image srcsets and browsers will
   pick the best image to display. This is handled by the above provided code.
 * Lastly, if you are creating a theme with pre-inserted images then you should 
   consider not using the Media Library as the source of the images, because when
   you distribute the theme or port it on some other installation, it may not have
   all those images in their Media Library, resulting in a broken site.
 * Instead, you should use an assets folder in the base directory of your theme 
   and store all assets (images, videos, fonts, etc.) there.
 * This way you can use those images by directly referencing them in your theme.
   Although there won’t be any automatically optimized images then.
 * Thanks
 *  Thread Starter [johannes999](https://wordpress.org/support/users/johannes999/)
 * (@johannes999)
 * [1 year ago](https://wordpress.org/support/topic/2-questions-about-srcset-function-in-wordpress/#post-18474748)
 * thanks both of you,
 *  I see when I use this code it wil be enough if I am wrong correct me :
 *     ```wp-block-code
        <div class="image-container">    <?php     // Define the image URL and alt text    $image_url = 'https://laptopdiscounthub.com/wp-content/uploads/2025/05/header1.webp';    $alt_text = 'Header Image';    // Get the image ID from the URL    $img_id = attachment_url_to_postid($image_url);        // Retrieve the srcset data for the image    $image_data = wp_get_attachment_image_srcset($img_id, 'full');    // Output the image tag with WordPress-generated srcset values    echo '<img src="' . esc_url($image_url) . '" alt="' . esc_attr($alt_text) . '" srcset="' . esc_attr($image_data) . '" sizes="(max-width: 1400px) 100vw, 1400px" />';    ?></div>
       ```
   
 * I have also installed smush free version .
 *  and to insert images with html in the code editor I think I don’t need short
   code ? or I have too?
 * thanks
 *  [Lakshyajeet Singh Goyal](https://wordpress.org/support/users/lakshyajeet/)
 * (@lakshyajeet)
 * [1 year ago](https://wordpress.org/support/topic/2-questions-about-srcset-function-in-wordpress/#post-18474802)
 * Yes, what you are using is enough for the current use case, i.e., a single image
   in the header. If you have to use different images and/or at multiple places 
   then definitely it makes sense to use a shortcode.
 * I can suggest one improvement in the readability of the code, instead of concatenating
   strings and echoing you can use `printf`.
 *     ```wp-block-code
           printf(        '<img src="%s" alt="%s" srcset="%s" sizes="(max-width: 1400px) 100vw, 1400px" />',        esc_url($image_url),        esc_attr($alt_text),        esc_attr($image_data)    );
       ```
   
 * Glad I could help.
 *  Thread Starter [johannes999](https://wordpress.org/support/users/johannes999/)
 * (@johannes999)
 * [1 year ago](https://wordpress.org/support/topic/2-questions-about-srcset-function-in-wordpress/#post-18474915)
 * thank you very much

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘2 questions about srcset function in wordpress?’ is closed to new replies.

## Tags

 * [images](https://wordpress.org/support/topic-tag/images/)
 * [srcset](https://wordpress.org/support/topic-tag/srcset/)

 * In: [Developing with WordPress](https://wordpress.org/support/forum/wp-advanced/)
 * 8 replies
 * 3 participants
 * Last reply from: [johannes999](https://wordpress.org/support/users/johannes999/)
 * Last activity: [1 year ago](https://wordpress.org/support/topic/2-questions-about-srcset-function-in-wordpress/#post-18474915)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics