Live examples

Source images

• 126662-300x200.jpg
• header_107rule.png

Array:

return array(
	'simple-wo-crop' => array(
		array( 300, 200, false ),
	),
	'simple-crop' => array(
		array( 300, 200, true ),
	),
	'visual' => array(
		'desktop' => array(
			array( 600, 400, true ),
			'picture'   => '<source srcset="{src}" media="(min-width: 981px)">',
			'bg'        => '@media (min-width: 981px) ',
			'bg_retina' => '@media (min-width: 981px) and {dpr}, (min-width: 981px) and {min_res}',
			'srcset'    => '{w}w',
			'sizes'     => '(min-width: 981px) {w}px',
		),
		'mobile' => array(
			array( 400, 250 ),
			'picture'   => '<img src="{single-src}" srcset="{src}" alt="{alt}">',
			'bg'        => '',
			'bg_retina' => '@media {dpr}, {min_res}',
			'srcset'    => '{w}w',
			'sizes'     => '{w}px',
		),
	),
	'retina 2x' => array(
		'wide' => array(
			array( 1440, 400, true ),
			'picture'   => '<source srcset="{src}" media="(min-width: 1441px)">',
			'bg'        => '@media (min-width: 1441px) ',
			'bg_retina' => '@media (min-width: 1441px) and {dpr}, (min-width: 1441px) and {min_res}',
			'srcset'    => '{w}w',
			'sizes'     => '(min-width: 1441px) {w}px',
		),
		'desktop' => array(
			array( 980, 400, true ),
			'picture'   => '<source srcset="{src}" media="(min-width: 981px)">',
			'bg'        => '@media (min-width: 981px) ',
			'bg_retina' => '@media (min-width: 981px) and {dpr}, (min-width: 981px) and {min_res}',
			'srcset'    => '{w}w',
			'sizes'     => '(min-width: 981px) {w}px',
		),
		'mobile' => array(
			array( 400, 400 ),
			'picture'   => '<img src="{single-src}" srcset="{src}" alt="{alt}">',
			'bg'        => '',
			'bg_retina' => '@media {dpr}, {min_res}',
			'srcset'    => '{w}w',
			'sizes'     => '{w}px',
		),
	),
);

Functions code:

<div class="rwd-background">
    <?php rwd_attachment_background( '.rwd-background', $image_id, 'retina' ); ?>
</div>
<div class="rwd-examples">
	<div>
		<?php rwd_attachment_image( $image_id, 'simple-wo-crop', 'picture' ); ?>
	</div>
	<div>
		<?php rwd_attachment_image( $image_id, 'simple-wo-crop', 'img' ); ?>
	</div>
	<div>
		<?php rwd_attachment_image( $image_id, 'simple-crop', 'picture' ); ?>
	</div>
	<div>
		<?php rwd_attachment_image( $image_id, 'simple-crop', 'img' ); ?>
	</div>
	<div>
		<?php rwd_attachment_image( $image_id, 'visual', 'picture' ); ?>
	</div>
	<div>
		<?php rwd_attachment_image( $image_id, 'visual', 'img' ); ?>
	</div>
	<div>
		<?php rwd_attachment_image( $image_id, 'retina', 'picture' ); ?>
	</div>
	<div>
		<?php rwd_attachment_image( $image_id, 'retina', 'img' ); ?>
	</div>
</div>

Background styles:

<style type="text/css">/* rwd-background-styles */  .rwd-background{background-image:url('http://yourwebsite.com/wp-content/uploads/2020/04/header_107rule-400x152.png');}  @media (min-width: 981px) { .rwd-background{background-image:url('http://yourwebsite.com/wp-content/uploads/2020/04/header_107rule.png');} }  @media (min-width: 1441px) { .rwd-background{background-image:url('http://yourwebsite.com/wp-content/uploads/2020/04/header_107rule.png');} } </style>

HTML output:

<div class="rwd-background"></div>
<div class="rwd-examples">
	<div>
		<picture class="attachment-simple-wo-crop size-simple-wo-crop wp-post-picture">
			<img srcset="http://yourwebsite.com/wp-content/uploads/2020/04/126662-226x150.jpg" alt="alternative text">
		</picture>
	</div>

	<div>
		<img class="attachment-simple-wo-crop size-simple-wo-crop wp-post-image" alt="alternative text" src="http://yourwebsite.com/wp-content/uploads/2020/04/126662-226x150.jpg" srcset="http://yourwebsite.com/wp-content/uploads/2020/04/126662-226x150.jpg 226w" sizes="226px">
	</div>

	<div>
		<picture class="attachment-simple-crop size-simple-crop wp-post-picture">
			<img srcset="http://yourwebsite.com/wp-content/uploads/2020/04/126662-300x200.jpg" alt="alternative text">
		</picture>
	</div>

	<div>
		<img class="attachment-simple-crop size-simple-crop wp-post-image" alt="alternative text" src="http://yourwebsite.com/wp-content/uploads/2020/04/126662-300x200.jpg" srcset="http://yourwebsite.com/wp-content/uploads/2020/04/126662-300x200.jpg 300w" sizes="300px">
	</div>
	
	<div>
		<picture class="attachment-visual size-visual wp-post-picture">
			<source srcset="http://yourwebsite.com/wp-content/uploads/2020/04/126662-600x400.jpg" media="(min-width: 981px)">
			<img src="http://yourwebsite.com/wp-content/uploads/2020/04/126662-376x250.jpg" srcset="http://yourwebsite.com/wp-content/uploads/2020/04/126662-376x250.jpg" alt="alternative text">
		</picture>
	</div>

	<div>
		<img class="attachment-visual size-visual wp-post-image" alt="alternative text" src="http://yourwebsite.com/wp-content/uploads/2020/04/126662-376x250.jpg" srcset="http://yourwebsite.com/wp-content/uploads/2020/04/126662-600x400.jpg 600w, http://yourwebsite.com/wp-content/uploads/2020/04/126662-376x250.jpg 376w" sizes="(min-width: 981px) 600px, 376px">
	</div>
	
	<div>
		<picture class="attachment-retina size-retina wp-post-picture">
			<source srcset="http://yourwebsite.com/wp-content/uploads/2020/04/header_107rule.png" media="(min-width: 1441px)">
			<source srcset="http://yourwebsite.com/wp-content/uploads/2020/04/header_107rule.png" media="(min-width: 981px)">
			<img src="http://yourwebsite.com/wp-content/uploads/2020/04/header_107rule-400x152.png" srcset="http://yourwebsite.com/wp-content/uploads/2020/04/header_107rule-400x152.png" alt="">
		</picture>
	</div>
	
	<div>
		<img class="attachment-retina size-retina wp-post-image" alt="" src="http://yourwebsite.com/wp-content/uploads/2020/04/header_107rule-400x152.png" srcset="http://yourwebsite.com/wp-content/uploads/2020/04/header_107rule.png 820w, http://yourwebsite.com/wp-content/uploads/2020/04/header_107rule.png 820w, http://yourwebsite.com/wp-content/uploads/2020/04/header_107rule-400x152.png 400w" sizes="(min-width: 1441px) 820px, (min-width: 981px) 820px, 400px">
	</div>
	
</div>