|
Pages: [1]
|
 |
|
Author
|
Topic: TIP: Adding images (and 'thumbnails') to web-sites (Read 2309 times)
|
Berlin-Bob
Global Moderator
RootsChat Marquessate
 Offline
Posts: 4713
by My Daughter. Chatting to find her Roots !
|
A browser always loads text first. If it sees that an image is coming, it sets a marker (usually a red cross) and continues, till all text is loaded.
Then, it starts loading the images. This means "shifting" the text at a marked position to accomodate the image.
The web-site builds up in a very "jerky" manner, and in the worst case, can lead people to saying "nuts to this !" and simply going to another site.
This is very noticeable when you have lots of images and a slow connection.
If you "tell" the browser beforehand, how much space the image will need then it wil position the text accordingly. The image can then be inserted without the text "jerking".
The (simple) HTML code for images looks something like this:
<img src="mypicture.jpg">
to define the size it must include the width and height attributes
<img src="mypicture.jpg" width="120" height="192">
Check the size of your image in a graphics program and enter it in width and height. You need the exact size as the width and height attributes also have the effect of forcing a re-size, which means more work for the browser, which means a slower web-site ...
(although you can also "use" this effect to distort pictures for special effects !)
Because loading images is so slow, it is sometimes better to load a 'thumbnail' , a smaller version, of the image, which is a link to the full size image.
This could look like this:
<a href="mypicture.jpg" target="images"> <img src="mypicture-t12.jpg" width="120" height="192"></a>
mypicture.jpg is the original image
mypicture-t12.jpg is the thumbnail. As I often have different sizes of thumbnails, I have got into the habit of naming them xxxx-t12, xxxx-t20 etc, where the number times 10 is width, in pixels.
target="images" causes all images to be opened in one seperate browser window
target="_blank" would cause each image to be opened in a new, seperate window, which leaves a lot of open windows, if you forget to close them ! Your choice !!
not using target="..." means that the image is loaded into your current window and you have to constantly use the "back" button to return to your web-site.
Tip: if you have scanned in a page of a photo album, then use a graphics program to "crop" thumbnails of the individual photos. Show the thumbnails on your web-site, which can either link to individual images, or to the scanned photo-album page.
|
|
|
|
« Last Edit: Friday 12 May 06 17:40 BST (UK) by Berlin-Bob »
|
Logged
|
Searching for Coleman, Moore, Kallnung in London; Margulies, Remenyi in E. Europe; Ancestors of Hessie Stevenson-Coleman-Baxter (Ireland, 1861) and, of course, any other ancestors for my web-site http://boco.rootschat.net All Census Data included in this post is Crown Copyright (see: www.nationalarchives.gov.uk) |
|
|
Berlin-Bob
Global Moderator
RootsChat Marquessate
Offline
Posts: 4713
by My Daughter. Chatting to find her Roots !
|
Another tip,
and my thanks to Keith Bateman, for reminding me of this, because this is important:
Bear in mind, that WINDOWS is pretty "sloppy" about file names, it treats upper and lower case the same.
RootsChat uses a LINUX server, which is more fussy. Best tip here is to keep all file names in lower-case, and avoid blanks and special characters in the names.
Although Windows quite happily accepts spaces in names of files many web servers (including Rootschats) use a system which does not. Another point to remember with regard to naming the files is that while to a windows system - picture1.jpg
- Picture1.jpg
- PICTURE1.jpg
- picture1.JPG
- Picture1.JPG
- PICTURE1.JPG
would all appear to be the same file to most web systems these are all different files and so when naming your photographs a general rule of thumb adopted is to use all lower case. |
|
|
|
« Last Edit: Monday 10 April 06 19:17 BST (UK) by Berlin-Bob »
|
Logged
|
Searching for Coleman, Moore, Kallnung in London; Margulies, Remenyi in E. Europe; Ancestors of Hessie Stevenson-Coleman-Baxter (Ireland, 1861) and, of course, any other ancestors for my web-site http://boco.rootschat.net All Census Data included in this post is Crown Copyright (see: www.nationalarchives.gov.uk) |
|
|
Berlin-Bob
Global Moderator
RootsChat Marquessate
Offline
Posts: 4713
by My Daughter. Chatting to find her Roots !
|
A picture tells a thousand words, so here are a couple of examples
1) Thumbnail as link to full size image:
Birth certificate of my Grandmother Maria Remenyi (1893-1946)
2) Thumbnail of detail as link to complete image:
My Greatgrandfather Moritz Margulies
The Linked image shows him, my Greatgrandmother and three of their children
Thumbnails are much quicker to load than the complete picture, which is important when considering that people with a slow dial-up connection are liable to get fed up and go find another web site to browse.
Here's a very simple photo gallery, using thumbnails .....
http://boco.rootschat.net/b1/maha1889-photos.php
I personally use HTML, but I am sure that the principle involved can also be used in other software for building websites.
Bob
|
|
|
|
« Last Edit: Saturday 28 October 06 16:22 BST (UK) by Berlin-Bob »
|
Logged
|
Searching for Coleman, Moore, Kallnung in London; Margulies, Remenyi in E. Europe; Ancestors of Hessie Stevenson-Coleman-Baxter (Ireland, 1861) and, of course, any other ancestors for my web-site http://boco.rootschat.net All Census Data included in this post is Crown Copyright (see: www.nationalarchives.gov.uk) |
|
|
Keith Bateman
RootsChat Marquessate
Offline
Posts: 3830
.....The Cheshire Cat
|
Hi Bob,
Not sure if you want questions on this page - if not move it to the main board!
I notice even with your thumbnails you "put" the images in their correct postion - is this much quicker than my way of adding the text and images afterwards?
The problem being I am on broadband and EVERYTHING loads very quickly anyway - so I don't know how other people suffer looking at my website! 
Cheers
Keith
|
|
|
|
|
Logged
|
|
|
|
Berlin-Bob
Global Moderator
RootsChat Marquessate
Offline
Posts: 4713
by My Daughter. Chatting to find her Roots !
|
Hi Keith,
As far as I know a browser will always show the text first, "remembering" where the pictures will be going, and then coming back and inserting images in the appropriate places.
If you know the size of the image and say so in your programm, then the browser leaves that much space, but if the browser doesn't know, then it leaves a minimal space, and afterwards it "pushes the text aside", to make room for the images.
You notice this sometimes on a slower connection, that the text jumps about a bit for a while, ill all images have been loaded.
I hope this answers your question, if not then I haven't understood it ( )
Bob
ps. I've just looked at your site on my slow connection. Your's is one of the "better" ones: the program tells the browser how big the images will be, and although the text is loaded first, there are "right sized" empty boxes for the graohics, which are then loaded later, without the text jumping about !
|
|
|
|
|
Logged
|
Searching for Coleman, Moore, Kallnung in London; Margulies, Remenyi in E. Europe; Ancestors of Hessie Stevenson-Coleman-Baxter (Ireland, 1861) and, of course, any other ancestors for my web-site http://boco.rootschat.net All Census Data included in this post is Crown Copyright (see: www.nationalarchives.gov.uk) |
|
|
Zeb
RootsChat Senior
Offline
Posts: 429
|
Additional info:
There are two more parameters for IMG that you might find useful and they are ALT and BORDER.
ALT stands for alternate text. This gets displayed as a tooltip if you hover the mouse over the image and next to that little red "x" should an image fail to load. This is particularly handy for showing viewers of your site what should be there.
BORDER lets you determine if you want a border around your image or not and if yes, what size. A value of zero (0) says "no border" whereas any value higher than 0 means "yes" and how thick it is. Higher the value, the thicker it'll be.
Here is an example of all the parameters used at the same time:
<img src="mypicture-t12.jpg" alt="My Picture" width="120" height="192" border="0">
|
|
|
|
|
Logged
|
Derby: WOODCOCK (Donnington)
Devon: HARRIS (Plymouth)
Lancashire: DERRICK
Lincolnshire: CROPPER, WOODCOCK (Boston)
London: BARKER, DUGGIN, HARRIS, HINTON, HULBERT, WHITE
Wales: HARRIS, PRITCHARD (Pembrokeshire)
Warwickshire: DERRICK, WOODCOCK
Desperate for my Woodcocks from Birmingham!
|
|
|
|
|
|
|
lvninthepast
RootsChat Member
Offline
Posts: 100
|
Hi  I've spent some time learning how to put my website up and now I was hoping someone could tell me how large my photo files can be on the web page? I think there are some specific size restrictions which are causing me to have difficulties publishing my site....from FrontPage. I know that I read that somewhere before in a different email from Berlin-Bob but I can't find it! Sorry to ask a question whose answer is already available somewhere!
Thanks so much, Rhondda
|
|
|
|
|
Logged
|
Green (Glamorgan) Hunt (Taff Well, Pontypridd, Bethnal Green) Pugsley (Bristol) Aston (Pontycymmer) Winn, Springer Spearing Barnett Hickey McCann Broadbent (Oldham) Census information for U.K. data is Crown Copyright www.nationalarchives.gov.ukCanadian census information: copyright Government of Canada (Library Archives Canada) Every reasonable effort has been made to verify copyright/source information |
|
|
Zeb
RootsChat Senior
Offline
Posts: 429
|
I think the first question would be to ask how big are your files and what program are you using to upload them?
A common problem with uploading data files (not text) is that there are two modes of uploading onto a server - ASCII and binary.
When uploading text files (HTML, scripts etc.) you must use ASCII mode.
If uploading data files (pictures, audio, archives etc.) you must use binary mode.
A lot of programs have a third mode which is "intelligent mode." That is, it'll try and decide automatically which mode to use. Handy if you have all your files on one folder as it saves you having to select files separately before uploading.
If you upload pictures using the ASCII mode then they simply won't display. It'll seem as if the file is there but can't be displayed.
Have you got the page uploaded that contains the picture you're having problems with so I can have a look at it?
|
|
|
|
|
Logged
|
Derby: WOODCOCK (Donnington)
Devon: HARRIS (Plymouth)
Lancashire: DERRICK
Lincolnshire: CROPPER, WOODCOCK (Boston)
London: BARKER, DUGGIN, HARRIS, HINTON, HULBERT, WHITE
Wales: HARRIS, PRITCHARD (Pembrokeshire)
Warwickshire: DERRICK, WOODCOCK
Desperate for my Woodcocks from Birmingham!
|
|
|
lvninthepast
RootsChat Member
Offline
Posts: 100
|
Hi Zeb, I figured it out with some help from Berliln Bob. For some reason my photo files had .JPG instead of .jpg Not sure how that happened but I tried again and yes now I can view all photos. Thanks! Rhondda
P.S. I don't know how to mark that this message is 'completed'. Do you know how to do that? Feel free to view my site www.lvninthepast.rootschat.net
thanks again,
Rhondda
|
|
|
|
|
Logged
|
Green (Glamorgan) Hunt (Taff Well, Pontypridd, Bethnal Green) Pugsley (Bristol) Aston (Pontycymmer) Winn, Springer Spearing Barnett Hickey McCann Broadbent (Oldham) Census information for U.K. data is Crown Copyright www.nationalarchives.gov.ukCanadian census information: copyright Government of Canada (Library Archives Canada) Every reasonable effort has been made to verify copyright/source information |
|
|
|
|
|
|
|
|
|
|
|
Pages: [1]
|
|
|
|
|
