Using Images and Graphics on Websites
There are currently only two types of image formats that you can use on the web: GIFs and JPGs. Generally GIFS are better for graphics, such as logos, menu bars, and buttons, and JPGs are better for photos. This has to do with the way they are compressed. Additionally, GIFs have the capability to have parts of them be transparent, which is very useful when creating logos. GIFs can be used for photos if you want to cut out the image and need transparency, but this takes a lot of skill and high-end software to do well.
Optimizing graphics means reducing the physical size of the image by compressing it. There are always trade-offs in terms of quality, but often images can be compressed quite a bit before it becomes noticeable. Good graphic programs will let you compare different qualities of compression and let you choose which one you want before you save it. There are also programs and websites that are devoted simply to optimizing existing graphics.
High-end graphics programs like Adobe Photoshop and Illustrator are very complicated and very expensive. They can take years to master. They are the very best and are industry standards—but if all you need is a way to resize images and optimize graphics, they are probably unnecessary. There are some free image and graphic manipulation programs out there, some of which are very good. See webtools for some suggestions.
When displaying your images in your webpage, it is important to specify the width and height:
By specifying these, the browser knows how much space to leave for the picture and can display the rest of the page and then fill in the picture, which makes the whole thing look like it's loading faster.
If you change the width and height tags to be smaller or bigger, it will only change the size the image is displayed in the browser, not the size of the image itself. This is true in WYSIWYG editors as well: if you resize the picture in these programs, it will appear smaller, but the program is just adjusting the width and height tags and displaying it smaller. Therefore, if it was a huge file to begin with, your viewer will still have to wait for the whole file to download, even though it now looks small. It will also probably look funny, because browsers aren't very good at this squishing. So if you want your pictures to appear smaller, you are going to have to resize them in a graphics program.