|
Optimize Images for Web Development
Creating graphics and posting images for your site is one fun thing
to do in web development. Nothing makes your site stand out better
than some great images.
Graphics and images can be used for entertainment, professionalism
or a visual queue. A graphic designed properly can change your
visitor's outlook and/or decision for your site. It is important to
you have images ready and optimized for your website.
Optimize Your Images
One thing to remember when creating graphics and images for your
site is to optimize. What do you mean by optimization?
Optimization is a way to compress data to make your file size
smaller. One way optimization works is that it will read through all
the color of the image and use other color combinations to make
similar colors. This will then discard some colors that will not be
needed for the particular image. But there is a downside with
optimization. You will lose quality in your graphic and/or images.
Quality vs. Size
When optimizing your images watch the quality compared to size. You
want the smallest size possible for your site, making your site load
faster. This will make it easier for your visitors and search engine
bots.
If you image or graphic becomes too distorted, raise your file size.
You don't want a pixelated image on your site. You want your images
to look good and professional. You just need to find a balance
between having a clean professional picture and having a decent
small file size.
Image Optimization Tools
Adobe Photoshop has put this into consideration in some of their new
application versions. You can now do a File > Save for the Web
Options and Adobe Photoshop has a pre-built optimizing process that
is very good. You can choose what file type to save in and how much
to compression and optimization. Adobe Photoshop is an expensive
commercial program, another option is using Dynamic Drive's Image
Optimization.
Types of Image Files
Last thing to touch on is JPEG, GIF and PNG. There are so many file
types, but these are highly recommended for web development.
JPEG
JPEG is a compressed file that has very good quality standards.
Because of its compression, colors and data are squeezed out of it
to create smaller file sizes. This can cause some blur with images
with sharp edges, which is great for photos. If you look at a photo
there are no straight lines or edges. Everything is blended
together, which why JPEG is great for photos. You can get great
optimization out of a JPEG file.
GIF
GIF is used more for vector based graphics. A vector based graphic
is when a graphic is made of lines and shapes. Vector graphic have
sharp corners, edges or text. When dealing with graphics like
described, it is better to use a GIF rather than a JPEG. A JPEG
could case distortion on your sharp lines. GIF can also be use for
animation. Frame by frame animation saved as a .gif will animate on
your page. Transparency is another feature that GIF can support. You
can save your images with a transparent background.
PNG
PNG is one of the newest web graphic technologies. PNG is great for
quality and file size. You have the best of both worlds in a PNG.
PNG can also support transparent backgrounds. The only downside to a
PNG file is that some old web browsers don't support PNG. This
problem is becoming less and less a concern. But keep that in mind.
Quickest Time for Web
Optimizing images and graphics is almost a must in web development.
Having big file sizes could cause some of your visitors to leave
your site. If your site is too slow to load, you need to optimize
immediately. Rumor is that you have 3 seconds to pull a surfer in.
If you site doesn't load in that amount of time, then you might lose
them. Time your page in your browser and see how long it takes. If
you are under a couple of seconds, you're doing a great job. |
|
|
