Grow your CSS skills. Land your dream job.

How big (file wise) should my background image be?

  • # June 25, 2013 at 9:03 pm

    No issues here, dude. Good luck with the job. (I mean that)

    # June 25, 2013 at 9:24 pm

    I DO NOT disagree with any of you that smaller is better. However, if I want to use a VERY specific photo, at a size large enough for my intended audience, how can I make it smaller than it already is?? Not a single person has answered that question.

    Not a single person“? Maybe you should tone it down a little bit and take a better look at the first bunch of replies. You’d see there’s a handful of persons giving you suggestions on how to make an image smaller than it already is. Let me quote them for you:

    Have you you tried an image optimizer like tinypng or jpegoptimizer?

    If the image is in png, use tinypng.org to compress it more.

    Using jpeg-optimizer for a while now, never had much issues.

    Use for windows a free app called pnggautlet I think.

    http://www.jpegmini.com/
    i used this and it took my jpg file way down in size and didn’t lose any quality.

    NIX
    # June 25, 2013 at 9:31 pm

    I already used jpegmini.com.

    the absolute lowest I was able to go is 225 KB.

    Thank you all for your input. (I truly mean that)

    Truth be told, I’m probably WAY too emotionally attached to [this photo](http://www.flickr.com/photos/97824681@N02/9108870713/in/set-72157634271013694/lightbox/ “photo”). The reason being, I was out until 3 AM to get it.

    Sorry for being so difficult.

    NIX
    # June 25, 2013 at 9:50 pm

    And my very sincere apologies to @AlenAbdula. I appreciate the video very much. It’s a great resource. It didn’t “totally” solve this particular issue but it wash chock-full of GREAT info.

    I recommend everyone watch it just for the hell of it.

    # June 25, 2013 at 11:40 pm

    http://www.awwwards.com/websites/fullscreen/
    I’m willing to bet that half of these are over 500kb.

    They’re probably all full of bloat too ;)

    # June 25, 2013 at 11:58 pm

    Not to keep this insane thread going but if it were me, I wouldn’t be trying to “impress” those 5 agencies with a similar style they’ve already been doing themselves. I would be unique and come up with something completely different. Basically one that blows their fucking mind.

    # June 25, 2013 at 11:59 pm

    No need for apology, we’re all here fighting the same fight–becoming better at what we do. Best of luck with your job hunting.

    # June 26, 2013 at 11:36 am

    Not sure if this was already mentioned, but when exporting from Photoshop, use “Save for Web and Devices”, instead of the usual save method. Doing this will give you much smaller file size and still give you great quality.

    Also, png’s are usually more crisp and far smaller as far as file size goes than jpegs.

    # June 26, 2013 at 11:39 am

    What about SVG’s?

    NIX
    # June 27, 2013 at 1:34 pm

    @npav @chrisburton. I agree with both of your thought processes for images that contain a handful of colors. I always use PNG and SVG where possible.

    Unfortunately, with a photograph, JPEG is my only real viable option. Of course I save for web and compress as much as possible. Also, I’ve started using progressive JPEG, because they give the illusion of a much faster load time, even though the file is generally 1-2kb bigger.

    On another note, I see this article was posted yesterday with some GREAT info concerning media queries and photos:

    http://css-tricks.com/the-layered-look/

    NIX
    # June 27, 2013 at 1:36 pm

    @chrisburton, I’m going to take your advice and go with something a little more impressive anyway.

    I’d like to have a stunning yet lightweight and responsive design. I’m kind of back to the drawing board which sucks but I’d rather do that than have some bloated site that only looks good on a handful of devices.

    Thank you everyone for saving me from myself. I’ll probably still incorporate a photo but in a smarter way.

    NIX
    # August 19, 2013 at 10:59 am

    I wouldn’t be trying to “impress” those 5 agencies with a similar style they’ve already been doing themselves. I would be unique and come up with something completely different. Basically one that blows their fucking mind.

    This was great advice @chrisburton. I’m now going in that direction. Thanks!!!

    # August 19, 2013 at 11:09 am

    In the original spirit of this thread, and because I just heard of it for the first time, there is now a lossy png option in ImageOptim http://pngmini.com/lossypng.html which seems pretty cool for reducing the sometimes-insane size of png24s

Viewing 13 posts - 46 through 58 (of 58 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".