Working With Media

Managing Your Images

The images in your site reside in the images folder. To manage your images, open the Joomla Media Manager. This is located under the Content Drop Down Menu.


This will take you to the Media Manager Window.


Here you can create new folders, upload new images, or delete existing images.

To create a new image folder click on the field on the right directly under the folders window, type in the name of the folder (lower case and no spaces. You may use hyphens or underscores for separations names).

To upload a new image, click on the folder you want the image to reside in, click the browse button to look for the image in your computer, click upload. Now your image is ready to work with.


The JCE Editor Media

The JCE editor has it's own built in media manager. You can access it on the right side of the image manager window that pops up when you click on the media icon. Below is a close up of the window icons and what they do. Some recent clients also have an extra image manager icon with a star. This is a built-in image editor. I will be adding a page with instructions for this app soon.


To place an image in your article or custom html module:

1. Click on the page in the spot where you want the image to go to insert the cursor, click on the image editor button to open the editor popup window.

2. In the image editor window, navigate to the folder that contains your image. The user images are all in the media/sitegraphics folder.  If your site contains photo galleries, they are all inside their own folders inside the folders with the names of the galleries: ie: if your gallery is for a flowers gallery, the name of the gallery folder is most likely named flowers.

Once you have selected the image you want to insert, you can give it an attributes, such as: size, border, margins, and alignments. When you are done, click the Update button.

To resize the image, hold down shift and pull the bottom right corner of the image to the size you want. Or, you can select the image and click on the Image Editor Button once more to edit.


Image Editor Shortcuts

If you need to upload an image from within the image editor, choose the media folder that the image is going to reside in, click on it, then click on the image upload icon on the right side of the image window to upload. You can also create a new folder, delete an image, rename, copy, cut, view, or insert an image. It comes in very useful.


Drop files here window allows you to find an image in your computer and upload it to a folder in the images folder. 

1. Click on the browse button.
2. Find the image in your computer.
3. Then click upload.




About Web Images

DO NOT USE VERY LARGE IMAGES IN YOUR SITE!!! I can't stress this enough! This doesn't apply to the physical size 4x5", 6x8", etc. It applies to the file resolution. 

Images for use in the Web need to be formatted for Web. This means they have to have a 72dpi (dots per inch) or ppi (pixels per inch) resolution and should not be larger than 800 to 1000 pixels wide. You will need to have an image formatting software. Macs come equipped Preview and iPhoto which do a very good job. This will resize the photo to the physical size you want, crop it, or change the resolution (dpi). Preview is easier to use, unless you are already keeping and managing your files in iPhoto. There are many freeware available online for PCs.


Graphics and Photos need to be RGB not CMYK.

The color in your monitors, televisions, and Video uses RGB (Red, Green Blue). The photos from your mobile phone and digital cameras are RGB also.

Printing color is broken into 4 colors CMYK (Cyan, Magenta, Yellow, Black), CMYK will not work on the Web. Make sure that your files are RGB. If they were used for printing before, most likely, they are CMYK.

Files used for print usually have a resolution of 300 dpi and are huge. They are not for Web. They will take a long time to load and your clients won’t wait. Plus, it adds unnecessary bandwidth to your site. Your host provider allots you a certain amount of space and bandwidth. Bandwidth is the amount of data that is transferred from the server to your visitor's computer to display your site's content. The larger the images and videos, the more bandwidth. If you have a graphics intensive site, make sure your images are formatted correctly. It will really make a difference int he performance of your site and save you moniey on hosting fees.

Web Images

There are three types of images that are usually used on web pages: GIF, JPG, and PNG. There is an SVG format that has become somewhat popular because it is lines and not pixels so it can be enlarged and reduced in the pages without loosing much information. But, there are still browsers that don't support it.

GIF (Graphic Interchange Format) Images

Use GIF files for images that have a small, fixed number of colors. GIF files are always reduced to no more than 256 unique colors. The compression algorithm for GIF files is less complex than for JPG files, but when used on flat color images and text it produces very small file sizes. If you don't need all the colors because you have a very simple. two color graphic, you can use an adaptive palette. This will format the image into a very small gif.

The GIF format does not work well with photographic images or images with gradient colors. Because the GIF format has a limited number of colors, gradients and photographs will end up with banding and pixelation when saved as a GIF file.

GIFs can be saved as transparent files when you need to have an image floating in front of a background and don't want a background box around your image. Choose for the transparent color the same color that you are going to place the image in front of.

JPG (Joint Photographic Experts Group) Images

Use JPG images for photographs and other images that have millions of colors. It uses a complex compression algorithm that allows you to create smaller graphics by losing some of the quality of the image. This is called a "lossy" compression because some of the image information is lost when the image is compressed.

The JPG format is not suited to images with text, large blocks of solid color, and simple shapes with crisp edges, unless you format it in a high compression level. This is because when the image is compressed the text, color, or lines may blur resulting in an image that is not as sharp as it would be saved in another format.

PNG (Portable Network Graphics) Images

The PNG format was developed as a replacement for the GIF format when it appeared that GIF images would be subject to a royalty fee. PNG graphics have a better compression rate than GIF images which result in smaller images than the same file saved as a GIF. PNG files offer alpha transparency as well as animation.

PNG images, like GIFs, are not well suited to photographs. It is possible to get around the banding issue that affects photographs saved as GIF files using true colors, but this can result in very large images. PNG images are also not well supported on older cell phones and feature phones.