Avoid browser scaling of images

Hi,

I’ve started working with WP 2 month ago, so I might not have found all hidden gems within the Codex by now. Since the beginning I’m trying to build a fully responsive Bootstrap 3.2.0 version of Twentyforteen theme. Analysing the output of Twentyforteen shows that nearly 100% of the images (all except post_thumbnails) are scaled down in browser. Assuming that the latest theme shipped with the product is state-of-the-art, WP seems to lack modern image handling functions. After selecting an image size for an in-text image in the editor, this image is hard-coded into the output. Depending on the number of sidebars, single and index templates this must lead into browser scaling for all templates which do not offer full width.

I will probably need a content filter doing the following:

1. Determine, which image size is selected by the user
2. If in singe context, and single is full-width, use it
3. If not, ignore the user selection and deliver the image suitable for the available width.

I could get this working for post_thumbnails, galleries and gallery images as well as sidebar widgets (incl. post formats “image” and “video”, at least within the sidebar), but I failed for all in-text images. The available hooks “image_send_to_editor” and “img_caption_shortcode” are helpful to clean up the markup and get rid of inline styles, but they are no help when it comes to replacing the image markup (file) itself.

I would like to find a solution for this problem, and I would like to share the result. Maybe someone is struggling with the same problem, and we could join forces or share ideas?

Regards,

Thomas