-
Posts
-
Hey guys,
this is something that has always bugged me, but I have never brought up. I kept thinking it would eventually be addressed but not as of yet. I know I am not the only one experiencing this.When you upload your ~200px theme logo file it obviously creates various smaller versions by default, and they should in fact all be as clear as the original upload. The logo that the theme pulls for desktop browsers and and ipad 2 both are crystal clear. But when it pulls the logo for an iphone 4 or iphone 5 it is quite blurry. My guess is it is pulling a too small pixel dimension logo file and then it is enlarging it slightly to fill the space. This is the only thing I can think of as to why this is blurry. here is visual reference as to what I mean
but when viewed on a desktop or ipad it is clear like this
For reference: the view you get on my site is custom, I hide the default logo and then display a background image, but the behavior is the same on the background image as well as if I turn off this customization, the normal logo still is blurry on iphones. However the kriesi site logo is clean on iphones for reference.so my own digging has come up with the following: My logo file (the ja icon background) that is visible on mobile browsers is about 64×65 px in nature. If I take a screen shot of the site on a desktop, then take that to photoshop to measure the pixel dimensions of the logo they are exactly as expected. However if I take a screen shot on my iphone and then take that into photoshop the pixel dimensions are twice as expected, the iphone screen capture logo is about 124x125px, twice what is expected.
Is this because of a retina display thing, more pixel density or something? if the logo is being stretched by 200% that would obviously explain the blurring? I just don’t know enough about the correlation on how the iphone renders images and the theme pushes images to the phone.
Can you guys look into this more please, I would love to figure out how to make the logo clear on mobile devices, specifically iPhones.
my site is jackandaddi.com
Ok after even further research I found a work around: feel free to inform me if this is the best way or not.
my conclusion is that this is definitely a retina screen issue. I found this source very helpful:
http://designmodo.com/design-retina-displays/for the main theme logo:
I found that the containers in place in the theme already constrain the width/height of this so the part about defining the width and height in css wasn’t needed (at least for me) I actually found if I did this the theme would actually shrink the logo more than the size I defined anyway, without some sort of important code. So I removed it and just let the theme naturally constrain the size. But what I did was upload a new logo that was twice the size of what I intended it to be. I previously had a logo that was uploaded at 205×64 pixels and it was being stretched to about 400 some pixels and looking like crap. So by simply uploading an image that was 410×128 pixels and letting the theme auto constrain it to I think max height 80px the logo looks perfect on normal screens and has the pixel dimensions to actually look good when it is enlarged on retina devices. super easy.Then for my custom background logo replacement trick:
I basically did the same thing, I uploaded an image that was 132×120, twice that of the intended display size of 66×60. Then in my css I just constrained the background image with the desired display size of width 66 and height 60 pixels so it looks right on normal screens and then has the right amount of pixels to look good on retina screens.As a side note I first used the media query method at the bottom of the source reference to only send the enlarged file actually to retina devices, but I figured for the main logo of my site I would just use it all the time as it is a single file and the file byte size is about the same, and I think that is maybe more future proof. But if I was doing this all over the site with many images I would probably look more at the media query way of targeting only retina devices.
seams to be working now just fine. If you would do anything differently let me know please.
Hey!
Yes, the solution sounds reasonable to me. You can also try to install a plugin like: http://wordpress.org/plugins/wp-retina-2x/ which will replace the default image with a high res version of the same image if it’s available.
Regards,
PeterI will check out the plugin, thanks. I don’t have a retina display (other than iphone) to check it out on. And with the iphones small screen size everything (other than the logo) looks good. Is this a very common plugin to use? I am pretty new to wordpress so I don’t have a ton of experience with how many plugins is normal to be running.
Can I ask, in a completely general idea, what it is normal amount of plugins to be running before it gets too cumbersome or slow. I am running about 4 right now.
Hey!
As far as I know the Retina 2X plugin is the most popular one (with around 69000 downloads) but retina displays in general or not very popular yet. I know some photographers and picture artists who use them for their projects (photo retouching, etc.) but even they told me that they switch to a “standard screen resolution” when they’re done with the work because the vast majority of websites or streaming platforms don’t provide high res images or videos and it makes no sense to view them with retina display resolutions.
The number of plugins is not limited by code but it depends on your hardware. If you’re using a shared server I wouldn’t activate more than 20-30 plugins but obviously it also depends on the plugin code. If the plugin is well coded or if it just contains a few lines of php code which don’t waste the server resources you can activate more plugins without affecting the website performance.
Regards,
PeterThanks for the info. I am hosting on standard go daddy account, so it is definitely shared. sometime in the near future I want to switch it somewhere else, it seems my emails sent from the go daddy account are often placed in the junk box of the recipient. They claim it isn’t them, but I don’t experience this with other accounts at all. I know there are many factors, but the breadcrumb trail leads back to go daddy from what I have looked at.
Anyway, that aside, So I guess I am totally fine with only 4 for the most part. And activating a handful others if needed should be ok also generally speaking. Thanks for a generalization on a normal amount of running plugins on any one wordpress website with normalish results.
I am sure everyone just recommends who they personally use, but if anyone has solid recommendations on hosts I would be interested. I want it to provide quality email hosting as well, at a rate normal for a private individual. Cheers
- The topic ‘mobile logo blurry – gets techy – and complicated’ is closed to new replies.