Good tips for images and headers

[Carla the Moose]

This is the main area I've wrestled with the most: load times on images.

I do my research but never seem to pull together a good understanding of how I should approach image quality and load times. I have my first web design client (my mom! hehehe!) and am using this experience to really fine tune my techniques.

I'm using the Minimum theme and am working with a large image size for the homepage. I uploaded a test image as a placeholder. When I clear the cache it loads slowly the first time around. Other placeholder photos on the site (blog post photos and her author photo) load slowly, too.

For the header image I downloaded a photo that comes in one size: 3060px x 2713px (300 dpi). I know 300 dpi is print quality. I think but am not sure that for web purposes 72 dpi retains good quality but much faster load times. Is this true?

As I layer together images to create the final header image, should I keep the individual files full strength and just edit the end product when I'm done?

Minimum stretches or shrinks the header image to fit the homepage. But does it make sense to only upload something that matches the exact dimensions of that space to help with load times?

I look at tons of high-traffic sites with great images and wonder, how are they doing that? Everything loads so quickly!

I have tried and tried to find some good tips, and never seem to come up with anything that helps. I'd love to know if you can offer any insight for me.

The site I'm working on isn't active. There really isn't anything to see yet.

Thank you!

[Carla the Moose]

I just found a post that says DPI doesn't apply to web images. The web only works in pixels.

http://www.webdesignerdepot.com/2010/02/the-myth-of-dpi/

That's the first I heard of that. It says adjusting DPI for a website image is a wasted step.

Good to know!

[Author]

Posts