Hi folks, I'm having a conceptual problem here.

 

I've heard some feedback on my website (home page) that my images aren't sized properly (they're too big) and it's affecting page load.

 

I'm using media queries, so the images are bigger or smaller depending on screen size.

 

How do I size them properly?

 

Thank you!

 

Edit: I'm just talking about the photos on the home page, not the logo/illustration in the header.

You need to optimise your images, bunnybite1.jpg is 141kb is size, I ran that through my optimiser and got it down to 40kb at 90% quality which is a big saving.

 

Optimise all the photos and you should be able to halve total image file size and download time.

Responsive CSS:

 

 

.image_css {
width:100%;
height:auto;
}
 

You need to optimise your images [...]. Optimise all the photos and you should be able to halve total image file size and download time.

 

Thank you for the suggestion! What is an optimiser, and what does it do?

 

 

Responsive CSS:

.image_css {

width:100%;

height:auto;

}

 

Thank you! But that's basically what I've done. I'm wondering what size should the images be? (Not what size should they render on the browser, but what size should they be? Right now they're 300x300px, is too big.)

Thank you for the suggestion! What is an optimiser, and what does it do?

BlueDreamer is talking about image compression. It can be done when you export your images from PS or Gimp.

Take a look at this thread for details

http://www.webdesignerforum.co.uk/topic/70610-how-to-reduce-image-size-as-much-as-possible/

There's a whole load of different ways to make your images responsive and only load what specific images you need depending on screen size, but unfortunately there isn't a 'perfect' way to do it - one of my gripes with RWD. Try looking at this site, it seems to tackle the problem quite well.