Images look different on web server - html

I've just realised that on my website, the images look a lot different to what they do on localhost. I'm not sure why, it's baffled me.
Localhost preview: http://d.pr/i/6og
Server preview: http://d.pr/i/OWKx
Localhost gradients: http://d.pr/i/C5el
Server gradients: http://d.pr/i/5pGi
Localhost search bar: http://d.pr/i/YL2X
Server search bar: http://d.pr/i/dTCZ
As you can see they're a lot different. I've literally no idea why, I'm wondering if anybody has had the same problem before?
My website: http://wpvault.com/kahlam/
I don't think there's anything in the CSS that could possibly do this? It's strange, quite stuck with this one. Any help would be much appreciated.
Browser: Google Chrome

The problem is color management in browsers. This isn't a fault with your images at all.
Here is the article that I read.
Here is some excerpts from the article in question:
This specific issue exists because there are two types of ICC profiles, V2 and V4 (all you need to know is that V4 profiles are more accurate; refer to this International Colour Consortium document for the technical specifics).
The trouble is:
Firefox 3.0 and Safari understand ICC V2 and V4 profiles.
Firefox 3.5 introduced a new colour management system which no longer understands ICC V4 profiles (great job guys).
Internet Explorer 8 and Google Chrome don’t understand colour profiles at all!
Edit
I also found this link to blurry images in firefox, this could be related to other browsers as well.
I recently faced a weird issue with Firefox. All the images on my blog were rather blurry as if they were wrongly scaled. So I tried with a new Firefox profile and it worked fine. So there must have been some setting or some add-on that is part of the current user profile that is causing this. I removed all the extensions and add-ons to no avail. Just moments ago, I found the solution on the Blitz Research forum. It turns out to be an issue related to the zoom level for a given website, which Firefox 3.0 remembers. By clicking Ctrl + 0, you reset to the no zoom.

Very strange issue but I have all the images back to normal. It seems when I was uploading them from a 2mb connection it was just uploading them into really rubbish quality images. I got home and uploaded them via my 50mb connection and all was fine - all the images are now back to normal. Thanks for the help.

Related

Flickering Video on Safari Browser

I have been developing a website for a client this past week and he tells me the site works fine on chrome but not on safari.
Unfortunatly I do not have an apple device but the site works fine on all the browsers my end!
Here is a video showing how it looks on Safari:
https://a.uguu.se/l0yAhSOlet1C.mp4
Not sure what more I can do to it but I'm pretty sure it's not my code!
Many thanks for any suggestions.
Phillip Dews
I found that the problem is definitely not in your code, it is a know issue I quickly searched on Google and I found that there are quite a bit of people that experience this issue I think probably because they are running an older version of Mac OS.
Here are some useful links you can read and inform your client:
A lot of people have similar flickering patterns.
Link 1
Link 2
Link 3

How to test website on other browsers and fix issues

I have just completed a new Shopify website and used mainly Mozilla Firefox to put this together. I have been told by the client that the site doesn't show up properly in Chrome and Safari but when I have checked this on my 13" laptop they both appear fine on there and I was just wondering if anyone can give me any tips on how I can ensure that the site is working on all common browsers without having any issues.
Would appreciate any tips as I know there are paid websites to do this but just wondering if there is anything else that I can do to get this fixed.
If you to the safari developers "dropdown" in the status bar the is an option called "User agent" (the second one) from there you can "change" the browser.
Disclaimer: never actually used this function.
I believe that the best way to handle this would be to download and install all browsers to test.
There is a free service from the Microsoft dev site that gives you screenshots from a couple of different browsers and versions. Here is the link -> https://developer.microsoft.com/en-us/microsoft-edge/tools/screenshots/
It's not as good as installing all browsers to fully test everything but it can give you a rough idea if there's something wrong with css or something like that.
Your issue might be related to different browser versions. Double check to make sure that you are on the same version to see if you can reproduce the issue.

iPad firebug lite or similar

