How To Prepare Image Files For The Web

Every web admin must be able to prepare the images for the web, upload them to the server and include them on the website. In this article we will discuss the most common questions and mistakes that we need to draw attention to.

Cropping And Resizing

Before uploading to the server we must crop our images (cut out unnecessary bits) and resize them to make sure the files are not too big because too large files will make our web page load slow and there's no need to leave oversized images on the site when they're scaled down anyway.

The most popular image editor is Adobe Photoshop which has "Save for web" feature but there are free programs that are perfect to prepare images for the web.

Paint.Net – free image and photo editing software for PCs that features a simple user interface with support for layers, unlimited undo, special effects, and a wide variety of tools. An active and growing community provides help, tutorials, and plugins on the forum.

IrfanView – one of the most popular image viewers which has basic image editing features, like resizing, cropping, color adjusting. This is recommended for quick image editing.

Image File Formats

The three most used file formats on the web: jpg, gif and png. We compared them below.

JPG / JPEG
The most common image format to display photo-like images. It supports a wide color range but it doesn't support transparency. JPEG uses lossy compression to be very much smaller in the file but images can become pixelated after too many saves. Fortunately image editors allow us to adjust the quality of the saved image in a window where we can set the desired quality and file size.

GIF
This file format was developed before JPG and it allows us to create animated cyclical images. GIF is a bitmap image format which uses lossless LZW compression, and it can have a palette of only 256 colors but it allows a separate palette of up to 256 colors for each frame of the animated GIF. This format is recommended for simpler images with solid areas of color, such as graphics or logos.

PNG
PNG-8 does not support transparency, but PNG-24 and PNG-32 do allow different levels of transparency (alpha channel), not like GIFs where the pixels are either transparent or opaque. This can be seen on the shadow of the image on the right. PNG was created as an improved, non-patented replacement for GIF, and is the most used lossless image format on the Internet. It doesn't allow animations but it's the best solution when we want to display a crispy, transparent image with many colors.

Add images to the page

Use the img tag to add an image to the document or use the toolbar of the HTML Editor. Optionally you can set a width, and height preserving the aspect ratio of the picture. Never forget the required alt tag attribute which tell search engines what is the file about and this text shows up in the web browser when the page can't be loaded. Optional style attributes can be added, but it's recommended to use classes instead. 

<img class="imageright" style="float: right; margin: 0 0 5px 20px; max-width: 100%;" src="https://htmlg.com/images/demo-image.jpg" alt="Dover Castle" width="114" height="115" />