Sunday, 11 December 2011

How to embed high resolution images into HTML

Have you ever wanted to insert a high resolution image into your web page - and make it so it's easy to zoom in so that people can see the details?

The answer is to use JavaScript or AJAX to progressively hand out the correct sized image - rather than loading the full sized (large file) at the start.  This can be a bit tricky - so here's a great free service that does it for you.
Zoom.it allows you to embed a large image (must be already hosted on your website) and adds the necessary controls to let your viewers zoom in and out.
Check it out at http://zoom.it all you need is the URL of your large image, and to add the HTML code that zoom.it supplies into your web page at the appropriate place.
Have a play with the example below...


Share/Bookmark

7 comments:

  1. Your post was interesting and awesome as well.Big thanks for sharing. I appreciated and like it. Keep sharing.


    web design manila

    ReplyDelete
  2. Thanks for sharing this post. This post is so very informative. I learned important things on it.

    web development philippines

    ReplyDelete
  3. Thanks on your marvelous posting! I actually enjoyed reading it; you might be a great author. I will make certain to bookmark your blog and may come back very soon. I want to encourage you to continue your great work, have a nice weekend!


    trash cans outdoor

    ReplyDelete
  4. I really found the post very informative. I would like to implement this in my sites as well. Thank you for sharing it.

    http://curiouswebservices.com.au | web designer

    ReplyDelete
  5. just linked this article on my facebook account. it’s a very interesting article for all...



    Web Designing

    ReplyDelete
    Replies
    1. I was able to find the details that I was searching for. I must thank you for the initiatives you have made in writing this article. I am expecting the similar best efforts from you in the future as we
      Web developer

      Delete