Website Logo - Image Type File Formats

I am just starting in web design so I would appreciate any comments, recommendations and advice regarding the page that I am developing at the moment at http://www.aljoufilaw.com.

My client would like me to embed photos in the pages with sharp and high resolution images. My problem is choose what image file am I going to use that could offer good quality and high resolution. This concerns me because the photos becomes blurry and pixelated when zoomed in and I don't want this to happen. See the logo for example, it is not clear anymore when zoomed in.

I am kindly waiting for your opinions and help.

transparent png as you've done is fine.
if you make it twice the size, then resize it with css you will get a crisper image, in theory. this also helps for retina displays, which then displays the image at 1:1.

as its a monotone logo, you shouldn't have any problems with keeping the file size down.

as for zooming - well you cant avoid that.
make the page readable enough that it doesn't need to be zoomed.

There are 2 other options here, at least regarding the logo:
1. That logo is just text. Use text with @font-face instead of an image.
2. Use svg. svg is a vector graphic that can resize to infinity and never be blurry. There are some compatibility considerations, but none that can't be remedied with modernizr.

I don't think .svg is the answer quite yet for support reasons. I think you're referring to using the vector within the site and though it is possible it is not the time. We'll get there one day, but today is not the day.

As ronald said, if you have the font you might as well use that. I like that idea for such a simple logo. You have no heading tags on your site and if you're reluctant to add these this may be your best opportunity to add an <h1>.

One thing to note is that a logo should be created in vector so as to allow the ability to be used across all mediums. One of the more important reasons is the ability to the logo to be scaled. You might ask to see if they have their original vector file that you can scale and save out of. If not you may look into re creating that file in vector to allow you to scale it properly, without losing quality.

you cannot avoid pixellation if zoomed in a lot on a png.

I appreciate your comments, and thank you.

You might ask to see if they have their original vector file that you can scale and save out of. If not you may look into re creating that file in vector to allow you to scale it properly, without losing quality.

Click to expand...

The logo was saved in Illustrator and was exported as .PNG, is there a way to export it or save it as .svg? Is SVG format standard file to be used in websites like for logos?

Thank you once again for your feedback.

HireLogo said:

I don't think .svg is the answer quite yet for support reasons. I think you're referring to using the vector within the site and though it is possible it is not the time. We'll get there one day, but today is not the day.

Click to expand...

Say hello to modernizr
If file download is a consideration, you can make a custom build that contains only feature detection for SVG, and concatenate that with other scripts.

is there a way to export it or save it as .svg

Click to expand...

Inkscape uses SVG as it's "native" format and can open .ai files.