Bootstrap - multiple images file name problem

I was advised to create multiple image size of same image so that bootstrap can call the correct image that "fits" the proper screen size.  

For example, p_1.png is  sized to 752x283.  I was told that I need to create two different sizes of this exact same image.  

I am confused as to how to tell bootstrap which file image to use when the screen is at a certain size.  I cannot save the image (with 3 different sizes) as the same file name.  

http://nsitedesigns.com/nsitedesigns/wiplastic_scott/index.html
http://nsitedesigns.com/nsitedesigns/wiplastic_scott/wiplastic2.css
nsitedesignsAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
GaryConnect With a Mentor Commented:
Ignore the flash bit - that's the youtube player.

What you could do is add

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


and
.carousel-inner .item img {
    width: 100%;
}


You'll lose a bit of the image on larger screens.
0
 
Randy DownsOWNERCommented:
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.

0
 
GaryCommented:
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.
0
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

 
nsitedesignsAuthor Commented:
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
0
 
GaryCommented:
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
0
 
nsitedesignsAuthor Commented:
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?
0
 
nsitedesignsAuthor Commented:
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.
0
 
nsitedesignsAuthor Commented:
I think I found it!
0
 
nsitedesignsAuthor Commented:
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
}
0
 
GaryCommented:
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.
0
 
nsitedesignsAuthor Commented:
So, maybe the original suggestion to create 3 separate images for the 3 different sizes would be the best option?
0
 
GaryCommented:
We are talking about the slider...???
0
 
nsitedesignsAuthor Commented:
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/
0
 
GaryCommented:
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)
0
 
nsitedesignsAuthor Commented:
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?
0
 
GaryCommented:
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]-->

Open in new window


And you are done.

p.s.
Very soon! My mouth is already salivating.
0
 
nsitedesignsAuthor Commented:
have fun - i am calling it a day.

thanks again!
0
 
nsitedesignsAuthor Commented:
Still not "getting this" but I will give you points for your effort and repost question.  Maybe someone else has an idea.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.