is there any css property that help in fixing how chrome handles the image?
I designed a logo for my website in adobe illustrator and when i uploaded to my website. it loads nicely on IE but very low resolution on chrome. the more i increase the dimension of the image on adobe illustrator (and re-scale it with css) the more the image becomes low resolution, blurry and details not clear.
otherwise, chrome on phone and other web browsers work fine.
https://drive.google.com/open?id=0BwjYDGIA089Td2xBdDE0b0h4ems
Thank you !
Probably the best solution is to use a SVG as Logo because its vector base and endless scale able. Here is a tutorial.
https://css-tricks.com/using-svg/
Also you can use a svg as bg-img in css like:
background-image:url(logo.svg);
and style it
Related
Is there a way to fix the Retina Blurry icons on cellphones without using the 2x sizing images hack?
I'm a Front-End developer and the Designer is not avaibable to giving me the icons of the Website at the double of its size.
So, I was wondering if there is any way to keep the original icons size and make it looks correctly on cellphones with Retina display.
Small pixel images are automatically enlarged by the browsers and the quality of the anti aliasing is depending on the rendering engine of the browser.
If you don't want to use the media queries #2 trick you could use svg icons instead as vector graphics are cristal sharp on every screen resolution and ppi.
Edit: As mentioned in the comment below you can disable antialias in browsers as described here: Disable antialising when scaling images
But that will not create eg a sharp round circle out of a 16 pixel graphic as the pixels will still be squared pixels (just enlarged)...
i am currently facing full screen images blurry issue, no matter what size i changed for my background image (tried 1800px, 1600px), it came out same blurry issue. Been searching google but still cant find result. hope someone can solve. thx
For your info, i'm using "save for web" in photoshop. My web is (http://maxgohblog.blogspot.com/)
If you wan't the images to appear in better quality you have to take a higher resolution. Basicly your image was blewn up from 800px width to 1400px, if you inspect it in your Developer Tools. It's lika a bowl of 800 beans but you need 1400 of them to be full.
I am making a responsive web page using the Bootstrap 3 framework. I have an image that I want to use as a logo on the page.
I started off saving the full size (788 x 1098) image as a PNG. My custom CSS makes sure the image has a max-width of 280px and of course Bootstrap's CSS will scale down the image appropriately for the device. When I viewed my responsive web page on my desktop PC it looked ok even though it had been scaled down to 197 x 280. However when I viewed it on my mobile the image looked blurry and wasn't good at all.
So then I heard about SVG images and thought I'd give it a go. I downloaded Inkscape for Mac, opened the full size PNG in Inkscape and re-saved as a SVG image. Unexpectedly the SVG image looks good when I view my web page on my mobile phone but looks blurry and bad when viewed on my desktop PC.
Why is this? I thought the whole point of SVG images was that they can be scaled without loss or blurriness?
I've made a CodePen to help demonstrate: http://codepen.io/theclarkofben/pen/WvdKgM
<p>SVG 20%</p>
<img src="http://www.clarkben.com/img/cv.svg" alt="a" style="height: 20%; width: 20%;"/>
<p>SVG 100%</p>
<img src="http://www.clarkben.com/img/cv.svg" alt="a" />
Your "SVG" is just SVG containing single raster (PNG) image, so nothing really scalable; see <image … in view-source:http://www.clarkben.com/img/cv.svg.
You can control rendering of such raster a bit with CSS (either using image-rendering or forcing GPU to handle that via some transform, but result woudn't be perfect either. Anyway, even it this was vector image, rendering A4 into cca 300 screen pixels wide box would not be "readable" as well, in my oppinion.
It looks like the image is still just a PNG image; it's just masquerading as an SVG because you gave it that extension without actually converting it to SVG. You can't really convert a PNG to an SVG by just opening it in inkscape and saving the image as SVG -- you need to either recreate the image from scratch as an SVG or look up how to turn a raster image into an svg image.
I've built a mobile site using a CSS sprite for some of the icons etc but the images look really pixelated and jagged in the Blackberry Bold 9700's browser. Fine on a couple of other BB devices and everything else we've tested.
The sprite images also appear to be smaller so not sure if it's a scaling issue with the browser. The inline images look fine but also smaller than on other devices.
Device details:
Bold 9700 - 6.0 Bundle 2049
Has anyone else encountered this?
After a lot of searching around I found the cause, image compression. I always run images through the ImageOptim app and it looks like this caused the extremely low resolution just on this handset. Exported the CSS sprite without compression and now it looks fine.
EDIT:
I thought compression was the problem but it's actually the dimensions of the image sprite! It was one long image, about 1400px high, and the Blackberry seems to automatically reduce the quality of large images, leading to all the problems.
Fixed it by simply separating the sprite in to 2 files about 600px high.
I'm wondering if this is something somewhat simple, but I'm having a problem ONLY on iPad with my sprited images. I have an tag that I use a sprite for to display an image of a star (similar to gmail or picasa) to indicate a favorite. On every other browser (including safari) on a computer, it's all completely fine.
The problem is on an iPad, it's showing more of the sprite than it should and it looks strange. What's even stranger is that this image is repeated several times and it doesn't seem to happen consistently.
Is this some sort of zoom issue or viewport setting problem specifically for iPad? It's driving me crazy, and anything I do to fix it cuts off some of the image and ruins the normal browser look.
Here's an example of what I mean since I can't put up the page I'm currently working on.
On this site I've worked on in the past, the viewing options look strange on an iPad:
http://demo.qlikview.com/index.aspx?section=Life
For example the "Download" viewing option looks different on the FEMA app than on the Kick It app so it doesn't even appear to be consistent.
Any help would be appreciated.
Thanks!
This is because the iPad scales your page.
The size of your element where the sprite is used is scaled and the sprite image to. But it seems not to behave precisely.
The same thing happens when you zoom out in safari. This is because an image is not scaled the same way in the browser then a dom element. A dom element is rendered as vector object. So when you zoom in or out, the lines keep sharp. When you do the same with a bitmap. It gets blurry and the browser need to guess how the image would look like smaller or bigger.
You have two options:
use more space between the sprites.
use EMs and not Pixels in your CSS
PS: Don't use !important in your css
Like meo pointed out, best option would be to leave space between the sprites.
There is also one last thing you can do, which is not to let the user zoom the web page by putting the following line in your tag. It would look the exact same as you view in the browser, which is pretty neat if you have loads of elements messed up in the iPad because of the sprite issue.
<meta name="viewport" content="minimum-scale=1.0, maximum-scale=1.0" />
Good luck!
The simplest fix for this is to put an outline around your spite with the border color the same as the parent container's background color. The outline is outside you element and does not effect layout. What you see is a problem mobile Webkit has when it scales down images with background color or background images, they bleed out of their container. The outline will sit on top of that and cover it.
What I usually do is just define separate images (non-sprited) for iPad users. I know it doesn't load as quickly as you're hoping for with sprited images, but I feel it's a price they have to pay. What I do is have individual images on the server with #media in your stylesheet to define different images for iPad browsers. A quick review of how to use #media for iPad can be found at:
http://css-tricks.com/snippets/css/ipad-specific-css/
I just ran into this problem as well. I've been leaving extra space between my sprites since I first noticed the iPad imperfections. However, my current project involved sprites and another element with CSS3 transforms. The combination made the sprites blurry, with strange clipping around the edges. I actually found a fix over at No more jagged edges in iOS. Try applying the following CSS to your sprites:
/* IOS fix for incorrectly scaled sprites */
-webkit-background-clip:padding-box;
background-clip:padding-box;
Those few lines worked magic in my project. Of course, YMMV.