Tip:
Highlight text to annotate it
X
When placing images on pages in Sitefinity, or anywhere on the web, it is important that
we limit the size of our images. We do this for two main reasons. First, the larger the
image is on a web page, the longer that page takes to load. Here at the University, we
have an extremely fast Internet connection, so when previewing a Sitefinity page, you
might not notice a long loading time. However, for visitors with more typical connection
speeds, webpages containing large images can take a very long time to load, which can be
annoying and could cause users to leave the site.
The second reason we limit the size of images on our pages is that Content Blocks in Sitefinity
have a fixed maximum width. That width happens to be 704 pixels. So, if we place an image
on a page that has a width greater than 704 pixels, that image will overlap the edge of
the page, which simply looks unappealing.
There are many image editing tools on the market that you can use to re-size your images
before using them in Sitefinity, but this tutorial will use an online image editor called
Pixlr. Pixlr is a free online image editing tool and we are using it for this tutorial
because it is simple to use and because it works the same way on Macs and PCs.
To open Pixlr, go to www.pixlr.com/editor in your web browser.
Start by opening the image you wish to re-size by clicking on the "Open image from computer"
button. This will open your computer's folder manager. In this tutorial I am using a Windows
computer, but you should be familiar with the folder manager if you are using a Mac.
Select the image you want to re-size, and click "Open."
Pixlr displays the size of the image in the lower-left corner of the image. We can see
that this image has dimensions of 4000 by 2649 pixels. This image is far too large to
be used in Sitefinity.
To reduce the size of the image, we will use the crop tool, which is the icon in the top-left
corner Tools panel. At the top of the window, in the "Constraint" menu, select "Output size."
Then, using the Width and Height inputs to the right of the Constraint menu, input the
dimensions you would like for the finished image. Again, the maximum width for images
in Sitefinity is 704 pixels, however, most images are considerably smaller than that.
I will use a very common image size, 400 pixels wide by 300 pixels high. Simply type the desired
width and height dimensions into the two boxes.
Then, mouse over your image. You will see the cursor change to indicate that you are
using the crop tool. Click and drag from somewhere near the upper-left corner of the image to
somewhere near the lower-right to set the crop area. The area of the image inside the
box will remain, while the area outside will be discarded. You can move the box around
by clicking and dragging inside the box and you can change the size of the box by clicking
and dragging one of the blue squares on the corners of the box. When you are done placing
the box around the area of the image you wish to keep, press Enter, if you are on a PC,
or Return on a Mac.
Pixlr will automatically crop and re-size the image. Since the image is now much smaller
than it was before, you might need to zoom in to see the image more clearly. If you have
a mouse with a scroll wheel, simply scroll down to zoom in. If you don't have a scroll
wheel, you can use the zoom tool, which is the magnifying glass icon in the bottom-right
corner of the Tools panel. If you are happy with the image, click File > save. You may
wish to change the name of your image so you can keep a copy of the original image just
in case.