Uploading Images

How to Upload Images to Your Website

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

One major change has been the increased ability for customers to dynamically manage their content on a website. 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 websites.

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.

We like this change, however, giving the wheel to people who have little experience with web development or how the internet or webpages work, can sometimes 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 webpage - 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. 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.

Preparing Images for Your Website

What File Size Should Images On My Website Be?

You want to keep the file sizes of your image small without sacrificing the 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.

For reference, when you upload images 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.

What Dimensions Should Images On My Site Be?

Depending on what you are using your images for, they will need to be different 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 Content Management System's (CMS's) will adjust the size that your image will display, however, your image may still be too 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 website.

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 an image from a camera, most images are approximately 1400px by 1400px, if not larger.

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

How Do I Fix It?

When you resize an image, you should only decrease the size from the original.

Why is My Image Fuzzy?

Images will become fuzzy when your image proportions are incorrect. This can happen when the website is displaying the image in a different size then what the image is. This can also happen when you resize the image. i.e. 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 that when you resize an image you keep the image proportion the same.

Why Does My Page Take So Long to Load?

Images can be large files, which can cause your website 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, you can increase the speed the your website will load.

Free Software To Help You Fix It

There is a lot of image editing software out there for you to use. Some of the best ones we have 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.
  2. Paint.NET - This is a great tool to have and is easy to use. Paint.NET is a free image editing software.
  3. Photoscape - This program is great to have, as it has a lot of great tools that you can use. Photoscape is a free image editing software.

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. 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 i.e. 50% height, 50% width to keep the picture quality high