How do some websites have sharp images that load quickly?

Hi All

A quick question, how do some websites have sharp prestine clear images that load quickly?

Thanks in advance

They could be png files, rather than jpg files.

It’s all about using the right format for each image. I think many people generally have 1 format that they like and use it for every image (e.g jpg) but you can greatly reduce the size of an image without reducing the quality but using a suitable format.

Jack

You can optimise images in applications like Photoshop, Photshop Elements and other image editing software.

What you see on the screen also depends on the quality of the screen and how it is calibrated for colours.

Hmm… toss in a fast server and they’ve got us all fooled! :wink:

not if the image size is in the MB’s :wink:

Some people do a better job at a couple of things than others: preparing files for display and then optimising.

If you know photographic material is going to be displayed at a certain size and resolution then you can do yourself a favour and optimise the content for the end result. Scale the content appropriately and apply the right amount of sharpening.

Then optimising the file so that it doesn’t take an unecessary amount of time loading (or space on the server) will ensure you don’t lose any of that quality image.

Both of these processes can work together to make as you say: clear pristine sharp images that load quickly. Upset either part of that equation and you have clear sharp images that take too long to load, or ugly images that load quickly. There is a balance but even for dial-up a quality image is worth a slightly longer wait if it is actually good (and no, I’m not talking about anything even close to 1MB).

http://www.askapache.com/htaccess/apache-speed-subdomains.html

I followed some of the guidelines from the above link and moved the images and thumbs to a subdomain.

[COLOR=“RoyalBlue”][FONT=“Georgia”]Speed Benefits of Multiple Subdomains

Basically when a visitor comes to http://www.askapache.com/htaccess/htaccess.html, they make a DNS request for each of my 3 subdomains [www/z/f].askapache.com to translate them into IP addresses. These hostname to IP address translations are then cached for that visitor, so no more DNS requests are needed. Because the first request was for http://www.askapache.com/htaccess/htaccess.html, the browser requests the .html document from the www server first. In the .html document the browser is told to also retrieve .css and .js files from my z server. In the .js file I load some flash which tells the browser to fetch the flash from my f server. So the users are able to see the content (.html) first, but thats not the only benefit to using these subdomains.

Subdomain Persistant Connections Benefits

The other benefit to using these subdomains is brilliant. Instead of a browser having to make 30 tcp connections to my www server to download everything, a browser is instead instructed to download 3 items from my www server, 22 items from my z server, and 5 items from my f server. So instead of waiting for 30 items from 1 source, it waits for 30 items from 3 different sources, drastically speeding up the transfer. By using multiple subdomains browsers are further able to maintain persistant connections with all 3 unique servers, making the site load incredibly faster.
[/FONT][/COLOR]

Also use sprites for the static images so reducing the actual number of images loaded.

Any examples of what you are talking about? This would be helpful to assess the situation correctly?

If you are referring to me then unfortunately I do not have any examples of before and after.

http://johns-jokes.com/funny-pictures.html

Above is a link where the thumbnails are located on http://subdomain.johns-jokes.com/thumb/

.

Actually I was referring to the OP! :slight_smile:

I agree to the fact that some of them are in png format.

I have recently stumbled across this website that graphically shows the size, type and loading time of each individual element of a webpage.

[URL=“http://tools.pingdom.com/?url=http://johns-jokes.com/&treeview=0&column=objectID&order=1&type=0&save=true”]http://pingdom.com

.

What I do is I try to keep the colors as simple as possible, and then I save them as a gif32. If you must have complex colors, use png or a higher color-count gif.