Tag Info

Hot answers tagged

42

@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 ...


18

I see at least three possible (good) reasons: Use another machine to serve the static content Including some CDN Use another web-server to serve the static content Something more lightweight and faster No need for a full PHP/.NET/JAVA server to serve static content! Using another domain name means that you'll be able to not have the cookies that are ...


15

EMBED THE FONTS! No, but really, Embeddable fonts work on all current browsers (FF, Chrome, Safari, Opera) and IE5.5+ (yes, it's been working in IE since the 90s.) Get your TTF upload it here: http://www.kirsle.net/wizards/ttf2eot.cgi It'll give you the code and 2 files back (a TTF and then an EOT[M$ web font]) back. Copy, paste, upload, done. Win win! ...


14

Here's the excellent Browser Size tool from Google showing how many percent of users will see the different areas of your website. This really helps to check webpages and ensure that people on 'shallow' screens (most laptops have very wide but very shallow/not deep screens) can see your important content and calls to action. Update: Google has now added ...


13

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: ...


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.


12

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 ...


12

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, ...


12

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: ...


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 ...


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 ;)


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.


9

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 ...


8

I usually save images as progressive. I have never experienced or heard of drawbacks or rendering problems. And even if some very old browser might not render the progressive effect, they still finally render the image, so it is not a big issue. Progressive JPEG images are usually smaller in size than the same image without progressive. For example, an 8K ...


8

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 ...


8

To work in all browsers, .ico is preferred, as for the size, 32x32 is the most widely used, 16x16 also works (this is the actual size used in the browser in most places). Also not in your question, they should be 8 or 24bit color depth. It may be worth noting, if you plan on iWhatever users bookmarking your site, that's a separate <link> for the ...


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

There's nothing saying you can't use JPEG but generally PNG's are better because of several factors: Most page based elements such as tabs and icons compress far Superior than JPEG. PNG is a lossless compression format Jpeg doesn't support transparency (the main issue, most page elements contain the need for transparency). Generally PNG files will ...


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

You can use a tool like http://www.favicon.cc/ to importe a picture and convert it into a favicon, or just create it from scratch. After that, if you name your file favicon.ico and put it at the root of your website, most of the web-browsers get it automatically. But you can also explicitly declare it in your html files like this: <link rel="shortcut ...


7

You could try Tin Eye You either upload your file or give it an address and it: ... finds out where an image came from, how it is being used, if modified versions of the image exist, or if there is a higher resolution version. Source


7

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". ...


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 ...


7

One commonly used solution is to make your image URLs look something like this: http://www.example.com/path/to/images/1.jpg?v=123456 Here, /path/to/images/1.jpg is the actual URL path of the image, while ?v=123456 is just a dummy query staring tacked onto the end of the URL. The query string can be anything — a version number, a timestamp, a hash ...


7

ALT tag is an accessibility tag that was introduced for people who have sight difficulties even through Google use it to determine what an image is about you should never consider putting alt tags for SEO purposes before your visitors. Many people and even Matt Cutts who works at Google talks about alt tags like they were specifically designed for Search ...


7

The good: You like the way it looks. It makes it easy to identify your blog (uniqueness). The bad: Check the file size. Large images can slow down the site. I'd try to limit it to 150KB. It ends up being the branding for your website (what makes your website identifiable), but it looks rather generic. You probably want to brand your website more ...


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.



Only top voted, non community-wiki answers of a minimum length are eligible