Hot answers tagged images
37
@toomanyairmiles is partially correct - the purpose of this technique is to allow parrallel connections from the web-browser to the server. Web browsers should allow a minimum of two simultaneous connections to a single host, but many new browsers can manage up to 60. Regardless, concurrent simultaneous connections between browser and webserver(s) is a major ...
12
Having the width and height in the IMG element is not deprecated and is definitely the best way to tell the browser the width and height of an image. Going out of your way to do it another way is redundant and unnecessary (and possibly silly). Don't make any unnecessary work for yourself or the browser. Stick to the basics which work.
11
Progressive JPEG has had scattershot support since inception. The Wikipedia page on JPEG says:
However, progressive JPEGs are not as widely supported,[citation needed] and even some software which does support them (such as versions of Internet Explorer before Windows 7)[12] only displays the image after it has been completely downloaded.
N.B. The ...
11
1) Use CSS Sprites (This is the preferred method).
2) Load the images in a hidden div. Place the images in the div and then set the div's CSS to display: none; to hide it.
3) Load the images with CSS:
#preloadedImages
{
width: 0px;
height: 0px;
display: inline;
background-image: url(path/to/image1.png);
background-image: ...
11
Yes. It's probably more so when alt text isn't present, just because Google seems to put a lot of emphasis on that.
Give your images detailed, informative filenames
The filename can give Google clues about the subject matter of the
image. Try to make your filename a good description of the subject
matter of the image. For example, ...
10
I don't really like the javascript solution - it's messy, difficult to maintain, and of course completely fails when JS is disabled.
The modern solution is to use CSS Sprites - try it, believe me, you'll wonder why you never did this before ;)
10
Smashing Magazine did 2 great articles on PNG Optimization and JPG optimization.
They're quite in-depth, explaining in great detail some things you may not know about the formats and their implementations. For example, the JPEG article: "Keep in mind that when you set the Quality to under 50 in Photoshop, it runs an additional optimization algorithm called ...
10
Using Base64 encoded images will not bypass image blocking in email clients.
It was a known technique used by spammers, and therefore no better than linking to remote files. A test from 2008 by Ron Blaisdell of the Email Marketer's Club (available here), showed the results of sending an email containing Base64 encoded images in the popular clients:
...
9
When saving photographs in Photoshop I recommend using File > Save for Web and Devices. It will allow you to play with compression levels and see the visual result in real time. On photographs you can usually save it lower than level 8 and still get great results.
8
Web browsers can only download two items at once, so the more you use resources hosted on external domains the faster a page loads. This applies to everything from images to javascripts.
Many companies also use a CDN, a tool which ensures the end user gets their data from a server that is geographically close to them, which also increases site performance ...
8
Yes, the ALTernate attribute acts as 'anchor text' for links that contain images.
A recent test found both Bing and Google indexed/ranked ALT attribute values: http://www.webmasterworld.com/google/4265397.htm
Also, you need to consider that Google operates functionally like the lowest common browsing denominator (like a Lynx browser, or as one SEO put it ...
7
An additional technique Google recommends is an Image Sitemap, for which you add an <image> tag to the normal sitemap XML, and apply metadata for the search engine:
With image search, just as with web
search, Google's goal is to provide
the best and most relevant search
results to our users. Following
Google's Webmaster Guidelines and best
...
7
I usually save image in Progressive.
I have never experienced/heard drawbacks or rendering problems. And even if some very old browser might not render the progressive effect, they still finally render the image, so not a big issue.
Progressive jpeg are usually smaller in size than the same image without progressive.
I.e. an 8K (max quality) jpg image ...
7
It will help individual browser performance only. It will not boost network utilization in any way. When the browser renders the html, it will begin to allocate and space objects, and if it has explicit instructions on how to allocate the space, the layout parses while the image continues to load in the background. With modern broadband download speeds, this ...
7
John Conde's answer is spot-on. Images have a width and height - it's part of their content, not their style. So there is no need to do a "separation" here.
However, one exception: CSS for image dimensions is useful if you have many images all the same size (e.g. thumbnails). Here it's much better to use a CSS class to cut down HTML and quicken development.
...
7
The width and height attributes of the img element are not required under any DOCTYPE, if that is what were implying. There is no difference between Strict, Transitional and HTML5 in this respect.
As you suggest, these attributes were only 'required' to reserve the space on the page and prevent the page moving around as it loads - which is important. This ...
6
Reasons to use an image header with text:
The text isn't necessary for SEO.
The font can't be reproduced on the
web.
The text is integrated too closely with a
logo to separate the two.
Reasons to use text as your header:
The text is necessary for SEO.
The text needs to scale according to
the browser window.
The text needs to scale according to
an ...
6
Stack Overflow (and thus by definition, this site) use http://imgur.com/ as they've just launched a brand new API. I'm not familiar with it as I haven't used it, but I had a discussion with Womble (the developer who designed it) about it and it seemed pretty neat.
6
JPG for photos or high color differences
PNG for images with gradual transparency (fade from 1 color to clear)
GIF for images with small color palettes
Obviously give each image a try and see what comes out to the smallest file size. The smaller the size the better. Also don't worry about transparency in IE6 for your PNG's, grandma isn't as concerned how ...
6
Uuuh .. I do not have any Apple device or browser to check .. but it looks like they reading EXIF metadata (in particular rotation).
I have opened one of this images in XnView -- image is displayed 90 degrees rotated.
Try removing all extra info from these images (do it for at least one image). Use image compressors, like this one: punypng.com (or any ...
6
You can add a meta tag in your page's <head> area with the og:image property to point to the image you want Facebook to use when people Like your page:
<meta property="og:image" content="http://yoursite.com/path/to/image.jpg"/>
If you don't use this tag, Facebook's page scraper will pick an image for you. It's very likely that Facebook is ...
6
If they are different views for the same product they should have a custom alt attribute that describes what the image shows. After all, that is the purpose of the alt attribute. So one showing the back of the product could say, "Rear view of the Blaster 3000". A close up of a part of it could say, "Big red shiny button on the side of the Blaster 3000". ...
6
In general, no it does not affect your SEO. However there are some issues you should be aware of:
The external site could be quite slow, which could have a tiny impact on SEO as Google's algorithm includes site speed. However if you are wondering about things like Google hosting jQuery then they will almost certainly be faster than your own site, actually ...
6
To answer your question: no, it should not pose a problem for SEO.
Why not - given that ashx has nothing to do with images, you ask? Because of the MIME type being sent with the file header.
The .png file ending is actually not what determine what the browser has to interpret, but rather the file headers of the HTTP request. The file headers sent when the ...
5
We don't have millions of images, but do have hundreds of thousands, ad we use the hybrid approach--mysql for metadata, images stored on local disk for backup, and pushed to Amazon s3 where they are served to users. We've had no trouble with Amazon and availability. Moving to cloudfront is in our plans, just need to find the time.
This discussion may be ...
5
Artlung covered some support considerations, but there's also the fact that it's just not going to matter most of the time. The important bit in the question is "until it's fully loaded." The progressive format isn't an aesthetic nicety that makes the image blur in, it's functional:
If an image is large enough(by filesize) that it take a while to download, ...
5
You can use simple text file to simulate real database. If folder = album, then store order of images in text file in each folder (same file name, for example: order.txt.db).
Possible file format:
single line of text that you need to parse after reading from file (for example: file1.jpg|file2.jpg|file5.jpg|file3.jpg) -- it is easy to parse if you select ...
5
This is because some image formats, such as PNG, JPEG and GIF can be saved in an interlaced/progressive form which allows the full image to be roughly rendered immediately, with an increasing level of detail added as more and more file data is received. This contrasts with the "baseline" format, which arranges the image data in a top-to-bottom fashion, which ...
4
For PNG images you can reduce the number of colors in the colormap and save as an indexed PNG. For instance, consider a logo that is 128x128 pixels (uncompressed). Imagine that there are only 16 colors that it actually uses.
PNG-32, four bytes per pixel - 65 KB
PNG-8, one byte per pixel - 16 kB
PNG-4, four bits per pixel - 8 KB
You can see that without ...
Only top voted, non community-wiki answers of a minimum length are eligible
