Mobile app version of vmapp.org
Login or Join
Moriarity648

: Logo for website 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.

@Moriarity648

Posted in: #Logo #WebsiteDesign

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.

10.02% popularity Vote Up Vote Down


Login to follow query

More posts by @Moriarity648

2 Comments

Sorted by latest first Latest Oldest Best

 

@Gloria351

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.
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.

10% popularity Vote Up Vote Down


 

@Samaraweera207

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.

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme