In our client's website, favicon.ico file has several sizes from 8x8 to 32x32. I expect the 16x16 to show in browser tab, but instead it shows 8x8 icon in white frame. Why does this happen and what workarounds are there?
Favicon should be 16x16 or 32x32 at 8-bit or 24-bit, according to http://en.wikipedia.org/wiki/Favicon#Standardization_and_implementation
But in my experience, try to get the favicon to have file size 1.12KB like Google, StackOverflow etc :P
try clearing cache and rebooting. See here
Your favicon is 24 X 24, try making it 32 X 32.
Related
I'm really confused with this one as it seems impossible to do.
When running my site through GTMetrix I pass great but with Google page speed insights it's insisting my images can be optimized more for instance:
Compressing and resizing mysite.com/…ets/img/homepage/my_image.jpg could save 78.5KiB (94% reduction).
The image in question is 65KiB so how Google thinks I can shave another 78.5 off it I don't know.
I'm using jquery unveil and using the retina function on it too could that be the problem?
Also I've tried downloading the images Google provides as their compressed version but these images have had their dimensions changed so would look terrible if I put them at their intended size.
Really confused, any help would be appreciated.
Thanks
There are few things you need to distinguish before proceeding with optimizing images for Google Page Speed.
Images are optimized for different platforms (Desktop and Mobile)
Images are optimized for physical size.
Reports for images can be "Compressing and resizing" and "Compressing" only. Compressing means u need to do a compression part, on other hand compressing and resizing means you need to use appropriately sized image for appropriate platform.
Depending on the report you are looking at (desktop or mobile), your item "Compressing and resizing mysite.com/…ets/img/homepage/my_image.jpg could save 78.5KiB (94% reduction)." needs to be less in dimensions and compressed or just less in dimensions. Margin for resizing an image with CSS is around 20% so if you got 100x100px image you can resize it to around 120x120px with CSS without getting report on that item (that is if you also optimized it physically also). To check this in Chrome, inspect image and check "Natural" size in element selector.
You can deal with this on few ways:
Media Query (note that you have to use background image in this case)
Srssets
JS
Depending on the image compression package that you use, you might get different compression results. I've noticed that sometimes Google's Page Speed is able to optimise an image further than I have been able to (and other times not!)
Do you have a live URL for your web page? Or even the image? It helps to be able to see it live and compare!
Having some issues on my Wordpress installation.
I'm noticing that on some monitors faint/semi-opaque boxes are appearing in my JPG images.
I didn't notice this until I was viewing my website on a friend's computer.
They aren't appearing on the original images, just when they are uploaded to my server and WP displays them.
I am about to add a filter changing the jpeg compression quality to 100%, rather than 90%, but before I go and re-upload all of my images, have any of you guys experienced this?
Thanks!
Do you mean a box like a border around the image, or an overlay on top of the image? Also is it appearing only on the webpage, or also when you look at the images on the server?
It sounds like a response sensitivity problem in the monitors. Is it any particular brand of monitor?
Other things could contribute to the problem.
Your images may subsample the Cb and Cr components and your JPEG decoder may not be evening out the subsampled components. get a JPEG dumping program and see if the sampling rates are higher for Y than Cb and Cr.
You image may be over-quantized (quality).
I have a lot of images with a resolution around 500x1500 and I want to show all those images in a grid on my website. Each picture in the grid should be 200x200px.
If I scale down the images with CSS from 500x1500px to 200x200px and I show 10 200x200px images on my website, does this mean that the visitor first have to download the 500x1500px images and then their browser scales the pictures down?
If that is the case, then it's a bad solution to do it like this, right? Instead I should have two versions of each picture, one 500x1500px version and one 200x200px version. Am I right?
The question then is what's the easiest way to scale down hundreds of images?
Yes, I think it is the case that the browser will download the larger image and then scale it. You can check for yourself by opening the dev tools on the browser (press F12 if you're using Chrome) and monitoring the network traffic when you reload your site.
The easiest way to scale down hundreds of images is find or write a program to do it.
You are right. You can set height and width of the images but 1) the user will have to download a bigger image than necessary and 2) the height x width ratio will be trouble (the big one is 1x3 and the small one is 1x1). I would either use http://www.imagemagick.org/ , gimp or a similar tool to crop the images, but the problem is that the cropped area might not be very good. Only a human can select a good fit for the cropped area :-(
Edit1: Perhaps a well-trained neural network could select the most "interesting" part of every image programatically but that's kind of a lot of trouble to do that. Still it could be pretty interesting :-)
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've set on imagecache a fixed scale for my images (230 x 150).
Upscaling option is unchecked.
Successively, I've uploaded new images (original size 230 x 150) but for some reason they are resized: 80 x 52
Instead, if I check the "Allow upscaling" option, the size is correct, but the quality is very bad.
So basically, it behaves like if my images are very small, but my original images have the correct size.
thanks
The effect of the 'allow upscaling' option hints on the problem not being caused by imagecache itself, but rather that some other setting/module is downscaling the images already before imagecache is doing its thing. You could try to verify this by checking the image sizes of the originally uploaded images (usually in 'files/images' or somewhere else outside of 'files/imagecache').
What mechanism/module do you use to upload the images? (There might be a scaling setting somewhere in that context.)