Vectors and bitmaps are 2 ways an image can be made of. As bitmaps are based on pixels, vectors are based on mathematical calculations. Bitmaps are fixed in size and thus will blur when scaling up to big. Vector images are resolution independent and are smaller in size (kilobytes) thus stay crisp and clear when scaling up. A vector image in Storyline can be either a svg or a default shape ( in basics also a svg ).
Maths is trying to be very clever here by being very succinct and to the point. :)
Here is a very long-winded explanation I gave on these boards a while back. I think I might expand it for further clarification, if needed.
There are 2 main image types; Raster images (also known as bitmaps) and Vector files.
Bitmaps are images compiled of pixels. The more pixels in an image (generally) the more detail the image will contain. The more pixels crammed into an inch (known as dots per inch or DPI for short) the sharper the image will appear. The downside with more pixels is the file size gets bigger.
JPEGS are predominantly used online because it is a 'lossy' compression file type that allows one to scrunch down the pixels to create smaller file sizes. This used to be important back in the Intertubes' early days (but also now with mobile data charges). The downside is the more the image is compressed the more pixelated it looks with things called 'artefacts' appearing around the edges of details. The trade-off is getting the happy medium between image quality and file size.
GIFs were/are predominantly used for flat graphic images, such as logos, illustrations, etc, due to its file capabilities of eliminating unnecessary pixel information (basically colour - the 'flatter' the colour (no gradients, shadows, etc) the less colour used, the smaller the file size. Ideal for icons. Also, the file format allowed for transparency and animations making it the de-facto choice for spicing up static pages/slides.
PNGs are the cool kids on the block cos they can (theoretically) do anything, but their primary use is that they are way better at handling transparency than GIFs. File sizes, in general, are slightly larger than equivalent JPEGs (much more so if transparency is included). Use only if transparency is needed.
The downside to all these formats is that if the bitmaps are enlarged or scaled upwards, they lose their sharpness and become blurry or 'soft'. The bigger the scale upwards the worse the effect.
Vectors use mathematical magic to display the information. Vectors are points (uh, in space) and vector lines um... join together creating shapes. The more vector points, the more shapes, the more 'complicated' the image. Sort of... There are many different Vector formats out there, such as WMF, EMF, EPS, the KLF, and SVG each with their own 'best use' advantages and disadvantages. I have never gotten an EMF to work for me. Ever. I don't know why it exists.
SVGs are known as Scalable Vector Graphics, and are the super cool new thing (they have been around for decades) and offer uh, scalable... vector... graphics to be used in your site/slide/artwork. The trouble is, Storyline is really behind the curveball (is that a phrase?) on this and its implementation is a bit below par. It should allow us the import of SVGs as images but then offer the flexibility of being treated as 'shapes' within Storyline to allow tweaking or editing of strokes, fills, transparencies, etc. It kind of worked with the Powerpoint workaround but Articulate have broken that official 'hack'.
SVGs should replace any instance of a static GIF used in the past. Any logos that were transparent GIFs or PNGs probably should be upgraded to SVGs (unless it's a mad logo with rainbow gradients and drop shadows everywhere). That's the short answer, really.
Here's a link to a demo I mocked up attempting to show the difference in image quality of the various file formats. But for some reason, my Photoshop seems to be creating 300dpi images that look the exact same as 72dpi images and I don't know why.
2 Replies
Vectors and bitmaps are 2 ways an image can be made of. As bitmaps are based on pixels, vectors are based on mathematical calculations. Bitmaps are fixed in size and thus will blur when scaling up to big. Vector images are resolution independent and are smaller in size (kilobytes) thus stay crisp and clear when scaling up. A vector image in Storyline can be either a svg or a default shape ( in basics also a svg ).
Maths is trying to be very clever here by being very succinct and to the point. :)
Here is a very long-winded explanation I gave on these boards a while back. I think I might expand it for further clarification, if needed.
There are 2 main image types; Raster images (also known as bitmaps) and Vector files.
Bitmaps are images compiled of pixels. The more pixels in an image (generally) the more detail the image will contain. The more pixels crammed into an inch (known as dots per inch or DPI for short) the sharper the image will appear. The downside with more pixels is the file size gets bigger.
JPEGS are predominantly used online because it is a 'lossy' compression file type that allows one to scrunch down the pixels to create smaller file sizes. This used to be important back in the Intertubes' early days (but also now with mobile data charges). The downside is the more the image is compressed the more pixelated it looks with things called 'artefacts' appearing around the edges of details. The trade-off is getting the happy medium between image quality and file size.
GIFs were/are predominantly used for flat graphic images, such as logos, illustrations, etc, due to its file capabilities of eliminating unnecessary pixel information (basically colour - the 'flatter' the colour (no gradients, shadows, etc) the less colour used, the smaller the file size. Ideal for icons. Also, the file format allowed for transparency and animations making it the de-facto choice for spicing up static pages/slides.
PNGs are the cool kids on the block cos they can (theoretically) do anything, but their primary use is that they are way better at handling transparency than GIFs. File sizes, in general, are slightly larger than equivalent JPEGs (much more so if transparency is included). Use only if transparency is needed.
The downside to all these formats is that if the bitmaps are enlarged or scaled upwards, they lose their sharpness and become blurry or 'soft'. The bigger the scale upwards the worse the effect.
Vectors use mathematical magic to display the information. Vectors are points (uh, in space) and vector lines um... join together creating shapes. The more vector points, the more shapes, the more 'complicated' the image. Sort of... There are many different Vector formats out there, such as WMF, EMF, EPS, the KLF, and SVG each with their own 'best use' advantages and disadvantages. I have never gotten an EMF to work for me. Ever. I don't know why it exists.
SVGs are known as Scalable Vector Graphics, and are the super cool new thing (they have been around for decades) and offer uh, scalable... vector... graphics to be used in your site/slide/artwork. The trouble is, Storyline is really behind the curveball (is that a phrase?) on this and its implementation is a bit below par. It should allow us the import of SVGs as images but then offer the flexibility of being treated as 'shapes' within Storyline to allow tweaking or editing of strokes, fills, transparencies, etc. It kind of worked with the Powerpoint workaround but Articulate have broken that official 'hack'.
SVGs should replace any instance of a static GIF used in the past. Any logos that were transparent GIFs or PNGs probably should be upgraded to SVGs (unless it's a mad logo with rainbow gradients and drop shadows everywhere). That's the short answer, really.
Here's a link to a demo I mocked up attempting to show the difference in image quality of the various file formats. But for some reason, my Photoshop seems to be creating 300dpi images that look the exact same as 72dpi images and I don't know why.
https://360.articulate.com/review/content/7a1e3edc-580c-43ee-ab83-800ca1baaffd/review
You should be clearly able to see the relevant image degradation of the GIF format compared to the others and also how SVGs scale beautifully.