What is this thing we call "image"? - The Web Mistress - deSpain deSigns

It sounds weird, but many people don't understand what an image is, so they don't use it properly. Later on, I will give you inexpensive resources to edit you images, but first, I want to explain what an image actually is.  Knowing this can help you when working with printers or web designers, because they will be using and will require different types of files.

There are two types of images: Raster and Vector

raster vs vector

Today we will talk about Raster Images, because you will most likely use those.

Raster Images:

Example of Pixels

A raster image, is a file that contains "dots" or "pixels." Remember Super Nintendo games that had those blocky shapes and big squares of color? Those are pixels.

Every image used for printing or design work on the web is going to have pixels in them. The printer needs to know what color ink dots to put on the paper, and the computer needs to know what colors to show on the screen. Printers use CMYK (Cyan, Magenta, Yellow and Black), while computer screens deal with RGB (Red, Green and Blue).

The main confusion that happens with images is what images to use in web design and what images to use for printing - they are NOT the same thing!

We now know what pixels are, but how many pixels should there be? First, pixels are measured in DPI, which stands for "dots per inch." So, the more dots per inch, the better quality the image, right? Web does not need as many dots to show a high quality image. A 72dpi image will be crisp and clear on a web page, but the same image will be blurry if printed. This is why web uses 72dpi and the printer uses 300dpi.

Why not just use 300dpi on a website to make everything easier?

Easy. You could.... buuuuuuuuut.... your page will never load. Each extra dot in the image makes the file heavier. As an example, a 300dpi image can weigh 1MB, while the 72dpi can weigh 100KB, which is less than 1/10th the size, therefore the lighter image loads 10x faster on your web page!

Here are the 3 top types of image files that you will run into:

  • JPG
    • This type of image in compressed to give you maximum color, but keep the size down. It is a go-to type of image, but be aware that the background will not be transparent. This type of image is also prone to "artifacting" which is a bit of fuzzy pixels at the edges of colored parts of the image.
  • PNG
    • This file type may be a big larger than JPG because it isn't as compressed, however the image is crisp since there is rarely any artifacting.
    • A PNG will let you have a transparent background. Web designers will often ask for this of your logo, etc. so they have more flexibility in their online designs.
  • GIF
    • This is an older type of image and is being used less and less. The quality can be good for some images, but not for others, because the number of colors used in a GIF is limited.
    • A GIF can be used for simple animations


In the next article, I'll show you how to crop and do simple edits to your images inexpensively, so you have more control over your own images and can more easily work with designers. Stay tuned!



Photo Credit:
RASTER VS VECTOR - "Bitmap VS SVG" by Yug, modifications by 3247 - Unknown. Licensed under CC BY-SA 2.5 via Wikimedia Commons.
CAVE DRAWING - "AltamiraBison" by Rameessos - Own work. Licensed under Public Domain via Wikimedia Commons.
PEAR - By Nickpick910 (Own work) [CC BY-SA 3.0], via Wikimedia Commons

Add comment

People in this conversation

Load Previous Comments
  • Guest - Baba Chamatkar

    [url=http://batmanvssupermanstreaming.org/]batman vs superman live streaming[/url]
    [url=http://batmanvssupermanstreaming.org/batman-vs-superman-dawn-of-justice-release-date-in-usa-india-uk-germany/]Batman Vs Superman Release Date In USA[/url]

  • Guest - Baba Chamatkar

    <a href='http://icct20worldcup2016schedule.com/asia-cup-t20-2016-schedule-timetable-live-streaming-telecast-broadcasting/'>india vs pakistan t20 worldcup live streaming</a>

  • Guest - Cizen

    I am inspire about image and giving food that is not balanced will mean a child suffering from lack of certain nutrients in the body and writing services reviews help in image which is very dangerous and can as well result to death

  • Guest - Application Demo Videos

    The finest formation of images speaks similar to this. I perform not know regarding the type of picture. I am extremely thankful for these JPG, PNG, and GIF images differentiation.

  • Guest - Steve John

    The best creation of images speak like this. I do not know about the type of image. I am very thankful for these JPG, PNG, GIF images difference.
    rubber playground tiles for play land in UK

  • Guest - Edina Clark

    First of all I want to say that the post you wrote about image art is outstanding now I come to the point that I am also web designer and writer at do my essay for me uk , I think that web designing art wants creativity and practice.

  • Guest - emilie france

    Thanks for Sharing and keep it up Click Here

  • Guest - my assignment helmy assignment help myassignmenthelpaustralia.blogspot.comp myassignmenthelpaustralia.blogspot.com

    very nice………… there writer has shared a very nice skill with people and it is getting very famous in all over the world due to its quality. I have never seen such a beautiful kind of art piece this is the main reason behind my likeness for this blog and i wanna thank writer for this as well.

  • Guest - Allen Haul

    This on top of it’s contain possession of is for the reason that gleaming upsetting! God be alive animate insulted inactive on top of the practice in the track startup explainer video maker of inform connecting us both solitary of misery

  • Guest - Allen Haul