• Skip to main content
  • Skip to primary sidebar
  • Skip to secondary sidebar
  • Skip to footer

Computer Notes

Library
    • Computer Fundamental
    • Computer Memory
    • DBMS Tutorial
    • Operating System
    • Computer Networking
    • C Programming
    • C++ Programming
    • Java Programming
    • C# Programming
    • SQL Tutorial
    • Management Tutorial
    • Computer Graphics
    • Compiler Design
    • Style Sheet
    • JavaScript Tutorial
    • Html Tutorial
    • Wordpress Tutorial
    • Python Tutorial
    • PHP Tutorial
    • JSP Tutorial
    • AngularJS Tutorial
    • Data Structures
    • E Commerce Tutorial
    • Visual Basic
    • Structs2 Tutorial
    • Digital Electronics
    • Internet Terms
    • Servlet Tutorial
    • Software Engineering
    • Interviews Questions
    • Basic Terms
    • Troubleshooting
Menu

Header Right

Home » Html » Tutorial » Html Thumbnails
Next →
← Prev

Html Thumbnails

By Dinesh Thakur

Including larger images in web pages increases the loading time. You can resize your images by using the height and width attributes but still the full size image is downloaded. Decreasing loading time is one of the major aspects of web designing. Instead of using a large image you can include a small version of the actual image called thumbnail which is also a link to the larger version including thumbnails, visitors have a choice whether to see the actual image or not.

To create thumbnails use any image-editing software to resize the actual image to a much smaller size and save it with a different name. Now in the <IMG> tag include the thumbnail image instead of the actual one and add a link from the thumbnail to the larger image. To create effective thumbnails; reduce both the dimensions and the actual file size to the smallest possible value. The following line of code creates a thumbnail of the actual image” hlpglobe1.gif “.

<HTML>
  <HEAD>
    <TITLE>BASIC IMAGE TAGS</TITLE>
  </HEAD>
<BODY>
<P>The Convair 580 in Quebec city after the October 2001 research flight.<BR><BR>
<A HREF="c:\windows\hlpglobe1.gif " >
<IMG SRC="c:\windows\hlpglobe.gif " BORDER="10" >
</A>
</BODY>
</HTML>

The Thumbnail” hlpglobe.gif” is linked to the original image by using “href” attribute in the anchor tag.

You’ll also like:

  1. What is HTML?
  2. The hr tag in HTML
  3. Html Textarea
  4. HTML form tag
  5. HTML LINE BREAK
Next →
← Prev
Like/Subscribe us for latest updates     

About Dinesh Thakur
Dinesh ThakurDinesh Thakur holds an B.C.A, MCDBA, MCSD certifications. Dinesh authors the hugely popular Computer Notes blog. Where he writes how-to guides around Computer fundamental , computer software, Computer programming, and web apps.

Dinesh Thakur is a Freelance Writer who helps different clients from all over the globe. Dinesh has written over 500+ blogs, 30+ eBooks, and 10000+ Posts for all types of clients.


For any type of query or something that you think is missing, please feel free to Contact us.


Primary Sidebar

HTML Tutorials

HTML Tutorials

  • HTML - Home
  • HTML - History
  • HTML - Lists
  • HTML - Unordered List
  • HTML - Ordered Lists
  • HTML - Frame Tag
  • HTML - Input Type
  • HTML - Input Type="File"
  • HTML - Input Type="Hidden"
  • HTML - Form Tag
  • HTML - Img Tag
  • HTML - Anchor Tag
  • HTML - Table Tag
  • HTML - Span Tag
  • HTML - Button Tag
  • HTML - Doctype
  • HTML - Fieldset Tag
  • HTML - Links Tag
  • HTML - Drop Down Menu
  • HTML - Accesskey
  • HTML - Cgi
  • HTML - Post Method
  • HTML - Background Image
  • HTML - Text Area
  • HTML - TabIndex
  • HTML - Align Center
  • HTML - Address Tag
  • HTML - Thumbnails
  • HTML - Marquee Tag
  • HTML - Line Break
  • HTML - Blockquote
  • HTML - HR Tag
  • HTML - Image Center
  • HTML - Center Text
  • HTML - Link CSS
  • HTML - Html Vs Html5

Other Links

  • HTML - PDF Version

Footer

Basic Course

  • Computer Fundamental
  • Computer Networking
  • Operating System
  • Database System
  • Computer Graphics
  • Management System
  • Software Engineering
  • Digital Electronics
  • Electronic Commerce
  • Compiler Design
  • Troubleshooting

Programming

  • Java Programming
  • Structured Query (SQL)
  • C Programming
  • C++ Programming
  • Visual Basic
  • Data Structures
  • Struts 2
  • Java Servlet
  • C# Programming
  • Basic Terms
  • Interviews

World Wide Web

  • Internet
  • Java Script
  • HTML Language
  • Cascading Style Sheet
  • Java Server Pages
  • Wordpress
  • PHP
  • Python Tutorial
  • AngularJS
  • Troubleshooting

 About Us |  Contact Us |  FAQ

Dinesh Thakur is a Technology Columinist and founder of Computer Notes.

Copyright © 2023. All Rights Reserved.