Multimedia cho Joomla part 8 ppsx

The following formats are members of both the lossy and lossless data compression formats: Graphic Interchange Format GIF pronounced "giff ".. However, the JPEG format belongs to the los

Lossy and lossless data compression

Data compression is an important part of our digital world File compression is

useful because it helps in reducing the consumption of expensive resources such

as transmission bandwidth and computer hard disk space

Almost all digital images that we use on the web have been resized or compressed

to some degree When editing or saving files in popular software editing programs,

many options are provided to help optimize digital images

[ 78 ]

Lossy and lossless compression are two terms that describe the compression type of

a file, and whether or not the file retains all of the original data once compression and

then decompression of that file has taken place The preferred formats for digital web

images (such as JPEG and GIF) all fall into one of the following compression types:

1 Lossy

A lossy data compression is one where the compression attempts to eliminate

redundant or unnecessary file information Generally, once a file has been

compressed, the information that was lost during compression cannot be

recovered again Hence, it is a degradable compression type, and as the file

is compressed and decompressed each time, the quality of the file will suffer

from generation loss

JPEG and MP3 files are good examples of formats that use lossy compression

2 Lossless

Lossless file compression makes use of data compression that retains every

single bit of data that was in the original file before compression

Lossless compression is often used when an identical representation of the

original data is required once a file has been compressed and then

decom-pressed again As an example, it is used for the popular ZIP file format

Image formats such as PNG and GIF fall into the lossless compression type

For now, it is not so important to go into any more detail on these compression

types, but the following image formats fall into both of these compression categories

It is possible to optimize your website images by choosing the correct format to save

and present them to your site users

Image formats

With hundreds of graphical image formats now available, it is understandable that

there are some bizarre image formats being dished up on websites, mostly from

inexperienced site designers who just happen to upload whatever they have been

sent in an e-mail

Having just mentioned the "hundreds" word, to help calm the nerves there are only

four main formats that are commonly used and recognized as web suitable These

have been deemed suitable due to their format and compression properties (making

the final file size and view quality suitable) Another important reason why these

formats have become the standard is the accessibility of being able to open or view

these file types on most computer systems With the Internet bringing together

millions of users across the globe, common formats that are easily viewed or saved

had to evolve

This material is copyright and is licensed for the sole use by jackie tracey on 23rd February 2010

953 Quincy Drive, , Brick, , 08724

The following formats are members of both the lossy and lossless data

compression formats:

Graphic Interchange Format (GIF) pronounced "giff ".

Joint Photographic Experts Group (JPEG) pronounced "jay-peg"

Portable Networks Graphic (PNG) pronounced "ping"

Scalable Vector Graphics (SVG)

Converting a digital image from one format to another is usually a "Save As" in a

common graphical editor package During this saving or exporting process, you

will usually have options to choose the quality, file size, and pixel resolutions

GIF

The GIF image format belongs to a family called "index-color" formats This means

they use a fixed number of colors to make up the image The file size is usually

related to the bit-depth or number of colors used These are usually a small number

such as 256 or "8 bit" color, and often contain as little as two colors For optimum file

size, you usually want to choose as lower bit-depth as possible while still retaining

an acceptable image

Due to its limited color properties, GIF images are usually perfect for a low

number of solid flat colors and are often the format of choice for logos, buttons,

and graphical text:

GIF images are an in-efficient format for images such as photographs, which contain

lots of colors Photographs that are converted to a GIF format will usually be of poor

quality, look blotchy, or show jiggered edges due to the limited color range:

•

•

•

•

[ 80 ]

JPEG

The JPEG file format was designed to efficiently compress realistic true color or

grayscale images such as photographs This compression type was designed and is

the perfect option to save and compress your photographic images

The JPEG format works its magic by approximating blocks of pixels and during

compression preserving the key details that are most apparent to the human eye

JPEG images can be highly compressed allowing you to save a good quality picture

with a small file size However, the JPEG format belongs to the lossy compression

type which means every time you read, modify, and save your JPEG image, you

lose some information This derogation is very noticeable when you have text within

an image, such as logos This loss of data will still occur even if you set the quality

slider to "100" when saving a JPEG image; hence it's an excellent example of lossy

file compression

JPEG is an excellent image format for multiple colors or toned images for your

website, but it is not a good format to save your images in if you wish to edit or

change them frequently:

PNG

PNG is a relatively newer file format that was created as the open source successor

to the GIF format Being a member of the lossless compression type, PNG images

are best suited to images, which may require editing and saving again Like the GIF

format, the PNG file format excels when the image contains large uniformly colored

areas The PNG format also lends itself well to the use of transparency, which can be

important for logos that may be laid on top of background colors, or graphics:

This material is copyright and is licensed for the sole use by jackie tracey on 23rd February 2010

953 Quincy Drive, , Brick, , 08724

Mozilla Firefox, Internet Explorer 7, and most of the major browsers now offer PNG

support Many purchased Joomla! Templates will contain PNG images for logos,

rounded module headings, and buttons / icons

SVG

SVG is a new vector file format created by the World Wide Web Consortium (W3C)

It was developed to create a standard format for displaying vector graphics on

the web

SVG is a text based graphics format with the images and their behaviors defined in an

XML file format, which means they can be easily searched, scripted, and compressed:

