Treehouse: Grow your CSS skills. Land your dream job.

Best practice for image sizing (this or that)

  • # May 28, 2011 at 2:37 pm

    Hello. I was wondering which of these methods is considered the best practice for defining image height/width. Thank you for the suggestions!


    In css/style.css:

    img.large {
    width: 700px;
    height: 400px;
    # May 28, 2011 at 2:43 pm

    My personal opinion is to use CSS for images. It’s just easier to go into your stylesheet and make the changes to a group instead of one by one. As for best practice, it’s more of a preference.

    # May 28, 2011 at 3:10 pm

    Thank you for the input Chris. I generally use CSS also, however I was recently told it could be better to define the width/height in the image tag for page loading purposes. Supposedly by doing so, the space defined for the image holds true until the page is fully loaded. Made me curious as to what everybody else did and experienced.

    # May 28, 2011 at 3:46 pm

    Hmm, I’ve never heard that before. May I ask who told you this? I use inline styling when a stylesheet is not needed because the code is too limited to load an additional file.

    # May 28, 2011 at 3:57 pm

    A colleague of mine. Here is something I found via google, which ignited the debate. Not sure how reliable the information is—seems to be individual opinions also.

    # May 28, 2011 at 4:14 pm

    I believe though that if your loading an external stylesheet in your head section that it is to be rendered before anything else. Wouldn’t that totally disprove this theory if you have img tags in your body using inline styling?

    # May 28, 2011 at 4:23 pm

    Yep it should!

    # May 29, 2011 at 2:23 pm

    A reminder to not be resizing very large images (ie 2mb) because the end user will still have to download the entire image.

    # May 30, 2011 at 2:23 am

    CSS is always the smarter option. Try and keep all your design stuff together in one place.

    # May 31, 2011 at 12:59 pm

    If you have a lot of images that are not the same size, using just css can be more cumbersome. But, ideally it is best. As for image resizing, you shouldn’t really be using the browser to do that at all.

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.