I am developing a mobile site and have noticed that on android all the background images are rendering very poorly, they all seem to be quite blurred? Has anyone come across this problem? The image im using is 131 x 32px in png 24 format and the file size is 5.37kb. Im using the latest version of android 3.2.2. I have read an article online where someone was having the same problem but their problem was due to a large canvas size which isnt the case here.
I just wrote an article about this if you want a full explanation.
Long story short, use a larger image (393 x 96 pixels) and then use background-size to shrink it:
background-size: 131px 32px;
Related
On this page, the images look fine on desktop but are white/not found on mobile devices. I have no idea why this is happening. I'm just calling an img tag but it says its not found on mobile even though it is there
I have checked your files, #MrVimes is correct your should finish your html which will help validate better on slower devices.
However the problem is purely down to size of the image. Chrome Dev tools shows me that they are massive in size, Enable emulator and select iPhone 5 and see what happens. It is just taking a long time to download.
Try using Picturefil.js to serve smaller images or make them smaller in your software application.
This was the picture I got from Google Dev Tools (which is free and amazing):
Also I noticed that your need to change the way the images are handled in CSS, if you open dev tools:
Position:center
Is not valid, maybe set it to relative or static depending on how you want your page structure to look.
I also saw you may want to update your header with this css:
z-index: 99999;
This will make your header appear on top, as the z-index changes the layers of the html elements (much like the fillings in a sandwhich)
sorry my friend but this is false COMPRESSSING THE IMAGES TO 50KB the big images won't appear because your cache browser is full you have to empty your history/cookies/cache of the browser
IOS DEVICE SUPPORT 32 MEGAPIXEL SIZE OF IMAGE IN SAFARI
take a look here for maximum image size and resolution support Apple IOS developper
to delete your cache just go to "Setting=>Safari=>Cleare cache=>clear cache" and that's it
Note: Check the avaible space on your IOS DEVICE should be greater then 50MB
You have to Enjoy the technologie by let the images greater then 1.5mb and works in both of computers/devices
On my website, I have a 1300x200 image that I am forcing down to 650x100 using the simple width=650px parameter in the img tag. What happens when a retina Mac/iPhone/iPad user views my site. Will they see the full quality 1300x200 image, or will the quality artificially be reduced by half?
As far as whether or not this is efficient, it's just a 50k PNG. My site is otherwise mostly vectored with text/CSS. You could argue this is more efficient than messing with browser-agent detecting Javascript.
Ok folks, I went about answering it myself, and yes, if you use the width tag to half-size an img in HTML, the retina browser will display the full sized image.
I displayed the 1300x200 image half-sized using width on the top, and the plain 650x100 image on the bottom. Zoomed in using Safari on iOS 6.
I have a large SVG graphic for the background of my site. See an example here:
http://jsfiddle.net/aAwgU/4/embedded/result/
body{
background: url(http://www.thedavidcummings.com/images/html.svg) no-repeat fixed right;
background-size: auto 100%;
}
It works fine in Chrome and Firefox, but in Safari navigating the page and resizing the browser page is extremely slow, and the page completely crashes on my iPhone. Is this a bug in webkit?
Is there a way to make my .svg more WebKit-friendly? Or should I just use an image? SVG is ideal because of the small file size (only 7k.) The smallest .png equivalent I was able to make was 150k. I want to keep the dimensions big so that the image scales well.
You can optimize the SVG using something like https://github.com/svg/svgo (node), it will reduce filesize and sometimes improve rendering times.
Saddly, Safari is awful slow with SVGs now.
I have a Joomla website and I observe a problem with some images.
In Chrome images look really good and sharp but in Firefox and IE the images are not that sharp and the colors are a bit strange.
Take a look at the photos below. The difference is more obvious on the Standings were the emblems of the teams are really small.
Any suggestions??
Image using Chrome
Image using Firefox
Website URL:
http://www.neasalamis.net
You're telling the browser to scale the image from 150 pixels to 60 pixels.
Most browsers aren't good at that.
You should create images that are exactly the right size using an image editor.
This will give you complete control over how the image is scaled (image editors do a much better job than Firefox), and make the files smaller too.
I've built a website for someone, but according to him, scrolling is very very choppy on the website in IE7 on his computer. On my computer I don't have any problems with scrolling (in any browser), i've already tried some things, but according to him scrolling still is very choppy. So I was wondering if someone has some suggestions for me? I think the main problem is the full width background image, but i'm not entirely sure.
The website is:
www.casalagodilugano.nl
The website is in dutch, but for this question that doesn't have to matter
edit:
Tx for the helpful answers. In the end, it was indeed the background image which caused problems in IE7. By accident I found a way to work around this problem: I set the image as the background image, centered the image, and using css3 I made sure the was stretched the way it should.
I had a problem similar to this. It turned out to be because my computer was full and my performance suffered. Viewing the issue on my new machine (also had IE7) produced no choppy scrolling. I fear your client has the same problem, perhaps suggest it's his computer and not your website?
Edit:
Many things affect the processing on a website, I'd suggest it has to do with your background image. The sand has quite a "repeatable" texture so perhaps you should Photoshop it down so it's a much smaller image and just use 'background-repeat' in your CSS to achieve a similar effect. Your background image is also around 200% of what it displays on the website, I copied the URL of the image and viewed it by itself and it's HUGE! The emphasis here is on image file size, because IE is having trouble shifting the image down when you scroll. It's not a very good browser to be fair. I've also noticed that your large header image is larger in actual size, suggesting that the size is reduced by your code. Try reducing this image size to the size you want to display it
Edit pt 2
I've stumbled upon a script that for some reason waits 5 seconds before running and that is the Google maps API. I respect that you need this for the Routes page but if I were you, on any page where there is no map, remove any mention of the google maps api from the source code.
I have found that IE gets choppy when you have an <input> tag without a border or background specified ... very strange IE "bug" but i've fixed choppy scrolling on sites/pages by just adding a border to the <input> tags.