Community Forums › Forums › Archived Forums › Design Tips and Tricks › Best logo settings for retina displays
Tagged: retina images
- This topic has 3 replies, 3 voices, and was last updated 7 years, 5 months ago by klr5045.
-
AuthorPosts
-
August 6, 2015 at 3:00 pm #161632newedgemarketingMember
Having just upgraded my mac for a macbook pro with retina it seems my logo looks awful on retina displays - fuzzy lines around the outside of the graphics.
I should point out it looks fine on a STD display.
I know i could just live with it for now but I want to try and figure out a solution.
Here's what I've done so far...
I should point I'm quite familiar with photoshop and illustrator I used to be a designer (although not graphic) so can use both quite well.
i've got my logo as vector and resized twice screen resolution in terms of pixel size so std size should be 320x85 so now i have it at 640x170 and saved for web as a png 24bit (i've also tried 8bt, jpg and gif just for kicks) trough illustrator and photoshop
png is the best but on a retina display i still get fuzzy outlines around all the edges.
has anyone found a solution to this?
http://www.newedgemarketing.com.au/August 7, 2015 at 9:30 am #161702David ChuParticipantHi,
You're so close - you've done all the background work. I looked at your theme's CSS, I was surprised to see no code example of retina stuff... some apparently have retina examples, and others don't. So here's a bit of code you can try adding to your CSS. The idea is to have particular code for the retina devices, and this should cover many scenarios.So you'll want to get your bigger image up there in your theme's images folder, correct my example image name below, and finally add this to your style.css:
@media only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { .site-header .title-area { background: url(images/biggerPhoto.png) no-repeat !important; background-size: 640px 170px !important; } }
I nearly always avoid !important, as it's cheesy. ๐ But it's needed here because your theme is generating its own !important based on theme settings, so we have to override it.
The idea is to have the smaller (faster-loading) image for non-retina devices, and the new one for retina ones - the best of both worlds. Another key is to use background-size so that it's squeezed down to the regular image's size.
I'd be curious if this works for you.
Dave
Dave Chu ยท Custom WordPress Developer – likes collaborating with Designers
August 9, 2015 at 8:17 am #161836newedgemarketingMemberThanks so much David working through this now
October 18, 2016 at 11:07 am #194975klr5045MemberI'm having the same issue with my logo on the Agency pro theme (symphonicweb.com). The logo looks fine on my Chromebook laptop, but it's super fuzzy on my iPhone 6s. I tried uploading a larger file size and nothing changed.
Would I be able to insert this code in the CSS file and expect it to work? Does it matter that I'm using a different theme? Do I need to alter your code at all, and does it matter where I insert it in the CSS file?
Thanks!!!
-
AuthorPosts
- The topic ‘Best logo settings for retina displays’ is closed to new replies.