Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Basics (2014) Basic Layout Backgrounds: Size and Position

Frank D
Frank D
14,042 Points
Posted by Frank D
Frank D
14,042 Points

Fast connection vs poor background-image load?

I have a fast internet connection but when i refresh the page it takes a fraction of a second before the background image appears, so that the orange background-color display first.

Is that normal? Is there any way to help the background-image to load faster or avoid that 'slow' process to happen?

1 Answer

Seth McCombs
Seth McCombs
16,767 Points
Seth McCombs
Seth McCombs
16,767 Points

Images can run large, causing them to take a little extra time to load. This is where optimizing images for websites comes into play, the formats images are saved in, resolutions, etc, can make a world of difference when displaying on a website. Faster connections help, but nothing beats good optimization! Good luck!

Frank D
Frank D
14,042 Points
Frank D
Frank D
14,042 Points

Hi Seth, thank you for your quick reply. The background-image on this video tutorial is 2.1 MB, a bit too large then! https://teamtreehouse.com/library/css-basics/basic-layout/backgrounds-size-and-position

Which is a the average image-weight for a proper optimization you would suggest?

Yet, I wanted to ask whether jpg is better than PNG for optimization.

Seth McCombs
Seth McCombs
16,767 Points
Seth McCombs
Seth McCombs
16,767 Points

Hey Frank!

Taken from a few google searches...

PNG format is a lossless compression file format, which makes it a common choice for use on the Web. PNG is a good choice for storing line drawings, text, and iconic graphics at a small file size.

JPG format is a lossy compressed file format. This makes it useful for storing photographs at a smaller size than a BMP. JPG is a common choice for use on the Web because it is compressed. For storing line drawings, text, and iconic graphics at a smaller file size, GIF or PNG are better choices because they are lossless.

A decent rule is - JPEGs are for photographs and realistic images. PNGs are for line art, text-heavy images, and images with few color

Image size can vary based on the application, but there's tools in places like Photoshop than can save images for web, sacrificing a little quality or resolution for some size saving. I believe treehouse has a few videos, and blog posts! (Check the photoshop foundations course!)

[http://blog.teamtreehouse.com/optimize-images-web]