I am new to web design and I am currently developing a website now. What is the best image file format that I could use for the website logo that renders high resolution even zoomed in.
The current logo of the website that i am doing now, seems to be blurry and pixelated when you zoom it in. This is PNG format.
I really appreciate your help and suggestions how i could do this properly.
Logos are best designed in the vector format (.svg). Use of PNG format allows for transparency channel and millions of colors depending on number of color bits. GIFs are ok if you can deal with 256 colors or less. JPGs provide control for most web images, but is a lossy format. How any image looks depends on the quality of the image being used. Best to always make the best image you can as you can always lower the quality if need be.
Logos are best designed in the vector format (.svg). Use of PNG format allows for transparency channel and millions of colors depending on number of color bits. GIFs are ok if you can deal with 256 colors or less. JPGs provide control for most web images, but is a lossy format. How any image looks depends on the quality of the image being used. Best to always make the best image you can as you can always lower the quality if need be.
Thanks for the reply. I was just wondering if there is a standard format used for websites.
Thanks for the reply. I was just wondering if there is a standard format used for websites.
The format depends on the image. If you have an image that has transparency, but not more than 256 color, then the GIF format is good. If you have an image that has transparency, but more than 256 colors (millions), then the PNG format is good. If you have a photo gallery, your thumbnails could be low-res lossy JPGs with links to a larger, better quality image. SVG is best for zooming without distortion.
"All major modern web browsers—including Mozilla Firefox, Internet Explorer 9, Google Chrome, Opera, and Safari—have at least some degree of support for SVG and can render the markup directly. Earlier versions of Microsoft Internet Explorer (IE) do not support SVG natively." SOURCE
I use GIF for logos because you can zoom in without getting blurry. Indeed quite the opposite, it gets blocky instead! Just remember to minimise the color depth to what you actually need.
Presuming this "zoom" capability you're looking for is the web browser zoom (ctrl +), then the best way I can think of doing this is to use an image that is several times larger than the default, then when the browser zooms in, the additional detail of the image will show. So for example if your default logo is 200x100 pixels, create a version at 400x200, and then display it with <img src="logo.png" style="width:200px">. That will scale it down to 200x100 in the browser, but allow it to double in size if needed.
use illustrator for vector based logo so even zoomed in the logo will be clear and sharp plus will also have high quality if going on print but requirements are of that type then photoshop or even fireworks would be fine to perform the job. the png then gif followed by jpeg are quality formats.
Reply With Quote
Originally Posted by Major Payne
Bookmarks