Loading images to your website overview

IBCScorp.com is a web development company.  Over the last 15 years some of the staff at iBCScorp.com (Internet Business Services Consulting Company) have observed may changes in the way web sites are built.

One major change has been the increased ability for customers to dynamically manage their content on a web site.  In the last several years Content Management Systems, Web Galleries, Posts, Blogs, News Articles and almost any kind of media content management systems have made it increasingly easy for customers to self edit their web sites.

As an Internet Business Consulting Services Company, iBCScorp likes this change.  Putting control of a website into the hands of our clients makes it easier, faster and cheaper for them to make changes to their site.  For this reason we sell a lot of Content Management Systems to our clients.  CMS systems like Joomla, Magento, SilverStripe, Drupal, Dolphin and WordPress to name a few have made it very easy for people to manage their own content.

However, giving the wheel to people who have little experience at times with web development or how the Internet or Web pages work, can some times be frustrating for those people.  One issue that comes up quite often is how do I load images to my website consistently so they look correct every time.

While the exact method to do this may change depending on the tool the basic concepts are the same.

This post is to explain to Content Management System (CMS) Users how to prepare for Loading Images into Joomla, Loading Images into Drupal, Loading Images into SilverStripe, Loading Images into WordPress, Loading Images into Dolphin and in fact loading images into any web page custom or otherwise.

The concept is the same the logistics of how to get the image onto the page differs depending on how the page is edited.

This tutorial covers the concepts of how to edit the images.  These concepts will apply no matter what software program you are using to edit them.  And then we will give you one example of editing images using Microsoft Paint for your website, since it is a common and free application.  But the same principles apply anywhere.

Concepts of preparing images for your website

What file size should the images on my website be?

You want to keep the file sizes of your image small without sacrificing quality of your image.
For a Large image (approximately 600px by 600px) file size should be about 50k – 60k
For a Medium image ( approximately 300px by 500px) file size should be about 25k – 50k
For a Small/Thumbnail image (approximately 100px by 100px) file size should be about 10k

When you upload image from a camera, Most images are approximately 1400px by 1400px if not larger.

How do I Fix it:
By resizing your images you can reduce the file size.
To learn more about How to Resize images click here

What dimensions should the images on my site be?

Depending on what you are using you images for they will need to be differant sizes.

Thumbnails – no bigger then 150px by 150px
Bio Image – approximately 300px by 300px
Galley Image – no bigger then 700px by 700px
Product Image – approximately 500px by 500px

Most CMS (Content Management System) will adjust the size that your image will display, However your image may still be to large and cause your site to run slowly

How do I Fix it:
By reducing the file size your website will load the images faster and increase the speed of your web site.
To learn more about How to increase the speed of your Web Site click here

How do I avoid distortion?

You should resize your images to the size that you would like them to display on your website.
When you upload image from a camera, Most images are approximately 1400px by 1400px if not larger.

Images get distorted when your web site is displaying the image larger then what the original image was.

How do I Fix it:
When you resize a image you should only decrease the size from the original.
to learn more on How to Avoid Distortion when Resizing Images click here

Why is my image fuzzy?

Images will become fuzzy when your image proportion are incorrect. This can happen when the web site is displaying the image in a different size then what the image is.
This can also happen when you resize the image. ie. reduce height by 30% and width by 50%, or taking a thumbnail sized image and displaying it really large.

How do I Fix it:
Make sure when you resize a image you keep the image proportion the same
To learn more on How to Fix Fuzzy Images click here

Why does my page take so long to load?

Images can be large files witch will cause your web site to take a long time to load and make your website run slow.

How do I Fix it:
By reducing the file size of the image it will increase the speed the your web site will load.
To Learn more about How to reduce image file size click here

Free Software for preparing images for your website

There is a lot of image editing software out there for you to use. Some of the best ones we found are:

1. Gimp, This program works a lot like Photoshop and is a great tool to have. Gimp is a Free image editing software. To download this software click here.
2. Paint.NET, This is a great tool to have and is easy to use. Paint.NET is a Free image editing software. To download this software click here
3. Photoscape, This program is great to have it has a lot of great tool that you can use. Photoscape is a Free image editing software. To download this software click here

How to prepare images for your website using Microsoft Paint

Open Microsoft Paint:

Click on Start > All Programs > Accessories > Paint

Open your Image:

Click on file (In the top left) > Open
Then Navigate to your image and click open

Resizing your Image:

Click on Image (in the top left) > then on Stretch/Skew and a new window will appear, into which you can type the new width and height, as a percentage of the current size. Change both on them to the same number ie. 50% height, 50% width to keep the picture quality high