I have read lots of blogs about how to get firebug lite to work on the iPad and from what i can gather it worked at some point but hasn't worked in awhile. I can't get it to work myself.
So my question is has anyone gotten firebug lite or something simliar to work on the iPad recently. With the iPad being so popular I find it amazing that there isn't a good solid developer tool out there for it yet. Especially because in my experience it doesn't render web pages as expected quite often and needs specific tweaking.
Just to stop some quick replies, I already know its a webkit browser and the issues that I have spotted only show up on the iphone and ipad, not in chrome or desktop safari. So i really would love a solution that is native to the ipad itself.
The suggestion below worked for me on an iPad3 running IOS6.
This technique is from http://www.jamesmacfie.com/2012/03/debug-your-html-css-on-the-ipadiphone/
Bookmark any site on iPad then edit the address. Paste in the following code:
javascript:(function(F,i,r,e,b,u,g,L,I,T,E.{if(F.getElementById(b))return;E=F[i+'NS']&&F.documentElement.namespaceURI;E=E?F[i+'NS'](E,'script'):F[i]('script');E[r]('id',b);E[r]('src',I+g+T);E[r](b,u);(F[e]('head')[0]||F[e]('body')[0]).appendChild(E);E=new%20Image;E[r]('src',I+L);})(document,'createElement','setAttribute','getElementsByTagName','FirebugLite','4','firebug-lite.js','releases/lite/latest/skin/xp/sprite.png','https://getfirebug.com/','#startOpened');
Try Remote Debugging with Chrome browser. However iOS 6 comes with built-in support for remote debugging - link.
I've installed this many times (and in the past month on the new iPad) and it has worked.
http://martinkool.com/post/13629963755/firebug-on-ipad-and-iphone
FYI: The directions might be a little outdated so don't give up. What you will be doing is creating a bookmark. Then you edit the link in the bookmark with the script on Martin's website. That also means Firebug Lite can be used on Internet Explorer...although I couldn't edit any elements after getting it up and running.
Good luck!

partial responses from remote server

I'm posting this question here, but I'm not 100% sure where the problem lies. I have a site hosted through Media Temple that I'm developing. It's started to continually give me http 206 responses (partial content) on image and js assets. I see these through firebug. This results in missing images and js files, or in some browsers like Safari, half rendered images. When I view my work off my local server I see no issues.
I see this behavior on all browsers, firefox 3.6, safari 5.0.3, chrome 8. I work off of mac os x 10.6.6. Different images exhibit this behavior at different times, and the only thing that works temporarily is to clear the cache, but I'll typically begin to see the problem again shortly.
The other thing, as much as I can tell, I don't see this problem on other machines. My work machine (also a Mac) doesn't show this behavior at all. The clients this site is for have never complained of these issues at all.
I've also taken some of these problematic assets and moved them to other servers and pointed my browser there, no problem, so it doesn't seem to be a corrupt file.
I've run out of places to look and was hoping someone on these forums might have some suggestions. This is a real mystery and would love to get to the bottom of it.
Sounds like a problem on the server side. Have you tried restarting the web server or taking a look at the error log?

Problem images firefox

I have a big problem with my web site (you can see here), several user can't see images with firefox. I use too firefox but I don't have this problem.
These users use firefox 3.5.2 with windows XP or VISTA. I have no idea to find the problem.
Have you any idea ?
Thanks a lot.
Perhaps the user has accidentally blocked images from your domain.
In Firefox:
Tools > Options > Content tab > Load images automatically should be checked > click Exceptions... make sure the Site list does not include mowen-world.com. If it is there, highlight it and click Remove Site.
I've had similar issues a few weeks ago. The reason was that the JPG images were somehow corrupted. Some browsers/OS combinations showed them without problems, but on others they didn't show.
I fixed it by opening every JPG image and saving them again in a good image editor (like Photoshop or Fireworks)
Whenever I get a problem like this, I start from basics... like "is the HTML valid".
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fmorwen-world.com%2F
There are some issues listed here that could cause odd behaviour.
When I look at the site, I can see all the images fine and the website looks reasonably well laid out (Firefox 3.0.14 Windows XP AND Internet Explorer 8 Windows XP).
I can't see an issue using Firefox 3.5.3 on Windows Vista, just FYI.
Personally whenever I have issues with assets not loading or markup/CSS behaving weirdly, my first stop is Firebug. The Net panel shows the requests for any images and their respective responses. Certainly a good place to start looking.