Best way to fix blurry logo on mobile?

Web Design
#1

When viewed on my macbook, the logo looks crisp, but when viewed on a mobile device, the logo looks blurry. I increased the size of the source file, but it did not seem to have any effect whatsoever on how it was displayed.

This is my website (building it with wordpress CMS):

http://hollyamber.com

Please let me know if you have suggestions. I’ve heard .svg files might be a good option for this type of issue sometimes. I haven’t tried it yet, but I will try it tomorrow. I need to go to bed, but I will try some more things later when I have a chance and will check back on this thread to see what suggestions are offered. I figured I might as well post it now so there is time for people to respond with advice.

Thank you.

#2

Probably svg as it will scale accordingly. The problem is if you exported the logo at 50x50px, and later if you scale it down or up it will look blurry. Keep the size of the image the same, if you need a smaller size logo i’d suggest to align it to a pixel grid and export it at that size (for example 40x40px) for phones.
I’m not really experienced with this, however I think that should fix it.

#3

On a smaller screen raster files will sometimes go blurry for no obvious reason - with a photo its not so bad but you want your logo to look its best in all situations. SVG files are vector files so will scale up or down without any loss of quality.

#4

@StudioMonkey On larger screens rastergraphics go blurry because the missing pixels have to be compensated. On smaller screens rastergraphics distort because not all pixels can be displayed and need to be corrected as well.

As @nikko wrote it’s best to use svg when you want sharp graphics on each size. There’s just no size of rastergraphics that’s always sharp when you do scaling.

[Edit] BTW, if you like to know WHY svg looks better a blog-article I once wrote about raster- and vector-graphics might help you. It also has some visual examples with animating raster- and vector-graphics that clearly shows you the difference in quality/sharpness:
What’s the difference between raster and vectorgraphics

#5

I’d also suggest “web-editing.” More bulleted text, less paragraphs. Make it easy for viewers to scan and comprehend.

http://www.webwritingthatworks.com/DResourcesSOYOU04webeditingr.htm

#6

If you don’t want to use svg, and are creating the icons in illustrator, goto ‘View > Pixel Preview’ and edit your icon accordingly. There are youtube tutorials and google searches that will help you understand and create pixel perfect icons.

#7

Thank you

#8

I just created a .svg file version of my logo, but apparently it’s not usable on wordpress. If I try to upload the file, it says, “This file type not permitted for security reasons.” I haven’t done this before.

#9

I’m trying this wordpress plugin, but I’m probably going to have to finish later. I’ll let you know if it works or not.

#10

Sounds like the resolution of your mobile device is higher than that of your MacBook.

To resolve that, you can use SVG images, as mentioned already, or you can save your image in raster format (PNG, GIF, JPEG) at twice the size you want it to be displayed at 72 ppi with “@2x” at the end of the name (before the file extension), then save a version at half that size (“actual” size) at 72 ppi.

For example:

  • save a 400px x 200px file at 72 ppi saved as “logo.png”
  • save an 800px x 400px file at 72 ppi called “logo@2x.png”

Follow the instructions for downloading and installing this script, which will load the retina (@2x) image only if it detects a retina (higher-resolution) monitor or device.

http://imulus.github.io/retinajs/

I have used this on many sites. It works great. It might be tricky the first time you do it, so feel free to reach out with questions.

#11

just add this to your wordpress functions

function cc_mime_types($mimes) {
  $mimes['svg'] = 'image/svg+xml';
  return $mimes;
}
add_filter('upload_mimes', 'cc_mime_types');

as of wordpress 5 you need a valid xml file for the svg. open the svg in your text editor and add this on your first line

<? **xml** version="1.0" encoding="utf-8"?>

replace the lt and get with < and >