Making a Picture Efficient and Web Friendly

Most of you know about making pictures "Web Friendly".  This term refers to making a picture small in pixel size and in file size before uploading it into a WebMedley media library.  Doing this will make sure your pictures appear quickly regardless of the connection speed of the visitor. 

But what if you want to make a web page on your site which contains nothing but pictures?  What if you had a gallery of pictures?  What if the pictures you want are BIG?  Many websites have a "gallery" page which will display up to 20 pictures.  Following our Web Friendly tips with this page will certainly help, but even with web friendly pictures, a page containing more than 10 can still take a long time to load.  There is another way to make these types of pages more efficient.  You can use what are called Thumbnail  previews, and link them to another page which displays the photo or graphic in its full size.  This will let the visitor decide if they want to wait for the picture to load up, or just look at the previews.  This also allows for your gallery page to have many more pictures on it. 

Making a Thumbnail Gallery:

Start out by saving 2 copies of all the pictures you are going to want to put in your picture gallery.

1. One copy will be the actual size of the picture, which could be as large or small as you want (although no larger than 500x500 at the largest)
2. The other copy will be a small version of the picture, this picture should be about (80x80).  This will not show the details of the picture but it should be large enough to give a general idea of what or who is in the picture. 

Upload all these pictures into a media library in your WebMedley Management Console.

Now that youv'e got the pictures created and uploaded, it's time to create the pages they will be on. 

Start out by creating a page for each individual picture.  These pages will each contain one of the large copies of your pictures.  After youv'e created a page for each large copy of the pictures, detach the pages from the hierarchy (this will prevent WebMedley from creating a link automatically for these pages in the dynamic navigation).  Be sure to give each new page a Title and File name, since we will be creating links to these pages, a good file name that is easy to remember will be crucial. 

Finally, insert the large version of your pictures on the detached pages you created.  There should be one picture per page. 

Next, create a main page and call it "gallery".  This page will contain the thumbnail previews for all of your pictures.   On this page, insert a table which will contain the small version of each one of your pictures.  Since these pictures are extremely small, they will load up extremely quickly and prevent the visitor from waiting for the entire page to load. 

Once you have the small pictures inserted on the Gallery page, all there is to do is create the links.  Click on each picture and make it a link to the page which contains the corresponding large picture.  This process may take some time, but it will save time for the visitor of your site (which is always a good thing).

A good example of this type of thing can be seen at our Header Media Newsletter page.  This page has each of our old template, when you click on a template, a pop up window (which is actually just another Webpage, but smaller) appears with the details of that template.