There are some things to note when you want to embed really large images or screenshots in a webpage.

First, most of the blog templates are of small width (say 600px) so the image with a long width and height won’t fit in your blog post or template. If your image is of high resolution (say 2500 X 1000 px) you have to either resize it or use the width and height tags to fit the image in your blog post.

Another problem with large images is their huge file size, embedding a lot of images with high file size can cause in slow loading of the blog post. It’s thus recommended to slice the image to multiple parts and load them separately in such a way that the parts when combine, appears to be a single image.

In most of the occasions, resizing the image to a lower dimension results in the loss of quality. Using the <img> HTML tag and defining a width or height again makes the image small and you can hardly read any text in the image.

For example: Here is a full sized version of an Infographic which does not fits properly in this blog’s template (939 X1166). I resized the same image and embedded it as below:

The problem : Image was resized but the text is unreadable, which defeats the whole purpose of the Infographic.

Update: If you don’t want to download any software, use Zoom.it to convert high resolution images to low resolution and embed the flash in your website.

How to Embed Large Images and Screenshots in Your Blog Post

Enter Zoomify Express, it’s a free software for Windows which lets you slice an image into multiple smaller portions. Then the application creates a flash SWF of the image which can be embedded in a blog post or in your website’s template. Following are the steps to get started:

1. Extract the Zoomify package somewhere in your computer, since the application is portable you can also use it from a removable drive.

2. Run Zoomify Converter.exe and open the image you want to convert. Zoomify will create a folder with the same name of your image, as shown below:

3. The software will slice the image to multiple smaller chunks, which will be saved in the folder created. (see example)

4. Open the “TemplateWebpage.htm” file in any HTML editor and replace the word “ZoomifyImageExample” to the name of your Zoomify Image folder.

4. Now upload your image folder, the edited TemplateWebPage.htm file, and the ZoomifyViewer.swf file to a directory on your Web server. That’s it, the large image can be viewed by anyone now. See example

The best part about using this application is that your site visitors can zoom in different portions of the image, just like Google Maps or Google Earth. This is very useful when you have an image or infographic of very high resolution and you don’t want to compromise on the quality.

To embed the large image in a blog post, simply use an <iframe> tag and call the HTML page containing the flash of image. Use this code:

It’s advised that you do not add the HTML of the Flash directly in your blog post, because WordPress handles flash very badly.

Here is an example of the same image embedded in this blog post, you can browse the image the same way you browse through on Google Maps or Google Earth.

Following is a screencast describing the entire procedure:

More tips:
1. Tools to Batch resize images
2. Choosing the correct image format