Bootstrap - multiple images file name problem

Maybe this tutorial will help.

view port meta tag, as it is commonly called as, overrides the default viewport and helps to load the style related to the specific viewport

The first of this sections starts with '@media (max-width: 480px)', which sets styles for devices whose maximum width is 480 pixels.

The second section starts with '@media (max-width: 767px)', which sets styles for devices whose maximum width is 767 pixels.

The third section starts with '@media (min-width: 768px) and (max-width: 979px)', which sets styles for devices whose minimum width is 768 pixels and maximum width is 979 pixels.

The next section is for devices with maximum width of 979 pixels. So, it starts with '@media (max-width: 979px)'.

Last two sections starts with '@media (min-width: 980px)' and '@media (min-width: 1200px)'; so the first one is for devices with minimum width 980 pixels and 1200 pixels.

I wouldn't bother for the few kb you might save in that image.
Otherwise one way is to forget the image tag and use media queries to set the background of the container element according to the screen size.

Randy, your suggestion didn't really answer my question.  

Cathal, are you suggesting that I just create one very large image and then have the system resize it? Below is link to live site that I am redoing so it is responsive.  Each button has a unqiue hero image plus on the home page, there is animation.  Are you suggesting I create a div in the position of where the image now resides and simply put the image as a background?

Live Site
http://www.wiplastic.com/capabilities.html

Actually I thought you meant the '3' images.

That page is 800kb in size, cropping a few kb off the images (which you could do just by optimizing them for the web) is not going to make much difference in the larger scale.
If you had images that were running into the 100's of kb then yes it would make sense to have smaller versions but only because you would be saving 100's of kb's.
Best thing you could do is remove the flash, won't even show on iphones etc

As I said earlier the easy way to do this is use a background image that you can set with your media queries depending the screen size

Actually, the animation is not flash.  It does work on my android phone.  But perhaps, it will not work on iphone.  Not sure.

Right now, i am not so much worried about the animation as  I am worried about getting the hero image (big honking pic to right of navigation) on each page to fit into the opening nicely.  Currently, there is a big gap on the right side that would like to get rid of.  Would making the pic that much wider and put it as a background work?

That does help ALOT on the bigger screens.  On the smaller screens I have a black background that now extends below the images.  Where is that coming from?  I thought maybe the #animation_container but that doesn't have any background color.

I think I found it!

Hmmm, now there is a huge gap below the animation on mobile device.   Is that from modfiying the carousel?  Is the height messing things up for smaller devices?

.carousel-inner .item {
    height: 280px;
    overflow: hidden
}

I think I would be inclined to go with a background image on the div and remove the image and use cover, problem with this is it will not work on IE8 or lower.  But you could add some css to counter for it.
Else you are going to be constantly fighting against yourself to get it to look right at any size.

So, maybe the original suggestion to create 3 separate images for the 3 different sizes would be the best option?

We are talking about the slider...???

well, yes and no.  the slider will only appear on the home page.  on other interior pages, there will be a hero image.  

Check out live site to see what we are trying to reproduce.
http://www.wiplastic.com/

I would go with the background image using background-size cover, add an IE shim to your site and that is IE8 and lower covered (so to speak)

Thanks for the link.  I searched for ie shim and got this page.
https://github.com/Modernizr/Modernizr/search?q=ie+shim&ref=cmdform

This looks a bit beyond what I am familiar with.  YIKES!

Maybe you can help me again?

p.s.  I see you are from the Emerald Isle.  Too bad, if you lived in the states,  I would buy you a beer for all the help you gave me today.  

p.s.s.  Shouldn't you be out having fun on a friday night nearly 11 pm?

You don't need to do anything with it but include it in your page like any other javascript

<!--[if lt IE 9]>
     <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Select allOpen in new window

And you are done.

p.s.
Very soon! My mouth is already salivating.

have fun - i am calling it a day.

thanks again!

Still not "getting this" but I will give you points for your effort and repost question.  Maybe someone else has an idea.