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
Janos Antal
1,451 PointsInserting formatted image vs format with css?
Hello Guys!
I am really interested in this topic, which is a better or more elegant method in bulding websites. Formatting the images before I insert it into the webpage or insert them in whetever resolution and do the formating with css?
thx in advance
cheers
4 Answers
Ryan Field
Courses Plus Student 21,242 PointsIn terms of best practices, it's always better to have smaller images, unless they are the actual content that you are trying to show. By this, I mean that if, for instance, you are making a portfolio page for photography or art, it's better to have separate thumbnails (smaller images) then call the larger (or full-size) images in as necessary via AJAX or another method only when the user clicks on them.
Resizing and formatting with CSS will still require the entire image to be loaded, and if you have several large images on your site, it can really slow down loading times.
On the other hand, if you're using a big fancy photograph for the background image, then that really can't be helped and you can go ahead and load the full-resolution image.
Bobby Verlaan
29,538 PointsIn my opinion it is best to first think about what the image resolution needs to be on the web, before you upload the image. Change the image in e.g. Photoshop or GIMP and save it webfriendly with Save for Web. Than upload that copy to your website. In that way your image will stay cristal clear on the wished for resolution and will be optimized to save bandwidth.
If you want to make further adjustments to the image that are essentially not part of the image. Such as adding a padding/border, rounding corners. I'd prefer to use CSS to make the photo prettier displayed.
And just like Ryan says. If you want to show 4 or more images in thumbnail format first, it may be worth your while to save smaller thumbnail pictures, to make your page load faster.
Janos Antal
1,451 PointsThank for the answers guys. And what about the following? Format the picture's width and height in a program like PS or insert in the page at set it with max-width and max.height in CSS? Or setting max width and height in CSS is not very effective in responsive design right?
Bobby Verlaan
29,538 Pointsmax width and height in pixels is just fine in responsive design, as long as you define the (standard) width and height in percentages. E.g. As long as the width percentages aren't exceeding the max-width in pixels, they will be responsive.
It's best practice to use optimized images to minimize downloading time of a website, so I'd go for formatting width and height before using the image in the website.