I am new to web design, what is the best way to save logo for web? I am exporting as png and logo shows up too small on website. Any help is appreciated.
9
-
1file format doesn't have anything to do with the size. The size is about a) pixel dimensions of your image and b) that your HTML and CSS are set to show it at the size you want. We can't be of much more help without seeing your image and markup.– DA01Commented Sep 22, 2014 at 21:03
-
Thank you. I need to increase pixels then. Here is the logo, left top. You can barely see it. :)tanja-lippert.format.com/home– GoreteCommented Sep 22, 2014 at 21:05
-
Export/save at a larger size, then use that size in the HTML/CSS.– ScottCommented Sep 22, 2014 at 21:10
-
That image is 135 × 9. Which is really small. So, yes, you need to increase the pixel dimensions of that image. (Perhaps double it to 18 x 270)– DA01Commented Sep 22, 2014 at 21:13
-
Thank you. I am Export/png at 300 ppi and it is still small. :( I know this is a simple thing to do, but all new to me. I'm also trying to export it from illustrator to look as sharp as possible.– GoreteCommented Sep 22, 2014 at 21:23
|
Show 4 more comments
2 Answers
If it's not too complex of a logo, you should look into re-creating it as a vector and exporting it as a SVG. Not only are SVG's supported in all modern browsers, but it is the ideal image format for non-complex geometric graphics used on the web since it can scale without quality loss. This is especially useful when creating a responsive website.
http://css-tricks.com/using-svg/
A vector copy of the logo is something that you should have anyways in case it is needed in the future for print, larger display, etc.
If SVG isnt your thing, PNG is the next best choice for logos (assuming that it is not too complex). The general rule of thumb is, for graphics under 256 colors go with PNG-8, otherwise use PNG-24.
Whichever format you choose to go with, it is import that that you compress the image before deploying to the website. Uncompressed images can lead to huge file sizes which can take a toll on your page speed.
I reccommend that you read this extremely helpful Image Optimization Guide by Google.
If you open the png file in a separate browser window you can see that the logo actually is as big as you might have intended. However, the picture as a whole is much bigger and contains plenty of white space around the logo. Since the big png including the white space is fit into the small space on your homepage the logo gets very small. What you need to do is to crop the picture so the white space is removed.
