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!
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
Voyti 1
1,854 PointsWhat does it mean that the icons must be double size to look sharper?
What does it mean that the icons must be double size to look sharper? In this video: https://teamtreehouse.com/library/how-to-make-a-website/adding-pages-to-a-website/add-iconography in 8th minute, it says: "Once again similar to our footer images, these images are slightly larger than they need to be. In fact they're double the size that they need to be, but sizing them down will make them look sharp on high resolution displays and give us the extra visual fidelity that we need." Does it mean that we need to set their size on the page 2x bigger, so in this case 20px instead of 10px that we would like to have, so they are in higher resolution? What does it mean sizing them down will make them look sharp? Also, how can I post a question to be seen in Video Questions section, rather than in general topic, like in this case HTML?
3 Answers
doesitmatter
12,885 PointsHi Woyteck Swiatly,
This is a good question, it can be kind of confusing if you aren't farmiliar with high DPI screens.
Does it mean that we need to set their size on the page 2x bigger, so in this case 20px instead of 10px that we would like to have, so they are in higher resolution?
No. You should never give an image on your page a higher resolution than it already has (unless if you absolutely have to). If you do stretch the image, it will become pixelated, this does not look good.
What does it mean sizing them down will make them look sharp?
On a regular 1080p display, it won't make a difference at all. But suppose some user has a 4k screen. If he sees your 200px by 200px image it will in fact for them be something like 400px by 400px. This makes your images look pixelated and bad for this person. That is why Nick reccommends that you should always have your images have a resolution which is twice as large as the resolution which you plan to use in your page.
For example I want to display an image on my page with a width and height of 200px by 200px. I could just use this image:
But this won't look good on displays with a much higher resolution, it will be scaled, so instead we should use:
We then select this image with css and downscale it to 200px by 200px. Now this image will look sharp on higher resolution displays as well!
img{
width: 200px;
}
I hope this helped!
Voyti 1
1,854 PointsYou're right. It worked this time. I must've been doing something wrong before. Thanks again.
Voyti 1
1,854 PointsWhen I click Get Help button, under the video, it only let me choose one of the general topics, like Design, CSS or HTML
doesitmatter
12,885 PointsI tried doing and it worked for me. What I did is click Get Help under video > Enter quesiton > Enter details > Start discussion. Don't you get the option to enter a question?
Voyti 1
1,854 PointsVoyti 1
1,854 PointsNow I understand. Thanks a lot for a fast reply. Anyone can advice on how to post a question to be displayed in the Video Questions section, rather than in general topic, like in this case its in HTML section instead of: HTML -> How to Make a Website -> Adding Pages to a Website -> Add Iconography ?
doesitmatter
12,885 Pointsdoesitmatter
12,885 PointsAt the bottom right hand side there is a green Get Help button. In case you need help on understanding a video, else if it is in a code challenge or quiz its on the top somewhere I think.