How To Get Images Ready For Use In Your Website

The Internet is a fabulous thing.  But like most things in life it is full of compromises. Two major limitations the Internet has is bandwidth and download speed. Bandwidth is the volume of data that can be sent across the cables of the Internet in a period of time.  Download speed refers to how fast data can be moved onto the computer of someone looking at your site.

Golden rule: Always assume your website visitors have slow download and design your site to suit.

Images are usually the largest files required for a website.  You want the file size to be as small as possible.  The main way to do this is to resize images to their required size before adding them to your website.

Elastic has built in features that makes this very easy!

Background About Images:

  • Image size is measured in pixels
  • A pixel is a single dot of an image
  • The symbol for pixel is px
  • A standard computer screen is 1024 pixels (1024 dots) wide
  • If you insert an image into a webpage that is wider than 1024px it will be larger than the screen of the computer
  • Generally images in your web pages will be no wider than about 400px depending on what you are trying to do
  • When you first take a high quality image on your camera the image will often be around 3000px to 4000px wide
  • If you shrink a large image in the webpage itself the full image still loads
  • If you pre-shrink the image before upload then you save lots of download time
  • Images have a ratio of width to height
  • An image that is 2000px wide and 1000px high has a width to height ratio of 2:1
  • When you resize an image the ratio doesn't change
  • You can't resize an image that is 3000px by 1000px and make the image the same size as an image 2000px by 1000px
  • If you want 2 images with different width to height ratios to be exactly the same size you will need to crop (remove) some of the larger image

How to upload, resize and insert an image using Elastic:

Post your comment!

  (Email will not be shown)
The following characters cannot be used - / " ! \ ' ; :
Anti spam Captcha:
captcha image

Written by: Chris Hodson

Find us on Google+