When I search in Google, instead of their main page, when I look at their logo, and copy the image path, it shows that:
http://www.google.com/images/nav_logo91.png
Well, it is not a logo only, it have many icon as well. Is there any reason why Google use this way to do so? any results or just for showcasing their technique skill? Also, how can only show a part of a image only? Thanks.
It's a sprite. Doing this can reduce file size and load time.
You can splice the image using JavaScript or using CSS (CSS being the more popular choice). You can make the element with a div tag, then set the background-image property to the URL you've specified. Then use the background-position property to align it appropriately. Lastly, set the expected width and height of the div.
Its called CSS sprites. A lot of websites use this technique, where in all (decorative) images on the site are contained in a single image.
This single image tends to be smaller in size than the sum of all the individual images (each image holds its own color table). Also, fetching a single image from the server means lesser HTTP server requests.
The large image is then placed as backgrounds in div's and manipulated using background-position and other CSS properties to ensure only the portion of the sprite shows that is required.
It's like animuson has already explained, they're called CSS sprites, to expand a little they are used to prevent excess HTTP Requests.
By having just one image to load, it is cached and then the website can use that one image for multiple backgrounds but only make certain areas viewable by using background-position.
A good explanation is here: http://css-tricks.com/158-css-sprites/
Related
I need to implement image previews via thumbnails. Now I'm not certain how to implement it.
One option would be to do it straight with CSS, so something like this:
.thumbnail {
background-image: url(path/to/image);
background-size: 300px, 400px;
}
Is that practical? Are there any performance issues?
If you scale image in CSS to be smaller than it it actually is, browser still have to download the same amount of data. You should create separate file with the thumbnail.
With images, you need to focus on three things: size, format and the src attribute.
Image size
Oversized images take longer to load, so it’s important that you keep your images as small as possible. Use image editing tools to:
Crop your images to the correct size. For instance, if your page is 570px wide, resize the image to that width. Don’t just upload a 2000px-wide image and set the width parameter (width=”570”). This slows your page load time and creates a bad user experience.
Reduce color depth to the lowest acceptable level.
Remove image comments.
Image format
JPEG is your best option.
PNG is also good, though older browsers may not fully support it.
GIFs should only be used for small or simple graphics (less than 10×10 pixels, or a color palette of 3 or fewer colors) and for animated images.
Do not use BMPs or TIFFs.
Src attribute
Once you’ve got the size and format right, make sure the code is right too. In particular, avoid empty image src codes.
In HTML, the code for an image includes this:
When there’s no source in the quotation marks, the browser makes a request to the directory of the page or to the actual page itself. This can add unnecessary traffic to your servers and even corrupt user data.
Pro Tip: Take time to re-size your images before uploading them. And always include the src attribute with a valid URL.
To ensure your images load quickly, consider adding the WP Smush.it plugin to your website.
from: http://blog.crazyegg.com/2013/12/11/speed-up-your-website/
Can I make the img tag use the background-image properties? Like for example, I have these two pages here one has img and the other one has background-image tag. Notice in responsive version the img one squeezes the image, while the background-image one adjusts the image according to the size.
Page with IMG tag
Page with background-image tag
You can find both img and background-image in sub-header div ..
This'll sound a bit pedantic, but there are a few reasons for it.
An <img> element represents content on the page, something intrinsically important to see and understand. Background images are fluffy stuff to make the site look pretty but their removal would not impact the message.
You are mixing your use-cases. You should go with a background-imaged header in this case because the image isn't intrinsic to the message or content of the page.
Use an <img> element when you're displaying a graph, a photo someone took, etc.
Why?
The browser intentionally treats them differently, as you've noticed, placing a higher priority on showing the content of an <img> tag for example. It'll attempt to stretch the image to fit by default, while a background will simply be clipped.
When the user goes to print the page, it's much easier to remove background images via CSS media queries then it is to hide (the correct) IMG tags.
Background images also don't take up space in the DOM and cause fewer conflicts with other elements. IMG tags flow in the document and can easily get dislodged from their intended position (creating a lot of extra work to make them stay put).
Right-clicking a background image doesn't do much. Right-clicking an image gives you image related options, such as downloading or opening the image. This goes along with the theme of the <img> tag as content.
There are other reasons, but this all boils down to semantics. This may not seem like a big deal to you, but that's probably because you don't have a vision impairment (so you don't regularly use a screen reader) and aren't really thinking about web crawlers and the many other systems that attempt to extract meaning from the tags you've used.
You will be far better off for many, many reasons if you stop fighting the system and use it the way it was intended. Or, at least, know why you're bucking convention before doing so.
I'm in the process of making a system so our customers can upload images to a database for digital signage. The system is working as intended except for one part, which is the preview of the image that was most recently uploaded so they can make sure it's the correct image they wanted. It is getting clipped between 30-40% of the image height. If i upload something around 1000 pixels it will show around 400 pixels and if the image is shorter it will still show the same % of the image. I've looked through all my CSS and I can't figure out why it's doing this. When i inspect the element on the page there are no height attributes set to it, and if I add them it just adds to the white space where the image should be. My code is way too long to post, but basically I have it stored in the database as a blob and then it pulls the lastid out and displays it, but it's getting clipped. Any help would be greatly appreciated.
You have most likely tried to upload an image larger than BLOB (65535 bytes). Here is the MySQL Documentation
The best practice here would be to store your images in a folder and store the path to that image in your database.
it has nothing to do with mysql, Mysql clipping your data wouldnt make the image smaller (dimension wise) - it would destroy a part of the image.
Your problem is in the CSS / html - use Google chrome and right click on the image to see what CSS is applied. It will be in there or a parent element which the image can not be larger than (assuming your something which sets max-width:100% )
You may have an overflow:hidden to make it appear clipped. or just another element overlapping it but with a higher z-index
I want image in HTML page. I am wondering what way gives best optimization performance stand point. I have two option to load image.
Load image directly using image tag inside div of html.
Get image to div background using css background.
They would be about the same, at least if there was a difference, it would be so small you would never notice it.
Speed of load would mostly depend on the size of the image whether its set to the background in the css or placed directly in the mark-up. I think this is answering your question but it's quite vague...
after logging in to facebook, if you right-click on the image meant to show friend requests just beside the facebook logo at the top left side of the page, and inspect the result in google chrome, you find the css rules as #fbRequestsJewel.hasNew a.jewelButton. This is the background image url there.
Number of images inside it and i think those individual images are used in different places in FB,
How is that done? Is it image mapping or what? Why to do in that way instead of using separate images? What are the advantages?
It's called a CSS sprite and is basically an element that uses background-image and background-position to reuse a single image to show many different smaller images.
It's done to speed up the time taken for a page load load, as each resource the browser requests adds an overhead of an additional HTTP request.
A List Apart has a great article on the usage of CSS sprites.
It's called Sprite may be you have to check this answer
How to make a single image, treated as three different images?
check this article for more http://css-tricks.com/158-css-sprites/
hi this is called css sprite on images
Basically when we have individual images on server we have to load each images seperatly.
this will load the image in one single server trip and using css background-position we can displayed the image which we want where ever we need.
You can refer this website for simple and complete understanding of css sprites.
CSS SPRITES