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
Sara Vaughan
Courses Plus Student 1,448 PointsResizing image?
I uploaded an image and it looks huge on the page. How do I make it smaller?
MD MUSTAFEEZ ALAM
997 Pointshey sara, how are you just do simple step according to your will,for example if you want to resize your picture in to 360*240,type <img src="yourimagename.jpg" alt="imagename" width="360" height="240" />
4 Answers
Casey Ydenberg
15,622 PointsHi Sara - there are a few different way - probably the best is to first edit the image in Photoshop down to a reasonable size - that way, you can be sure your users aren't having to download a huge image that they don't need.
You can also control image size through the img width and height attributes and by setting the width and height in CSS.
Dan Whiting
12,661 PointsHey Sara,
Casey is absolutely right and the best way is to edit the image in Photoshop or any image editor (like Gimp if you don't have Photoshop) or through CSS. One thing to take into consideration, is to make a thumbnail of the image and upon a click, the user can view the actual size of the image. Also, changing the image to a JPG or SVG could help with file size and limit http requests. I realize this wasn't your initial question, just wanted to add those suggestions for website optimization.
MD MUSTAFEEZ ALAM
997 Pointshey sara, how are you just do simple step according to your will,for example if you want to resize your picture in to 360*240,type <img src="yourimagename.jpg" alt="iimagename" width="360" height="240" />
terminator genesys
1,969 Pointsin the CSS file select your image with a class or just the basic element selector and give it a width of 100% ; and your image will perfectly fit in any screen size and resoulation
Sara Vaughan
Courses Plus Student 1,448 PointsSara Vaughan
Courses Plus Student 1,448 PointsThank you both for your answers. I don't know how to resize an image, so I'll try to resize it on CSS. Or I just won't use a different image until I get more training on such things. I'm a true beginner. Thanks!