Support for web authors
Graphics in SharePoint Designer and FrontPage:
resizing images
SharePoint Designer and FrontPage make it easy to resize images on the screen:
just click on the image and move the handles (small black squares) that appear
at each corner.
Unfortunately, this specifies the width and height of the image in the
web browser without affecting the file size, so you can end up with a
small image that takes ages to load. If you want your image to
appear
100 pixels by 100 pixels, for example, you should edit the image so that
it is actually that size.
Resizing and resampling
In SharePoint Designer and FrontPage, when you click once on the image
you have added to your web page, you will see small black blocks - or
'handles' - appear in each corner and in the middle of each side. This
tells you that the image is selected.
To resize the image, simply click one of these handles and drag it. As
explained above, this simply tells the user's web browser what size to
display the image, it does not affect the image file itself. A large
image resized in this way will still be slow to load.
To
tackle this you need to resample the image: click on the picture
and make it smaller by dragging its handles. When your image is
selected:
- in SharePoint Designer, the resample button should
appear immediately below the picture: click on this to resample;
- in FrontPage an extra toolbar should appear, either at
the foot of your editing window or as a floating toolbar: one of the buttons
on the toolbar is the resample button - if you click on this, FrontPage will
create a new copy of the image file resized to match the dimensions you have
set on your web page by dragging its handles.
Next time you save the web page, you will be asked if you want to save this
new image file; click OK to save the file. Your web page will now load
more quickly.
Cropping
If
you've decided that you want your picture to show only one region of the
original picture you can crop the image in FrontPage.
Select the image by clicking on it once. Just as before, the image
toolbar appears: this time choose the Crop tool. An outlined box
appears on the picture: simply drag the sides of this box into position
and click the Crop button again.
As with resampling, next time you save the web page FrontPage will ask
if you want to save this new image file; click OK to save the
cropped image file.
Image sizes: a quick guide
The image below should give you some idea of how big images will appear
on screen, measured in pixels . You should ensure that no images are
wider than about 500 pixels, as any wider images may make a page too
wide to print.
[Next: other image improvements]
[Graphics in SharePoint Designer and FrontPage: contents]