Hey @johannes999 ,
1- Yes, you can get scrset and sizes automatically even when using URLs to load it.
<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:
$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.
add_image_size('ultra_hd', 3840); // for 4K screens
And then use:
echo wp_get_attachment_image($image_id, 'ultra_hd');
Regards.
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:
<?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
thanks both of you,
I see when I use this code it wil be enough if I am wrong correct me :
<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
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.
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.
