Keep that image small

For 2023 (and 2024 ...) - we are now fully retired from IT training.
We have made many, many friends over 25 years of teaching about Python, Tcl, Perl, PHP, Lua, Java, C and C++ - and MySQL, Linux and Solaris/SunOS too. Our training notes are now very much out of date, but due to upward compatability most of our examples remain operational and even relevant ad you are welcome to make us if them "as seen" and at your own risk.

Lisa and I (Graham) now live in what was our training centre in Melksham - happy to meet with former delegates here - but do check ahead before coming round. We are far from inactive - rather, enjoying the times that we are retired but still healthy enough in mind and body to be active!

I am also active in many other area and still look after a lot of web sites - you can find an index ((here))

Remember to keep image sizes down on websites. I know this is a reminder that has been around since the days that we referred to a 56k modem as a fast connection, but it does still matter. People still access your web site through a modem and if you've a busy website, you'll still have an excess to pay once your traffic exceeds a certain level. On a really fast access, don't you want your pages to appear almost instantly.

Have a look at these three images. On a 56k modem, one of them will take over 15 seconds to download, another will take 8 seconds and a third will take 5 seconds. The final image will come down in under 2 seconds. Can you tell which is which by looking at them?

Image A:

Image B:

Image C:

Image D:

Answer at the end of the post.

There are two techniques I've used to reduce the size of the image.

Firstly, I've reduced the number of pixels that make up the source of the image from the however-many megapixels that my digital camera takes to 680 pixels wide so that I don't burn up bandwidth sending out over-detailed pictures that our site visitors will never look at. (and in once case above, I've reduced it to 340 pixels wide). Browsers will rescale pictures anyway if they're not supplied with enough resolution. I doubt that you'll be able to tell which is the lowres image on our regular blog page but you may spot it on the printer friendly version where it's displayed much wider.

Second, choose your format as appropriate. I've used a .jpg image for all these photographs, and that has allowed me to select a lossy compression algorithm where I sacrifice a little quality for a lot of space; good image manipulation software lets you make the tradeoff - I used photoshop. For web work, a low quality image is often sufficient. For something that will be printed out to high quality, you may wish to go for medium or even high quality. You'll also find that you may want to choose a higher quality on images with sharp edges or with large areas of subtle toning, where the loss is more noticeable.

Answers.
Image A - 15 seconds. 680x340 pixels, Photoshop's High Quality, 87k
Image B - 8 seconds. 680x340 pixels, Photoshop's Low Quality, 42k
Image C - 5 seconds. 680x340 pixels, Photoshop's "Save for Web", 27k
Image D - 2 seconds. 340x170 pixels, Photoshop's "Save for Web", 9k
(written 2006-01-03, updated 2009-01-04)

Associated topics are indexed as below, or enter http://melksh.am/nnnn for individual articles

W504 - Web and Intranet - Not Just Text
  [351] Is photoajustment an addiction? - (2005-06-18)
  [665] PHP Image viewing application - (2006-04-01)
  [847] Image maps for navigation - a straightforward example - (2006-08-28)
  [1618] A small picture does not always cut it! - (2008-04-21)
  [1749] Using server side and client side programming together - (2008-08-11)
  [1806] Dealing with overhead cables in a photograph - (2008-09-21)
  [2554] Adding retrospective ALT attributes to IMG - (2009-12-28)
  [3133] An image from a website that occasionally comes out as hyroglyphics - (2011-01-14)

G912 - Well House Consultants - Photography for the Web
  [97] What makes a professional photographer? - (2004-10-23)
  [194] Published Photographer - (2005-01-30)
  [546] The relevance of the hairy woodpecker - (2005-12-28)
  [563] Merging pictures using PHP and GD - (2006-01-13)
  [819] My projector has a photo-id - (2006-07-31)
  [937] Display an image from a MySQL database in a web page via PHP - (2006-11-22)
  [1087] Telling a story in different ways - (2007-02-20)
  [1114] PHP Image upload script - (2007-03-21)
  [1185] Themes for the web site - (2007-05-13)
  [1188] What shape is your shake? - (2007-05-15)
  [1194] Drawing hands on a clock face - PHP - (2007-05-19)
  [1396] Using PHP to upload images / Store on MySQL database - security questions - (2007-10-19)
  [1506] Ongoing Image Copyright Issues, PHP and MySQL solutions - (2008-01-14)
  [1568] What colour is the season? - (2008-03-08)
  [1732] Old pictures and comparisons - (2008-08-01)
  [1895] Comparison - with and without flash - (2008-11-20)
  [2224] Trowbridge - a missed opportunity? Melksham - into the breach? - (2009-06-08)
  [2252] Leaping dog, Leaping horse, copyright of old masters - (2009-06-20)
  [2592] Re-using our pictures - (2010-01-21)
  [2884] Hotlinked images onto adult material sites - (2010-07-23)
  [3104] Catering in Syracuse, the Saigon Cafe, stolen images and Christmas - (2010-12-25)
  [3170] How far is something pictured from the camera? - (2011-02-15)
  [3402] That spec is a kingfisher ... - (2011-08-21)

Back to
Keeping Customers Informed

Previous and next
or
Horse's mouth home

Forward to
What backup is adequate?

Some other Articles

A new sign
Colour doesn't have to mean colourful
Hotel novelties
What backup is adequate?
Keep that image small
Keeping Customers Informed
2006 - Making business a pleasure
2005 - Come as a student, leave as a friend
San Francisco
Taking the dog for a walk

4759 posts, page by page

Link to page ... 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96 at 50 posts per page

This is a page archived from The Horse's Mouth at http://www.wellho.net/horse/ - the diary and writings of Graham Ellis. Every attempt was made to provide current information at the time the page was written, but things do move forward in our business - new software releases, price changes, new techniques. Please check back via our main site for current courses, prices, versions, etc - any mention of a price in "The Horse's Mouth" cannot be taken as an offer to supply at that price.

Link to Ezine home page (for reading).
Link to Blogging home page (to add comments).

You can Add a comment or ranking to this page

Like this? ??