Editing Images for your website

build a websiteWhen you build a website, one of the most important parts of each and every page are the images. You’ll use images to show the products or services you provide, to create an impression of your company and the people involved, to grab internet users attentions or simple to add colour, interest  and life to a page of text. The quality of your images is vitally important. Rightly or wrongly, potential customers WILL JUDGE YOU based on the quality of the images you use, especially the images of the products and services you are providing. If you use grainy, low resolution images, which are pixilated, out of focus or just plain bad quality, they will reflect the quality of the products and services you provide and can actually discourage potential customers from doing business with you.

If you can obtain professional photography for your products / services from suppliers, associations etc, then do it! Such images will be supplied in a range of sizes and formats, perfect for uploading to your website. If you haven’t got access to professional photography, don’t panic!

build a websiteThe secret to getting the best from the images you have is to edit your images using an Image Editing Programme before you upload them to your website. You don’t need expensive programmes any more as ther are several free image editing programmes available on line. We’re going to look at one such programme which we recommend at Reason8 and which you don’t even need to download. Dr Pic. Open you browser and go to www.drpic.com.

You can open any image straight into this online programme and start editing straight away.

When modifying your image you can choose from the following settings: Resize, Crop, Rotate, Brightness / Contrast, AutoFix, Brush, Text, Gaussian Blur, Sharpen, Raise, Raised Frame, Polaroid, oil Paint, Spread and Grayscale.

Lets look at the first few of these settings.

build a website

Once you have loaded you image into Dr Pic, Select it by pressing CtrA on your keyboard or by clicking the select all button at the top. You can click inside your image and drag to move. You can also hold down the Shift key on your keyboard while resizing the selection. Double-click inside to crop. Click outside to deselect.

build a websiteResize: Click the resize button and here you can choose to reduce the size to 25%, 50% or 755. Or you can set a percentage or pixel width of your own (the height will be reset automatically to maintain the ratios). Choose from 100 pixels for a small thumbnail size to a maximum 400 pixels wide. 

Crop: crop your image to the size you need by clicking and dragging the box area over you image to the position you want it and then click the crop button.

Rotate: rotate your image 90 degrees to the left, to the right or turn it upside down.

build a websiteBrightness / Contrast: Use this option only if the brightness / contrast of your image really does need to be improved. Using a sliding scale, alter the brightness of your image. Use the selections to increase or decrease the contrast.

At any time you can undo any changes you make by clicking the Undo button at the top of the editing window.

build a website

Once you’ve finished editing, you can save it as a Jpeg or Gif format, back into your image folders on your own computer ready to upload to your website.

build a websiteCompressing your image to the right size is made easy with just 4 choices, 25% - 10KB, 50% - 14KB, 75% - 19KB and 100% - 130KB. Your Reason8 website system can cope quite nicely with 130Kb so feel free to go with 75 - 100%. But remember the smaller the image, the quicker your page will load so if the lower % images look good, then go with them.

Now login into your website. Go to the page (Step 3) or the item (Step 4) you want the image to appear on and upload it. Your newly edited image should load quite quickly.

We’ll look at some of the other things you can do to your images next time.

build a website


Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
This blog is running version
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-2227312-2', 'auto'); ga('send', 'pageview');