The aim of this article is to provide some guidance towards adding the images
and more importantly some ideas on improving the delivery of these images to
those who are browsing your web site.
With DotNetNuke it is easy to add images to your web site. It is a simple two
step process:
- Add the Image to the Web Site.
We can add the image to the web site using
the File Manager tab under the admin menu. For more information on performing
this action see this article.
- Add Image to Text Module.
Using the Text/HTML module we are able to
provide text and pirtorial content for our web page. If you are using
InetnetExplorer (release 5.5 or later) then the editor for this module may be
presented with a WYSIWYG interface. Included within the editor in the WYSIWYG
presentation is an 'insert Image' icon, used to pick and define the details
relating to an image.
Within the text editor we are able to adjust the image size either larger, or
smaller than the original image which was uploaded to the server. Unfortunately
the interface provided for controlling the image whilst it makes the task easy
doesn't encourage us to consider all of the facts. I'll consider some of these
below:
Resize an Image to Match the Final Presentation Size
It
is a shame to see a web page where the images are observed to slowly load, only
to discover on inspection that the image which has been downloaded is, say, over
2000 pixels wide and approaching 300KB. However, the image viewed on the web
page is only 150 pixels wide. An image which is 132x176pixels may only be 6KB in
size. This means that by reducing the image we can acheive a download speed 50
times quicker for the same presented image.
Reduce Image Quality if Possible
Most image editors
provide the option of optimising the saved image size for the web. When saving
an image for uploading to a server consider whether by degrading the quality of
the image a fraction you might reduce the size of the saved image. Try saving
the image at 90%, 80% and 70% quality. Can you see any difference when viewing
the image? What difference has this made to the file size? don't forget that the
smaller the file that has to be downloaded along with your web page, the faster
the overall page will be presented.
Use Thumbnails
Thumbnail images are a great way to allow
images to be presented within the context of a page. Wrap the image in a
hyperlink to open a reference to the original larger image in a new browser
window. For example:
<a
href="/images/reading/station2.jpg" target="_blank"><img
src="/images/reading/station2_thmb.jpg" alt="Reading Station (300K)" width="176"
height="150" border="0"></a>
Content Management Website Editors
A CMS website editor
will allow you to add an image to a page, and possibly allow the image to be
resized. However, it is likely that you are only setting the image properties
for the browser to handle the resizing.
Using a browser to reduce image width and height
Image
editors tend to do a much better job of resizing an image than web browsers. why
not do the job once by uploading the image at the same width and height to how
you wish it to be viewed, rather than for it to be resized everytime someone
views the image on their computer? The less work that the local computer needs
to do, the faster a web page will be downloaded, and presented for viewing.
So what is the big concern about the total physical size of the images to be
downloaded? If we consider our 300KB image on a 56K modem dial-up connection.
This will take a little over 5 seconds to download, assuming perfect 56K
transfer per second. Our reduced size image of 6KB will take approximately 1/10
sec. So by optimising the size of the images add to our web page we are able to
create a faster more responsive web site. Many who use dial-up connections are
paying per minute on their telephone bill.
Lastly don't forget to consider the server on which your web site is hosted.
If your web site is very popular then if we take our examples above with
reducing the size of the images, it is a little like increasing the capacity of
the server, we will be able to cater for a higher number of hits on the server
without observing a degradation in performance.