a while ago with the help of this community I was able to set up my images to show/hide for desktop vs. mobile in my blog posts using div classes and <picture> tags, and also work out how to have specific amp-img set up for desktop vs mobile, as the div class does not work for amp pages.
I don't use these all the time, but it useful when I need to show an image in a different place for desktop and mobile, or if I have two versions of the same image that I'd like to show in the same place (eg. in between paragraphs), but I want them a certain aspect ratio depending on the device someone is using.
I used to use CSS media queries but it was getting pretty messy and adding too much work. And it was recommended to me, to not use CSS media queries for amp images.
Here's examples of how my images are inputted into my blog posts now:
I use this to show an image in one place on desktop (second image in this blog post: https://www.smartfertilitychoices.com/inositol-pcos/ ) :
<div class="hidden-sm hidden-xs">
<picture>
<source srcset="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-3.jpg" media="(min-width: 980px)">
<img src="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-3.jpg" class="alignright" alt="Inositol and PCOS" width="390" height="325">
</picture>
</div>
<amp-img class="alignright" media="(min-width: 980px)" src="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-3.jpg" width=390 height=325>
</amp-img>
And this to show the same image on mobile, just in a different place within the blog post:
<div class="hidden-md hidden-lg">
<picture>
<source srcset="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-3.jpg" media="(max-width: 980px)">
<img src="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-3.jpg" class="aligncenter" alt="Inositol and PCOS" width="390" height="325">
</picture>
</div>
<amp-img media="(max-width: 980px)" src="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-3.jpg" width=390 height=325 layout="responsive">
</amp-img>
And I use this when I want two different images to sit in the same place on both desktop and mobile (third image in the above linked blog post):
<picture>
<source srcset="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-8.jpg" media="(min-width: 980px)">
<img src="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-7.jpg" class="aligncenter" alt="Inositol and PCOS">
</picture>
<amp-img media="(min-width: 980px)" src="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-8.jpg" width=750 height=293 layout="responsive">
</amp-img>
<amp-img media="(max-width: 980px)" src="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-7.jpg" width=390 height=325 layout="responsive">
</amp-img>
Since Wordpress updated last week, I am now unable to 'update' my blog posts without it deleting parts of the html (the <picture> tags and the <amp-img> ones. This is happening sitewide for various embedded things like signup forms and videos (javascript + html) and I have solved this by using shortcodes for these things. I have tested, and a shortcode will work almost perfectly if I input the image html into the shortcode creator and then use the shortcode on the blog post. But this extra step is just creating unnecessary work and I would prefer an easier way to do this if it exists.
Here are examples of what parts disappear, and what happens when it does:
<div class="hidden-sm hidden-xs">
<picture>
<source srcset="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-3.jpg" media="(min-width: 980px)">
<img src="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-3.jpg" class="alignright" alt="Inositol and PCOS" width="390" height="325">
</picture>
</div>
<amp-img class="alignright" media="(min-width: 980px)" src="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-3.jpg" width=390 height=325>
</amp-img>
turns into
<div class="hidden-sm hidden-xs">
<img src="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-3.jpg" class="alignright" alt="Inositol and PCOS" width="390" height="325">
</div>
and
<div class="hidden-md hidden-lg">
<picture>
<source srcset="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-3.jpg" media="(max-width: 980px)">
<img src="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-3.jpg" class="aligncenter" alt="Inositol and PCOS" width="390" height="325">
</picture>
</div>
<amp-img media="(max-width: 980px)" src="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-3.jpg" width=390 height=325 layout="responsive">
</amp-img>
turns into
<div class="hidden-md hidden-lg">
<img src="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-3.jpg" class="aligncenter" alt="Inositol and PCOS" width="390" height="325">
</div>
- and both of those above examples means that the image is going to show twice in the amp version of the blog post, but will continue to work fine for the regular non-amp version.
and lastly, this:
<picture>
<source srcset="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-8.jpg" media="(min-width: 980px)">
<img src="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-7.jpg" class="aligncenter" alt="Inositol and PCOS">
</picture>
<amp-img media="(min-width: 980px)" src="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-8.jpg" width=750 height=293 layout="responsive">
</amp-img>
<amp-img media="(max-width: 980px)" src="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-7.jpg" width=390 height=325 layout="responsive">
</amp-img>
turns into:
<img src="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-7.jpg" class="aligncenter" alt="Inositol and PCOS">
- which means only one variation of the image shows /inositol-and-pcos-7.jpg (the mobile version). I know a way around this one in particular is to just have the desktop version of the image in this place, but I'd prefer to not have to do that on mobile if possible. I have other wide images set up for desktop in other blog posts that have text in them, and it's hard to read those once they are squished down to a mobile size.
If anyone has any insight into other ways to embed images into a blog post, with the ability to show/hide for desktop vs mobile + including amp images specifically. Thanks!