Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

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

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

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

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]