Building Websites.
These web pages are a hobby, not a career, but learning techniques and tools can be useful to anyone. I am technically literate, and can use technology and program, and have led teams of developers and designers of technology.
This site was originally created using wordpress.com. I am going to be looking at using more tools to improve appearance, and will be documenting that experience over the next few months. I will also look at the pros and cons of using wordpress.com, and what independence exists to move from wordpress.com is desired.
Image Basics.
Introduction.
Images is a significant and fascinating topic, and I will be expanding this topic over time.
Bitmaps.
A bitmap is where an image is represented by an array of dots. In computing and photography today, this is the ‘normal’ format for images. The image is normally a rectangle, with “high definition” or HD (or Full HD) images being 1920 dots horizontally by 1024 dot vertically. 4K images have around 4x more dots, with approximately twice the resolution in each dimension.
Each dot has a colour. If one computer ‘byte’ (8 bits) is used for each dot, then there are 256 ( 28)possible colours, which is normally to lowest level of colour information, and considering ‘colour’ also encompasses relative brightness, 256 shades in total is insufficient for a quality photograph. Images with one byte per pixel or “dot” are only useful for images that combine a small fixed set of colours. Confusingly, and erroneously, and “8 bit colour” (and even “8 bit colour depth”) is in some texts used where there is 8 bits for each of red green and blue, which makes 24 bits in total. True 8 bit colour, is insufficient for photographs.
Images of real world objects, represent colour as levels of each of red, green, and blue, matching the image sensors in the human eye. Images of real world objects that would be convincing to birds, or insects, each of which have more colour sensors in their eyes, would require more information than we using in our images.
The correct terminology for 8 bits for each of red, green and blue, is “24 bit colour“, or also know as “true colour” , as used in most jpeg images, is 8 bits or 256 levels for each of Red Green and Blue, which means 3×8=24 bits in total per pixel. This three bytes per dot, provides for 224=16 million colours in total, but is still insufficient for the highest quality images.
Displays such as on a TV screen, printed images and photographs are all created from tiny dots that hopefully are too small to notice individually. Camera sensors, and the human eye, also sensors points of light as individual pixels, even though our brain translates all those pixels into “surfaces” that seem continuous, and even further into the concept of what object would be the source of all those pixels of specific colours.
Vector Images.
Although our eyes see “pixels”, our brain translates this into recognised objects. Instead of seeing the image to the right as a series of dots of different colours, our brain breaks the image into:
- a background.
- a plate
- an apple.
Each of these has additional information, such as the plate being a white ellipse with wavy edges, the apple being almost a circle with some colour gradients.
A vector image records not the dots our eyes see, but the shapes our brain translates those dots into as it recognises the objects from the dots seen by our eyes. A vector image is a set of shapes, rather than disconnected dots.
Since nothing is represented as “dots”, when a vector image is scaled, or zoomed, resolution is never lost.
3D Images.
3D images simply take the vector image concept to the next level, and instead of building the image from 2D shapes, the image is created from 3D shapes. Animated movies use not pixels or bitmaps as the source of information, but 3D shapes. Blender is the leading open source tool for 3d.
Tools: Software and/or Online Tools.
For bitmaps, I use Gimp, for vectors, Inkscape. I will update this with the “why” and the alternatives over time.
Note: I am now looking at changing over to Synfig for vector graphics.
Creating Animated Gifs Images.
Tools.
Inkscape.
Some what the equivalent of Adobe Illustrator.
For separating images from backgrounds, draw a line using either the “draw curves and straight lines” or “draw freehand” tools to draw a line around the image. The use “edit paths” tool to touch up the line around the image. Once ready, use the select tool to select the path, then “shift select” the image, and use “object/clip/set” and it is done. Can be useful to have a copy of the image if it was edited as the background is erased.
For adding colour gradients.
GIMP
GIMP is a free/open source, 2D graphics editor, which can create, import and export, both raster and vector images. (It’s primarily for raster graphics, but has some minimal vector features.) It has a relatively simple and easy to use GIF animation feature, with at least 3 tutorials on their website. You can find them by looking through their Documentation page. Basically, images drawn with Inkscape need to be exported to PNG, before they are imported into GIMP (hint: in GIMP, use Import as Layers). Note that there are MANY other programs which can create GIF animations — just search!
From Inkscape notes on animations.
Eliminating The Animated Gif Colour Problem.
Now for a practical example, how it can go wrong, and how to fix it when it does.
The problem I had was I created a series of around 10 different graphs from an Excel spreadsheet, and wanted to animate how the data progressed. An animated gif combined the images for each graph, in the one file, and mores from image to image. But, as you can possible see, the colours went crazy.
Why?
Images from graphs, or maps, or diagrams, do not need many colours. There is no progression though shades of colour gradients, and everything is a fixed colour. This allows program such as Excel to use a very efficient colour encoding, which is based on a ‘map’, or table of colours. The table has a number of colours, and for each colour, the level or red, green and blue to be used. The colours in this image would be 1: White, 2: Orange, 3: Blue, and 4 Black. That is almost all that would be needed. For each pixel, only the index or “colour number” required is needed, allowing for a small file. But perhaps you can guess the problem: different graphs used different numbers for the different colours. So the background of image 1 used “1: white, 2: orange”, and another image may have used “1: orange, 2: white”. When the images are combined, all are then using the one map!
The solution I found was to edit each image individually, in Gimp, exporting the image as a gif with a colour setting of 16bcpRGB. Then open each image as a layer and exports as an animated gif. Problem solved. All images then used their own colours correctly.
Resources
The Image Problem
It is problem for free things. There are many resources of open source software, advice on how to solve problems, and other extremely valuable free things available on the web. The problem is, sometimes a whole industry arises from selling what might otherwise be free. How does the industry compete when charging for that which is free? By using their revenue to push free resources out of search results.
If you search for an image, what you will mostly find is images business want to sell you, even when you only need something available for free.
Where to find images.
This list is in early days, but will continue to improve. Bookmark the like from the table of contents if it is useful to you.
- Fully open
- Vector and clipart
- https://publicdomainvectors.org/en/
- http://clipart-library.com/
- https://clipart.me/ (mix of fee and paid images- ‘crown’ denotes paid)
- https://www.pngegg.com/
- Images
- Vector and clipart
- login (but free)
Updates:
- 2022 Jan 1st: Initial version.