Skip to main content
#
SiteFresh Web Design
Faq's & Pricing
Testimonials
Register Domain Name
Contact
email usour facebook page
Saturday, November 19 2011

We receive many questions on adding and editing images when using the builder. We understand the value a well placed, cleanly edited image, which fits well onto your page, adds to your website, so have included some tips on image editing for you.

Adding Your Image to the Website Builder

When you upload an image to your website, the online builder will do its best to accommodate that image no matter what size it is. Many customers are unaware that they are, in fact, uploading an image which is VERY large, and, once its been uploaded, this of course leaves no more room on the web page for any text - or, it might even be so large that it extends out the actual width of the website itself. That doesn't look good, of course!

To ensure your image will fit in the space you have allowed for it, consider the width of your entire webpage. You can find this information in Design - Layout Properties. Most web page widths are between 980 and 1000 pixels.

Then, consider the width of any sidebars you have on your website - most tend to display a left hand sidebar at least, with submenus or links to product pages, for example, and this will usually take up anywhere from 150 - 200 pixels of the width of your webpage.

This leaves you with a total width of around 850 pixels in your page content area (and even less if you also have a right hand sidebar to consider).

If you want to add a really large image to display something of importance on your page (your storefront, or a featured product, for example) you could use the "Add" - "Text" feature in the builder, and select the option which shows an image on top of a text area. This will give you a lot of width to display a large image (anywhere up to 800 pixels wide), without having to also fit in text on either the left or right sides.

Otherwise, if you are wanting to include an image with text on the right or left relevant to that image, we would suggest that 400 pixels wide is perhaps the maximum to use. This will leave enough space for the text on either the right or left (depending on the layout you choose) to appear neat and tidy, and uniform beside the image.

Editing Your Image On Your Computer

To work out the current size of your image, and if it needs to be cropped or sized down at all, navigate to your image folder on your computer, and hover over the image you are wanting to upload. A pop-up should appear showing you the width and height of your image in pixels. If you dont see this pop-up, right click on the image, and select "properties" from the drop down list. This will also display the width and height in pixels for you.

If its clear the image is too large for how to intend to use it on your webpage, you can "Resize" or "Crop" it using an image editing application.

Paint - Many computers will come pre-installed with an application called "Paint". It can be located by clicking "All Programs" - "Applications", and then selecting "Paint" from the list. Easily open an existing image in here, and click the "Resize" button to resize down the entire image, or "Crop" to select a section of the image to use (this is helpful to remove unnecessary white space, or to highlight something inside an image).

Microsoft Office Picture Manager - The Professional version of Microsoft Office comes with this application, and it can also be purchased separately. We find it EXCELLENT for simple re-sizing, cropping and colour balancing.

Specialised Image Editing Software - If you believe you will need to do significant image editing in order to make the most of your website, programs like Adobe PhotoShop, GIMP, Microsoft Expression Design, CorelDraw and more are available to purchase both online and in stores. 

Editing Your Image Using the Website Builder

If you dont have any of the above applications, or would simply prefer to edit your images online, you can do so via the Builder. Upload your image as usual either via the "Add Component" capability, or simply by clicking the "Insert Image" button while you are editing a text area on your website.

If you've used the "Add Component" section, save your upload even though it isn't the correct size, just to be sure the Builder has a copy of the file. Then, "Edit" the section. You will see a "Resize/Edit Image" button over the image now. Click this button and either resize down the image (in percentages or using the slider), or crop it, and apply your changes.

If you've simply used the insert image button while editing some text, once the image is uploaded into the text, hover your mouse over the sides or corners of the image, and you'll see arrows around the edges of the image. Move these arrows to resize your image down.

Problems?

Email us! Thats what we're here for!

Posted by: Admin AT 09:50 am   |  Permalink   |  0 Comments  |  Email
Comments:

Post comment
Name
 *
Email Address

Message
(max 750 characters)
*
* Required Fields
Note: All comments are subject to approval. Your comment will not appear until it has been approved.

SiteFresh Web Design on Facebook

"Moving your new venture into the on-line world can be overwhelming, but not when you work with SiteFresh. I received such great service and finished product, not to mention subsequent assistance and follow up support. Responsive, professional, creative, supportive, and patient. Public feedback has all been extremely positive. From the moment you engage SiteFresh, you can absolutely relax knowing you are in safe hands."
Margaret,
Caring Kids 

"I cannot reccommend SiteFresh Web Design services enough! They have been fantastic to work with and have created the most amazing website and it is better than I ever imagined. Have loved working with them and so excited and proud to refer others. Thank you so much! ♥ lots of love."
Talya,
Feeling Ostomistic

    Contact

    Email SiteFresh Web Design
    Potts Point NSW Australia
    Servicing local, national and international clients

    email usour facebook page

    Really, really affordable, professional website design

    Copyright © SiteFresh Web Design™ 2011 - 2019. All Rights Reserved.

    .