Welcome to WebmasterWorld Guest from 18.204.56.104

Forum Moderators: not2easy

Message Too Old, No Replies

Proper Logo design/implementation

     
3:48 pm on Feb 17, 2017 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 31, 2003
posts: 919
votes: 1


What is the proper method for designing and implementign a logo in a mobile responsive site? I currently link to my logo from with the html. But the logo is a bit fuzzy. I notice sites with super crisp logo that when you 'view image', the image is much bigger than it appears on the page. How do I achieve this? Thanks!
4:43 pm on Feb 17, 2017 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Sept 4, 2001
posts:2297
votes: 100


Generally speaking, the logo image should be no larger than the maximum size you want it to be, say 200px150px. In your CSS you would set a style for the logo to the effect:

logo{max-width:200px;height:auto}

This will automatically resize your image on smaller screens while capping its size on larger ones so it is not fuzzy.
4:50 pm on Feb 17, 2017 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 31, 2003
posts: 919
votes: 1


I do that now and the image is fuzzy. How are people doing what I detailed above in my initial question?
5:18 pm on Feb 17, 2017 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member tangor is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Nov 29, 2005
posts:10590
votes: 1126


Depends on the image itself. JPG GIF PNG SVG .... each has a different look.

If there are photo elements in your logo resizing can be problematic.

A Text logo should work well, particularly if it is delivered by a web font.

Logo designs can be the hardest part of developing a brand.

Rule of thumb: scale small from large always works. My logos, example, are 2024px x 2024x
5:23 pm on Feb 17, 2017 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 31, 2003
posts: 919
votes: 1


And how do you scale them? Can you reference me to something? Or provide some code?
6:23 pm on Feb 17, 2017 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4563
votes: 364


Start with the proper image file format. If the image is a photo or contains many gradient shades of color, use .jpg. If an image has only a few distinct colors good contrast and little or no shading/gradient colors, a .png would offer better compression.

Use an image editing tool such as PhotoShop to produce a good quality image to the scale you need. There are at least dozens of fairly easy inexpensive or free tools to scale images. How to scale? Set height or width and scale proportionally so the image is not distorted.

The css part is easiest. Set a default image max-width of 100% and control the image size automatically by the size and padding of its container element (assuming the container width is responsive).
6:28 pm on Feb 17, 2017 (gmt 0)

Senior Member

WebmasterWorld Senior Member Top Contributors Of The Month

joined:Nov 13, 2016
posts: 1194
votes: 288


You can use the "srcset" attribute of the <img> tag, (there is also a <picture> tag, but I found the img + srcset was working better). Like that you can serve different size of an image based on device resolution.

If your logo is suitable for it, the best remains the SVG format.
6:57 pm on Feb 17, 2017 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15941
votes: 889


But the logo is a bit fuzzy.

Is it the same on all devices? Historically, Guess Which Browser was famously bad at resizing images. It will be different, of course, on mobile platforms.

If you can't go with SVG, you're really better off creating a small number of static files and serving them at actual size, selecting the one that's the best fit for the user's device. That way you're not expending bandwidth sending material that can't be displayed (like a 600px image displayed at 150px), and you don't have to trust the user-agent to get things right.

Edit: I took a quick run over to caniuse dot com.
IE9-11 desktop & mobile don't properly scale SVG files.
How can you “not properly scale” SVG?
10:03 am on Feb 18, 2017 (gmt 0)

Senior Member from GB 

WebmasterWorld Senior Member graeme_p is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Nov 16, 2005
posts:3022
votes: 214


You really should be using SVG. It scales perfectly and is now widely supported. Everything except IE 8 and below works.

However, there is a problem. IE can mess up aspect rations when resizing. Solutions here:

[gist.github.com ]

Finally, the vast majority of logos (and similar graphics) should be designed in a vector format, and should therefore be easy to convert to SVG. If you have existing graphics in raster formats, get them redrawn.

Anyone still drawing graphics in a raster image editor, has seriously obsolete skills and you should no more employ them than you would a programmer who insists on using punched cards, or a carpenter who does not own a hammer because you can drive nails in with a screwdriver.
2:05 pm on Feb 18, 2017 (gmt 0)

Senior Member

WebmasterWorld Senior Member Top Contributors Of The Month

joined:Apr 1, 2016
posts: 2741
votes: 841


What Greame said. I would just like to add, that you can set the width and height using media queries so that the svg scales to the right dimensions on all devices.

Also there are several online tools to converts jpeg, png and other formats to svg. Sometimes the result is okay and not too big, try that first before getting it redrawn.