I have some img which have the display: none rule applied to them. This hides the images, but they will still be loaded into cache, right? There are quite a few of them on a page, and this slows down the loading of the page. Is there something which I can do about that?

Yes, bg images are the easy way to go. But this is a big issue for mobile, and some clever people have written scripts that erve up different versions of an image for different devices, which is another option.

I'm also interested in this topic. How to you solve this when I have link in the image? In desktop or tablet version all images and content will load, but I would like to take out some images/content from mobile version. Currently I hide (display: none) such images that are without links, but this is not an appropriate solution. So is there any solution how could I control what kind of content or images are loaded for certain devices (based on min-width)?

My image is located in div named arrow and I've managed to add image link with tag named top. The problem is that I couldn't make it to appear in center of page - don't know why?! I've tried to use "background-position: center center" to center it, but without success. Any ideas how to solve this?