SVG images can interact with users in many ways due to their textural file format,

and images can be used with scripting in order to trigger events in web pages and

on mobile devices

All major browsers except Internet Explorer offer SVG file support However, a

browser plugin for Internet Explorer is available At this stage there are not many

extensions around the subject of SVG, but there is a useful Joomla! Plugin called

XHTML Headers This plugin helps to see if the browser supports XHTML based

technologies For more information, visit http://extensions.joomla.org and

search for XHTML Headers

[ 82 ]

Including images in your content articles

and modules

In the following section, we will cover inserting images into our Joomla! content

articles and modules This section assumes that you have a basic understanding

of how Joomla! content articles function

Adding an image using the Joomla! Article

Image button

Images can be easily added to new and existing Joomla! Articles (and Modules) by

using the Image button, which is an extended editor plugin that is configured to

be turned on with new Joomla! installations The Editor button loads in below the

Content Editor window when you are in the Edit Article screen:

It is important to note that this is a different method of inserting an

image than that when using the Insert Image button on the WYSIWYG

editor toolbar

This material is copyright and is licensed for the sole use by jackie tracey on 23rd February 2010

953 Quincy Drive, , Brick, , 08724

To insert an image into your Joomla! Articles, you will need to be in Article Edit

Mode Open your article for editing either by:

1 Clicking on the "Add New" Article icon when viewing the Control Panel

2 Clicking on the Article option in the menu at the top, and then clicking on the

"Article Manager" menu option Select the article you wish to edit and click

on the "Edit" icon in the top-right toolbar

3 If logged into the frontend of your Joomla! website with the appropriate edit

permissions, select the article you wish to edit and then click on the "Edit"

toolbar icon

Next, we need to choose where we would like our image to be placed This is

performed by inserting the image code in relation to the text that might be in your

article By clicking within the text content in the editor, you will be able to position

your mouse cursor where you want your image to load:

An Insert image screen will load on top of your Edit Article screen, which is the

Joomla! Media Manager:

[ 84 ]

The Insert image screen will show all of the media in your Joomla! Media Manager

It contains the following features:

1 Folder navigation

This is performed by using the Directory drop-down menu located at the

top-left of the screen You can drill down to subdirectories by using this or

simply clicking on the folders that are available in the main Insert image

window The up button will quickly take you back up one directory:

You cannot move higher than your main "Media Directory" location, which is defined in the Global Configuration settings

2 Selecting an image

Simply click on the image you wish to use, and the Image URL location will

be automatically populated with that image's location on your server:

If you wish to use an image from another web server or site, enter the full

URL to the location of that image into the Image URL field:

This material is copyright and is licensed for the sole use by jackie tracey on 23rd February 2010

953 Quincy Drive, , Brick, , 08724

3 Setting the image properties

We have three important fields (plus the Align and Caption boxes) to

consider when inserting an image via the "Insert image" window:

The "Insert image" window has the following fields:

The Image URL field holds the location to your image This can be a relative

URL to your website domain (for example, /images/image.jpg), or the

absolute URL path to your image (for example, http://www.mydomain.com/

images/test.jpg)

The image Align drop-down option allows you to align the image in relation

to the text that the image surrounds If the align is set to the left, the image

will float to the left of the block of text, if aligned to the right, the image will

float to the right of the text If this option is left blank, there will be no image

alignment set

The image Description field is a Joomla! description which is the equivalent

to an alt tag when using HTML The Alt description is used to describe an

"alternate-text" for an image The alt attribute tells the viewer what they are

missing on the page if the image is not loaded in They are especially useful

for people with screen readers, or those who choose to view the web with

images turned off in their web browsers

The image Title field specifies additional information about the image

This information is shown as a tooltip text to the user when their mouse

is hovered over the image

The image Caption checkbox will use the image title, and output this

description as an image caption This usually shows under your image,

and CSS can be used to manipulate the look and positioning of this

The Insert image screen also has a useful file upload tool built into it Hence, if your

images have not already been uploaded by FTP or the Joomla! Media Manager, then

you have the option to upload when editing your content articles

•

•

•

•

•

[ 86 ]

Before uploading, make sure you have selected the directory in which you wish to

upload a new image to To upload, click on the Choose File upload button located

at the bottom of the Insert image screen:

A screen will appear in which you should navigate to the file that requires

uploading Once you have selected your file, click on the Start Upload button

to start the upload process

A message at the top of the Insert image window will appear to tell you if your

upload has been successful If you have issues with uploading, check that your

media directories and subdirectories have "read and write" permissions set on

them to allow the upload

Once your file has been uploaded, you can click on it to select that file, populate the

image properties fields, and then click on the Insert button at the top-right of the

Insert image window

Adding an image using the Editor Image

button

Your Joomla! install has one or two WYSIWYG (What You See Is What You Get)

editors available It is possible to change the editor type on a user basis within

the User Manager It is also possible to make a site-wide setting within the

Global Administration:

A suggestion would be to download these and see which one (if any) makes your

editing environment more suitable Almost all of these editors offer the ability to

insert images into your content articles, usually via an icon on the editor toolbar

This material is copyright and is licensed for the sole use by jackie tracey on 23rd February 2010

953 Quincy Drive, , Brick, , 08724