How to bend responsive images in Wordpress

Each of those questions is a thread in of itself, but I'll do my best...

1) It depends on what you're using the images for. If they are part of the content, it's fairly standard to just use the Media Library, so you have access to them later if you need it. For theme specific files, it's best to use a images folder in your theme directory.

2) I don't know of a function, but the URL string is consistent: it's always /wp-content/uploads/[year of upload]/[month of upload]/file_name.ext

IE: /wp-content/uploads/2014/01/myPic.png

3) As far as I know, WordPress just pulls whatever file you tell it to. When you upload using the Media Library, it creates new files for each thumbnail size. You have to call the specific one to access it. It will not happen automatically.

4) Each image size you define is unique. There are no subsets (like a multi-level array), but each one is still accessible by the name you provide. If you structure your names using a subset naming convention, that's up to you.

5) Considering there still isn't a true consensus on responsive images period, it's too early for a best practice for responsive images for WordPress. That blog post is a great start, but like most responsive image solutions out there it's nearly as much extra work as just using PictureFill.

Thanks! Yeah i am aware of that, and normally i tend to ask one question per post, but i thought in that matter splitting up the issue in several sub posts would be counter productive.

1.) ok as i thought. content into the media library and layout related stuff into the img directory.

2) i found two options meanwhile. Either with content_url()

<img class="testclass" src="<?php //echo content_url() . '/uploads/2014/01/'; ?>frontpage-4-720x252.jpg" alt="logo"> 

or with wp_get_attachment_image_src()

<?php
$attachment_id = 239;
$size = 'respsmall';
$image_attributes = wp_get_attachment_image_src( $attachment_id, $size ); // returns an array
?>

<img src="<?php  $image_attributes[0]; ?>">

3) Oh ok, i guess I expect and and project too much into plain facts. Just seeing different sized versions of a picture I implied Wordpress would exchange images if the width allows. But I get it ;))

4) No I guess my question was a bit misleading. Basically I had the following in mind. Would it possible to distinguish in functions.php:

<?php
    if($hook == x) {
    add_image_size('bps1-small', 410, 9999);
    add_image_size('bps1-medium',750, 9999);
    add_image_size('bps1-large', 920, 9999);
}
else if ($hook ==y) {
    add_image_size('bps2-small', 360, 9999);
    add_image_size('bps2-middle', 520, 9999);
    add_image_size('bps2-middle', 820, 9999);
}
else {
    add_image_size('bp3-small', 220, 9999);
    add_image_size('bp3-middle', 820, 9999);
    add_image_size('bp3-large', 1200, 9999);
}
?>

I mean to have a conditional image creation routine. So that there aren't nine versions created but only the three necessary for the image and the breakpoints in the context. But aside that i am still a bit puzzled which hook might do the trick.

5) Yep I know a consensus is far far away. But I just wondered which solution people use recently along with Wordpress. And yeah just using Picturefill was my basic goal. The described method was just an easy automatisation for the html markup as well as the image versions creation and their naming. Question 4 is basically based on my research on the Picturefill usage.

Thanks again for the feedback and input! Cheers Ralf

You're better off creating all of the image sizes. They don't take up very much space, and you may need them at some point anyway. Such is the nature of responsiveness (yay.).

Going back to the article you linked before, it's a really interesting way to implement PictureFill without the nightmare markup. That being said, my experience has shown me that just using max-width:100% goes a long way in solving most of the responsive image issues you're going to run into, at least until the W3C makes up their minds on how to move forward.

If you have so many images that resources are that much of a concern, you may need to rethink your design, or get creative with things like lazy loading. Going image heavy on mobile isn't usually a good idea. WordPress is already bringing enough to the table that your images are the least of the resource issues. No need to pile on.

Yeah i am already tending to that kind of procedure finally and just create all images cuz working around that at the moment seems to be a nightmare. But I just feel uncomfortable creating resources i don't really need. It's not the loading but just the webspace they take even they aren't used.

Yep max-width:100% i am also using already. That is one of the most fundamental properties in respect of responsive design ;)

Well will give the solution of the article a spin this afternoon.