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!
Marshall
4:43 pm on Feb 17, 2017 (gmt 0)
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.
textex
4:50 pm on Feb 17, 2017 (gmt 0)
I do that now and the image is fuzzy. How are people doing what I detailed above in my initial question?
tangor
5:18 pm on Feb 17, 2017 (gmt 0)
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
textex
5:23 pm on Feb 17, 2017 (gmt 0)
And how do you scale them? Can you reference me to something? Or provide some code?
not2easy
6:23 pm on Feb 17, 2017 (gmt 0)
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).
Dimitri
6:28 pm on Feb 17, 2017 (gmt 0)
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.
lucy24
6:57 pm on Feb 17, 2017 (gmt 0)
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?
graeme_p
10:03 am on Feb 18, 2017 (gmt 0)
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:
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.
NickMNS
2:05 pm on Feb 18, 2017 (gmt 0)
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.
