Digital images and web publishing - Cascading Style Sheets
←
→
Page content transcription
If your browser does not render page correctly, please read the page content below
ITIY3 Introduction to Web Publishing Digital images and web publishing Images play an important role in the storytelling of web pages. They may serve as the main story and provide support for text content, as illustrations and graphics for visualizing the mood of the story. Images are used as parts of the user interface, as animated content, video content, and so on. Other visual elements also contribute to this storytelling, e.g. typeface styles and the use of colors for texts, backgrounds, borders of various web page elements. In the web environment, in general, images are added either as external resources embedded with HTML elements, or by adding them as background images using CSS. For both cases bitmap images are used typically, but vector graphics are also getting more popular for logos, text based graphics, fonts, icons. Bitmaps or raster images are formed with pixels. Pixels are the smallest image elements defining a color to be displayed. Pixels form color squares aligned side by side and into rows in an image. The number of pixels in a row form the width of the image. The number of rows forms the height of the image. In general, the image pixels is an equivalent to the pixel units we use in CSS to define element dimensions. CSS pixel dimensions and screens were discussed in the previous exercise; e.g. how mobile devices show content (pixel ratio). As an alternative to bitmaps, vector graphics images may also be used. Vector graphics were once much used on sites with Adobe Flash embedded content. Drawing tools and animations were based on vector graphics in Flash, but the technology required an additional plug-in that user needed to install. Flash is now being phased out completely and therefore obsolete. Today, some vector graphics are included through “webfont” based solutions (font icons), but with an adequate browser support, vector graphics utilizing the XML-based SVG (Scalable Vector Graphics) markup language are also viable options. SVG defines the image content using element markup, styling instructions and vector coordinates. Typically, SVG is used for icons, logos, diagrams, line drawings, simple graphics. W3C SVG - http://www.w3.org/Graphics/SVG/ http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html http://caniuse.com/#cats=SVG http://openclipart.org/ http://thenounproject.com A fun little drawing tool for SVG: http://jxnblk.com/paths University of Tampere, COMS 1
ITIY3 Introduction to Web Publishing SVG can be embedded as other bitmap images (JPG,PNG,GIF): http://caniuse.com/#feat=svg-img You can also use SVG images as background images (with CSS). https://caniuse.com/#feat=svg-css https://raw.githubusercontent.com/Keyamoon/IcoMoon-Free/master/SVG/0170- fire.svg SVG-markup is like HTML-markup. It can be added to HTML 5 documents as markup as well. SVG markup can be edited and you can even control presentation with CSS-style rules. See at the bottom of the image here, fill and outline (stroke) are changed for the image. When resizing, the SVG image is always recalculated and image quality stays the same. See below a comparison to a bitmap image (PNG), scaling a bitmap reduces quality, as the pixels are just enlarged introducing blur. Basically, distributing the same amount of information to a larger area. University of Tampere, COMS 2
ITIY3 Introduction to Web Publishing Image size 64px x 64px SVG – 810b PNG – 1301b See the SVG examples linked on the course page. https://www.sis.uta.fi/~av44195/itiy3eng/w6/SVG/ HTML 5 also includes an element called canvas with which you can create a space for 2D dynamic drawings to appear on web pages. The main difference to SVG is that canvas content uses JavaScript commands to create and add images, animations, videos whereas SVG uses structural markup. SVG images can also be animated with JavaScript. University of Tampere, COMS 3
ITIY3 Introduction to Web Publishing
Digital images may be divided into two main categories:
1. Bitmap or Raster images
where images are formed with pixel based image data (picture elements)
storing color information – digitized images (digitized/ optically read images -
scanners, digital cameras) or program generated images.
2. Vector graphics are synthetic and programmed images that are based on
coordinates and ”mathematical” calculations. Images are built from tangent
points, lines, curves, simple geometrical objects, fills and strokes. In web
publishing vectors typically appear in e.g. SVG images, Adobe Flash
animations (may include bitmaps too). Often vector based images are
converted into bitmap graphics before publishing them as web content for
better compatibility with old web browsers. Many image editor applications
include vector tools to create content and to keep content editable, but may
not necessarily produce vector files.
https://developers.google.com/web/fundamentals/performance/optimizing-
content-efficiency/image-optimization#vector-vs-raster-images
Bitmap (top) and vector graphics – pixel structure vs. interconnected tangent points, lines,
and fills. Vector images are always recalculated when rendered and easy to manipulate
without degrading image quality. Tangent points are just relocated in the image. Editing a
bitmap always means that individual pixel color values are changed.
University of Tampere, COMS 4
ITIY3 Introduction to Web Publishing
Bitmaps or raster images – most frequent image type of the web
Image information is expressed with pixels = picture elements
Smallest image unit that contains color information
One color per pixel (more on colors later)
The image is formed by the horizontally and vertically aligned pixels
Image resolution, the amount of details in the image, is a measure of pixel count
within the image or within a length unit. The more pixels, the more information, and
therefore higher resolution the image has. Regardless of resolution, zooming into
bitmaps would eventually reveal the underlining pixel grid.
Resolution is often described with the gross pixel count in an image, see digital
image sensor resolution (digital cameras), e.g. 1600px X 1200px is ~2 megapixels
(MP), 6 MP – 3000px X 2000px, 12MP – 4000 X 3000, 24MP 6000 X 4000 and so on…
With more resolution, you can record finer details (in theory). Gross pixel count is
less useful in web publishing.
When you create images for web publishing, images sizes need to be proportionate
to display sizes and their resolution. This is a challenge as there are so many different
screen sizes and types used for displaying web content. We discussed earlier certain
starting points and looked at different breakpoints defined for various situations.
The most meaningful way to describe image resolution is to define it in pixels for the
University of Tampere, COMS 5
ITIY3 Introduction to Web Publishing width and the height of the image. The browser window size defines how much space is available to display the web page content. As the units in CSS, 1px can be generally considered the same 1px unit that an image pixel occupies. A banner image size in pixels 940px x 160px The same banner defines the width of the content of the page: Image resolution should be defined in relation to the use of the image. Displays resolve certain amount of information, that is measured in pixels per measure unit (pixel pitch) – ppi (pixels per inch). Desktop displays perform approximately at 72- 105ppi resolution (1px = 1/96in -> 96ppi), yielding a reasonably low resolution image. However, some displays perform better at approx. 200-400ppi, e.g. mobile device screens, 4K screens, where lower resolution images may not look very sharp. High density displays typically scale pixels beyond 1:1 pixel ratio - ratios of 1:1.5, 1:2, 1:3. (see typical screen sizes and pixel ratios at http://screensiz.es/) - 1:2 means 1 CSS pixel = 2 device pixels (screen pixel). There are various proposed and partially supported techniques to adopt web images to different screen sizes. Adaptation may occur providing alternate image versions using new HTML 5 elements and attributes and altering how images are displayed (cropping, alternating images) on a web page (CSS breakpoints). Some techniques use JavaScript for image adaptation. https://responsiveimages.org/ http://usecases.responsiveimages.org/ https://developers.google.com/web/fundamentals/performance/optimizing- content-efficiency/image-optimization#implications-of-high-resolution-screens Also, printing typically requires higher resolution images to produce high quality results with larger print sizes (printer resolution is typically 300 dpi (dots per inch) and higher). University of Tampere, COMS 6
ITIY3 Introduction to Web Publishing
Bitmap color resolution
Besides image dimensions and resolution, bitmaps are defined by the colors the
image contains. The color depth (or color resolution) of a bitmap image defines the
number of possible colors a pixel could display. In other words, color resolution is
determined by the amount of memory (number of bits or bit depth) that can be used
per pixel to store color information. A 1-bit image can only store 2 different color
options (21), 2-bit = 4 colors (22), 8-bit = 256 (28), 24-bit = 16,777,216 = ~16,7M (224)
Graphical image content (logos, simple objects, icons, charts) do not require much
color detail. Photographic images do, if you want to preserve as much image details
as possible.
Web images (and images typically created for screens) use the RGB color system. CSS
colors use the same idea. RGB defines colors based on the combination of three
color channels: red, green and blue channels. The range of values for the channels
define the color depth (color resolution) of the
image. E.g. in a 24-bit image, the values for each
channel vary from 0-255. That means 256 x 256
x 256 possible combinations equaling to 16,77
million of colors. An 8-bit image may only
contain 256 colors – where each channel is
defined by 8 values, 8 x 8 x 8 = 256.
24-bit RGB-color selection (Adobe Photoshop CS4)
University of Tampere, COMS 7
ITIY3 Introduction to Web Publishing
The color channel value of 0 means that the channel is closed, 255 means full open.
0, 0, 0 = black
255, 255, 255 = white
255, 0, 0 = red
0, 255, 0 = green
0, 0, 255 = blue ...
The same way as CSS color definitions work - RGB values - rgb(0,0,255) = blue… RGB
may be replaced with the HSL (or HSB) model (hue, saturation, lightness /
brightness) (NOT exactly the same as CSS3 HSL, but a similar concept). HSL is a more
natural model to use for choosing a particular color -> selecting a hue and choosing
saturation and brightness of the color. It is far less intuitive to use RGB for visual
selection, see screenshots below.
pixlr.com/editor – color selection tool HSL and RGB selection
Online tools for color selection besides Developer tool’s color picker:
http://www.colorpicker.com/
http://www.colourlovers.com/
https://color.adobe.com
Color resolution plays an important role when considering image details. Gradients,
color transitions spanning a range of hues require a great deal of colors. This is true
for black and white images too which lean on gradual shades of grays.
Photographs and other high detail images with fine gradient transitions are better
stored and edited in 24-bit colors. Images with less complex content, like graphics
with text and simple geometrical objects, flat color images (images with large areas
of single colors) need less color resolution and 8-bit or less may suffice to store
colors.
Color resolution also depends on the image file formats. Some formats support 24-
bit and more memory to store color information. Some formats restrict colors to a
much lower color resolution by their technical implementation. More on formats
later.
University of Tampere, COMS 8
ITIY3 Introduction to Web Publishing Image file size The amount of details (pixel resolution) and the bit depth of an image (color resolution) both affect the file size of an image file. The raw file size of an image can be calculated by the following: width in pixels x height (px) x bit depth giving you the file size in bits (or (w x h x bit depth) / 8 for size in Bytes). For example, a 200 times 200 pixel of an 8-bit image: 200 x 200 x 8 = 320000 bits = 40000 Bytes = ~40KB regardless of image content. The higher the resolution, the more pixels. The more possible colors per pixels, the more memory (bits) needed store the file. High resolution and high color images get quite big in file size. For web publishing, where all resources need to load over network connections, large file sizes are not very optimal. The larger the file, the more time it needs for loading regardless of the speed of connection. To make the file sizes smaller, especially for web publishing (or other purposes e.g. storage), the image data can be compressed. Compression means a reduction of file size via optimizing the file content and/or storing data in the file. Smaller file sizes mean faster load times. There are numerous file formats and compression schemes that may be used for images, but only a few of these are supported by web browsers. Compression is applied when the image data is saved and data is decompressed when the image is displayed e.g. by the browser. The browser software must support the file format and compression scheme to be able to display the image file. Some additional formats may be supported via additional plug-in applications. Image formats for the WEB There is a great variety of image formats today, but there are only a couple of formats supported widely by web browsers, therefore available for general web publishing. The web browser compatible formats are optimized by using image data compression to reduce file size with specific CODECs for coding and decoding information. Web browsers integrate these codecs for supported formats. This means, that no user interaction needed to show supported image files as page content in web browsers. Some codecs are lossless, rendering the image unchanged after decompression (e.g. GIF, PNG). Some use lossy compression, causing loss of image data in the compression process (JPEG). https://developers.google.com/web/fundamentals/performance/optimizing- content-efficiency/image-optimization#lossless-vs-lossy-image-compression University of Tampere, COMS 9
ITIY3 Introduction to Web Publishing
Currently supported web image formats:
GIF - Graphics Interchange Format (.gif)
http://en.wikipedia.org/wiki/Graphics_Interchange_Format
for graphics, logos, low-detail images, line drawings, flat colors, transparency,
lossless compression
JPEG - Joint Photographic Experts Group (.jpeg .jpg) -
http://en.wikipedia.org/wiki/JPEG
for photographs, lots of details, variable and lossy compression
PNG - Portable Network Graphics (.png) –
http://en.wikipedia.org/wiki/Portable_Network_Graphics ,
http://www.w3.org/Graphics/PNG/
PNG-8 as GIF, PNG-24 HQ images, advanced transparency, lossless compression
SVG files using XML-markup are well supported by modern browsers.
In addition, WebP – Google developed efficient format. WebP lacks wider browser
support (only Chrome, Opera, Android browser)
https://developers.google.com/speed/webp/?hl=fi
https://developers.google.com/speed/webp/gallery
Also there is an extended version of JPEG format - JPEG XR
https://en.wikipedia.org/wiki/JPEG_XR only support in newer IE and EDGE
browsers!
University of Tampere, COMS 10ITIY3 Introduction to Web Publishing
GIF - Graphics Interchange Format (.gif)
First graphical web browser support (also a quite old format)
colors restricted (and reduced) to 2 - 256 colors (color table, indexed colors)
8-bit format (24-bit color set to choose colors from for the color table, see
below)
Greyscale or color images
Lossless compression = retains all image information regardless of smaller
than original file sizes after compression
GIF format supports transparency for one single color (see below)
Animated GIF images – multiple integrated images within a single file that
are played back in a sequence
http://www.learningwebdesign.com/pdf/lwd2_animated_gifs.pdf
examples of GIF animation http://www.gifanimations.com/animation/Index
Wide software support and web browser compatibility
Less modern solution, less efficient compression, limited color resolution
GIF images are best used for flat colored images, due to relatively low color
resolution, with less need for fine detail reproduction e.g. user interface graphics,
icons, button graphics, presentation graphics, diagrams, simple geometrical objects,
line drawings, texts and logos, cartoon drawings…
GIF images are not well suited for storing high detail images like real-life
photographs or other high color detailed image content (gradients) due to their
limited color depth. The inefficiency of lossless compression is also a limiting factor;
high detailed images tend to remain large in file size.
8-bit (or lower) images typically store color information in a color table, also called
palette. Each pixel in the image stores a reference to a color in the palette (indexed
image). The color table can contain up to 256 colors, any of the available 16,7 million
of colors. 256 colors (8-bit) maximum and a minimum 2 colors (1-bit). The table can
contain any colors depending on the image content and it is not locked to a
particular set of colors.
8-bit image and its 256-color palette (Adobe Photoshop)
University of Tampere, COMS 11ITIY3 Introduction to Web Publishing Color resolution always plays an important role when considering image details. Color transitions spanning a range of hues require a great deal of colors. Photographs and other high detail images, like the gradient transitions, are generally stored in 24-bit color images. Images with less complex content, like graphics with text and simple geometrical objects, flat color images need less color resolution. When an image lacks color resolution, a ”banding” phenomenon may occur. Difference between 24-bit and 8-bit images, ”banding” effect Reducing color information also reduces file size, as it reduces bit depth, a good strategy for low-detail flat color indexed color images (e.g. logos). Software solutions may enable designers to control the reduction process (as above, Photoshop). University of Tampere, COMS 12
ITIY3 Introduction to Web Publishing As an option, GIF image format allows a single color to be completely transparent. The pixels of that a chosen color are not filled with a color. This does limit the usefulness of the effect and careful consideration should be taken in planning. When creating the image, the transparent color and the background of the page (color or background image) which will contain the image, should be matched to avoid unwanted artifacts. Example of two versions of an 8-bit GIF image embedded to a web page. The images are displayed against the page’s background image (see screenshot from the browser above). In the second image, pure white is defined as transparent. GIF supports only a single transparent color hence the halo artifacts at the transparency edges (anti- aliasing artifacts remnants of intermediate colors to create smoother lines). Choosing a compatible background color in your transparent image will reduce anti-aliasing artifacts University of Tampere, COMS 13
ITIY3 Introduction to Web Publishing
Joint Photographic Experts Group (.jpeg .jpg)
The most used web image format – JPEG is an image data compression
scheme designed for saving photographic images
24-bit color depth - 16,77 million of possible colors
Only 256 color greyscale images though
Lossy compression = compression results in data loss. Some image data is
omitted to reduce and optimize file size.
Cumulative image degradation (due to lossy compression) on recompression.
Resaving JPEG files with JPEG compression cause further data reduction, with
repetition, image quality decreases increasingly.
Variable compression ratio = when saving the image with JPEG, the level of
compression can be adjusted. Tools usually offer quality settings to define
how much detail to retain, how much compression is applied. The aim is to
find a balance between image quality and the final file size. Higher quality
means less compression but comparably bigger file sizes. More compression
yields poorer quality images but smaller file sizes.
With high compression, artifacts may appear in the image as results of data
loss and optimization. Artifacts appear as detail loss, false color, blocky
appearance, reducing edge details with halos, blotchy flat color content. This
is a result of sacrificing color detail to maintain consistent lightness of image
areas. With optimal compression levels, the artifacts may not be noticeable
or relevant and still enable the reduction of file size. The lossy nature of
compression means that lost details are lost forever.
JPEG compressed images with increasing compression produce increasingly smaller files, but
with more obvious artefacts. Variable JPEG compression – quality 100% vs. 0% (300% view) –
the second image shows the compression artifacts of 8x8 pixel areas.
University of Tampere, COMS 14ITIY3 Introduction to Web Publishing
– JPEG is best applied for photographs, e.g. currently all digital cameras
support this format. Wide software compatibility.
– JPEG image file size and image quality varies with image content and with the
applied compression settings. There may be also software differences that
may produce detectable differences. JPEG compressor software solutions are
not equal. Some operations may not require recompression of image data.
– There is not one single rule to obtain generic results for different images.
Compression settings should be defined in regard of image contents and end-
user needs. In general, the basic goal is to find balance between file size and
quality – in web publishing the bias is towards smaller file sizes. Often images
with smaller dimension can be compressed a bit more as compression
artifacts may not be obvious if the image details are smaller.
– There is always quality loss with JPEG image compression! However, the loss
may not be very apparent. Resaving a JPEG file, e.g. after editing, multiple
times, will result in cumulative quality loss. Edit a copy of your image instead
of the original.
– JPEG format does not support color transparency or animation at all!
JPEG with 24-bit color compared to an 8-bit version – note the color blotches caused by reduced
color information in the GIF version.
- JPEG compression is not optimal for images with less color and lower details,
e.g. containing large flat color areas, text, graphics. JPEG may even give
poorer results and larger file sizes than the less effective (in terms of
compression) GIF or PNG formats. See image below.
University of Tampere, COMS 15ITIY3 Introduction to Web Publishing JPEG compressed example with increasing compression producing increasingly smaller files, but with more obvious artefacts. Lower compression settings would produce better results, though image content here is more suitable for GIF or PNG formats. A well optimized GIF version of the same image is 1.3KB with higher image quality compared to the lowest quality JPEG which is spoiled by artefacts and yet larger at 1,444KB. University of Tampere, COMS 16
ITIY3 Introduction to Web Publishing
Portable Network Graphics (.png)
Originally designed to replace GIF images in web publishing
(W3C, open-source)
Utilizes lossless and more efficient compression than GIF images
PNG-24 - 24-bit color with advanced transparency options
16-bit grayscale images (better then JPEG)
PNG-8 - 8-bit color table with 1 transparent color, like GIF but with a bit
more efficient compression for larger low color images (GIF is more
effective for small images like icons, smaller logos)
Lossless compression is applied in all conditions, resulting in excellent
image quality. 24-bit mode provides lossless images with full color
resolution giving an image quality better than JPEG files. The quality
difference is most visible for graphical content, gradients, and images
with text content. Meanwhile the 8-bit PNG versions are limited to the
lower color resolution.
However, lossless compression is less efficient to reduce file size than the
optimized and adjustable lossy JPEG compression. For complex
photographic images, JPEG gives you considerably lower file sizes. PNG
24-bit files are much bigger for complex content compared to JPEG,
image below, 144KB vs. 969KB)
PNG-24 is a better choice than GIF or PNG-8 images, if color resolution is important.
Though, 8-bit images can be optimized by reducing unnecessary colors and probably
in most cases yield smaller file sizes than 24-bit versions. Again it all depends on
image content. In some cases color reduction may not be possible. For larger and
more complex 8-bit images, PNG-8 provides a tad more efficient compression,
mostly resulting in smaller file sizes.
University of Tampere, COMS 17ITIY3 Introduction to Web Publishing Only a slight difference in file size and no quality difference between 24-bit and 8-bit (256 colors) versions (top). Reducing colors to 32 (left), and to 4 with applied dithering (dot pattern, right) render an obviously lower quality image but halves the file size (bottom). File size difference between 8-bit PNG-8 and 8-bit GIF (both 256 colors) - 5KB < 8.5KB University of Tampere, COMS 18
ITIY3 Introduction to Web Publishing PNG-24 version also offers more complex transparency options. 8-bit images have only one color transparency, which is always full transparent. 24-bit PNG allows partial and gradual changes in transparency in colors. The top row shows image content where the text is full transparent and part of the gradient is partially transparent. The checkboard background shows, which parts of the image are not opaque. PNG-24 can reproduce the more complex effect. GIF and PNG-8 cannot, here the white pixels of the text are only transparent. Of course this is still better than no transparency e.g. with JPEG. The screenshot below demonstrates the difference between the PNG-24 version and JPEG version of the same image in relations of file size and transparent pixels. JPEG compression was set to 50% for reasonable image quality. The content of this image does not compress well with JPEG, at 50% quality the image file is almost double the size of the PNG-24 image. Also some compression artifacts appear already. University of Tampere, COMS 19
ITIY3 Introduction to Web Publishing More JPEG compression makes file sizes smaller but the image quality deteriorates quickly and still yields larger files than the PNG-24 file. PNG applies lossless compression which retains all image data therefore it can be also used for archiving image data or for later editing - PNG-24. https://developers.google.com/web/fundamentals/performance/optimizing- content-efficiency/image-optimization#selecting-the-right-image-format Transparent image content (original, top left) and JPEG (top right), GIF, PNG formats (bottom) University of Tampere, COMS 20
You can also read
