Chapter 4 [ 77 ] 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 les in popular software editing programs, many options are provided to help optimize digital images. This material is copyright and is licensed for the sole use by jackie tracey on 23rd February 2010 953 Quincy Drive, , Brick, , 08724 Adding and Managing Image Content [ 78 ] Lossy and lossless compression are two terms that describe the compression type of a le, and whether or not the le retains all of the original data once compression and then decompression of that le 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 le information. Generally, once a le has been compressed, the information that was lost during compression cannot be recovered again. Hence, it is a degradable compression type, and as the le is compressed and decompressed each time, the quality of the le will suffer from generation loss. JPEG and MP3 les are good examples of formats that use lossy compression. 2. Lossless Lossless le compression makes use of data compression that retains every single bit of data that was in the original le before compression. Lossless compression is often used when an identical representation of the original data is required once a le has been compressed and then decom- pressed again. As an example, it is used for the popular ZIP le 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 nal le 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 le 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 Chapter 4 [ 79 ] 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, le size, and pixel resolutions. GIF The GIF image format belongs to a family called "index-color" formats. This means they use a xed number of colors to make up the image. The le 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 le 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 at colors and are often the format of choice for logos, buttons, and graphical text: GIF images are an in-efcient 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: • • • • This material is copyright and is licensed for the sole use by jackie tracey on 23rd February 2010 953 Quincy Drive, , Brick, , 08724 Adding and Managing Image Content [ 80 ] JPEG The JPEG le format was designed to efciently 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 le 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 le 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 le 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 le 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 Chapter 4 [ 81 ] 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 le 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 dened in an XML le format, which means they can be easily searched, scripted, and compressed: SVG images can interact with users in many ways due to their textural le 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 le 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. This material is copyright and is licensed for the sole use by jackie tracey on 23rd February 2010 953 Quincy Drive, , Brick, , 08724 Adding and Managing Image Content [ 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 congured 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 Chapter 4 [ 83 ] 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: This material is copyright and is licensed for the sole use by jackie tracey on 23rd February 2010 953 Quincy Drive, , Brick, , 08724 Adding and Managing Image Content [ 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 dened in the Global Conguration 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 eld: This material is copyright and is licensed for the sole use by jackie tracey on 23rd February 2010 953 Quincy Drive, , Brick, , 08724 Chapter 4 [ 85 ] 3. Setting the image properties We have three important elds (plus the Align and Caption boxes) to consider when inserting an image via the "Insert image" window: The "Insert image" window has the following elds: The Image URL eld 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 oat to the left of the block of text, if aligned to the right, the image will oat to the right of the text. If this option is left blank, there will be no image alignment set. The image Description eld 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 eld species 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 le 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. • • • • • This material is copyright and is licensed for the sole use by jackie tracey on 23rd February 2010 953 Quincy Drive, , Brick, , 08724 Adding and Managing Image Content [ 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 le that requires uploading. Once you have selected your le, 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 le has been uploaded, you can click on it to select that le, populate the image properties elds, 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 . 2010 953 Quincy Drive, , Brick, , 087 24 Chapter 4 [ 81 ] Mozilla Firefox, Internet Explorer 7, and most of the major browsers now offer PNG support. Many purchased Joomla! Templates will contain. , Brick, , 087 24 Adding and Managing Image Content [ 82 ] Including images in your content articles and modules In the following section, we will cover inserting images into our Joomla! content. 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)