114
IMAGES
When cropping images it is important not to 
lose valuable information. It is best to source 
images that are the correct shape if possible.
CroppIng Images
Here you can see an illustration 
of an elephant that is best suited 
to appearing in landscape.
landsCape
portraIt
If we crop this illustration to 
make it portrait we lose the trunk 
and the hindquarters.
If we add extra space to the top 
and bottom of the illustration the 
background is not continued.
portraIt
landsCape
Here you can see an illustration 
of a giraffe that is best suited to 
appearing in portrait.
If we crop this illustration to 
make it landscape we lose the 
head and feet.
If we add extra space to the left 
and right of the illustration the 
background is not continued.
Pdf data extraction - extract form data from PDF in C#.net, ASP.NET, MVC, Ajax, WPF
Help to Read and Extract Field Data from PDF with a Convenient C# Solution
how to fill out pdf forms in reader; extracting data from pdf to excel
Pdf data extraction - VB.NET PDF Form Data Read library: extract form data from PDF in vb.net, ASP.NET, MVC, Ajax, WPF
Convenient VB.NET Solution to Read and Extract Field Data from PDF
extract data from pdf c#; export pdf form data to excel
115
IMAGES
Images created for the web should be saved at 
a resolution of 72 ppi. The higher the resolution 
of the image, the larger the size of the file.
Image resolutIon
JPGs, GIFs, and PNGs belong to 
a type of image format known 
as bitmap. They are made up of 
lots of miniature squares. The 
resolution of an image is the 
number of squares that fit within 
a 1 inch x 1 inch square area.
Images appearing on computer 
screens are made of tiny squares 
called pixels. A small segment 
of this photograph has been 
magnified to show how it is 
made up of pixels. The web 
browsers on most desktop 
computers display images at a 
resolution of 72 pixels per inch 
(ppi). Images in print materials 
(such as books and magazines) 
are made up of tiny circles called 
dots. These images are usually 
printed at a resolution of 300 
dots per inch (dpi).
For this image: 
JPEG at 300 dpi = 1,526kb
JPEG at 72 ppi = 368kb
Due to the fact that computer 
displays are capped at a 
resolution of 72 ppi, using 
images on the web with a higher 
resolution will not result in better 
image quality — only in larger 
file sizes, which will increase the 
time needed to load them and 
therefore slow down viewing of 
your web pages.
VB.NET PDF Text Extract Library: extract text content from PDF
Application. Advanced Visual Studio .NET PDF text extraction control, built in .NET framework 2.0 and compatible with Windows system.
extract data from pdf form; save pdf forms in reader
C# PDF Text Extract Library: extract text content from PDF file in
Image text extraction control provides text extraction from PDF images and image files. Best C#.NET PDF text extraction library and component for free download.
pdf form field recognition; how to make a pdf form fillable in reader
116
IMAGES
When an image is a line drawing 
(such as a logo, illustration, or 
diagram), designers will often 
create it in vector format.
Vector formatted images are 
very different to bitmap images.
Vector images are created by 
placing points on a grid, and 
drawing lines between those 
points. A color can then be 
added to "fill in" the lines that 
have been created.
The advantage of creating line 
drawings in vector format is that 
you can increase the dimensions 
of the image without affecting 
the quality of it.
Vector images differ from bitmap images and 
are resolution-independent. Vector images are 
commonly created in programs such as Adobe 
Illustrator.
VeCtor Images
The current method of using 
vector images for display on 
websites involves saving a 
bitmap version of the original 
vector image and using that.
Scalable Vector Graphics (SVG) 
are a relatively new format used 
to display vector images directly 
on the web (eliminating the need 
to create bitmap versions of 
them), however its use is not yet 
widespread.
VB.NET PDF Image Extract Library: Select, copy, paste PDF images
Support PDF Image Extraction from a Page, a Region on a Page, and PDF Document in VB.NET Project. DLLs for PDF Image Extraction in VB.NET.
extract table data from pdf; using pdf forms to collect data
VB.NET PDF Page Extract Library: copy, paste, cut PDF pages in vb.
VB.NET PDF - PDF File Pages Extraction Guide. Detailed VB.NET Guide for Extracting Pages from Microsoft PDF Doc. Free PDF document
pdf data extraction open source; save data in pdf form reader
117
IMAGES
Below you can see the individual 
frames that make up an 
animated GIF that shows an 
orange dot revolving around 
a circle — like the kind of 
animation you might see when a 
web page is loading. 
Some image editing applications 
such as Adobe Photoshop allow 
you to create animated GIFs. 
There are several tutorials about 
how to do this on the web. There 
are also several websites that 
allow you to upload the graphics 
for the individual frames and 
create the animated GIF for you.
It Is Important to 
remember:
Each extra frame of the image 
increases the size of the file, and 
can therefore add to the time it 
takes for an image to download 
(and web users do not like 
waiting a long time for images to 
download). 
Because GIFs are not an 
ideal format for displaying 
photographs, animated GIFs are 
really only suitable for simple 
illustrations.
Some designers frown on 
animated GIFs because they 
remember a lot of amateur web 
designers overusing them in the 
1990's.
Animated GIFs show several frames of an 
image in sequence and therefore can be used to 
create simple animations.
anImated gIfs
1
2
3
4
5
6
7
8
C# PDF Image Extract Library: Select, copy, paste PDF images in C#
Document. Support PDF Image Extraction from a Page, a Region on a Page, and PDF Document. C# Project: DLLs for PDF Image Extraction. In
how to save filled out pdf form in reader; extract data from pdf table
VB.NET PDF Library SDK to view, edit, convert, process PDF file
PDF Text Extraction. Mature and robust APIs are provided for programmers to integrate and perform PDF text extraction feature in .NET windows and web project.
online form pdf output; pdf data extraction
118
IMAGES
Creating an image that is partially transparent 
(or "see-through") for the web involves 
selecting one of two formats:
transparenCY
png
If the transparent part of the 
image has diagonal or rounded 
edges or if you want a semi-
opaque transparency or a drop-
shadow, then you will need to 
save it as a PNG.
Transparent PNGs are not fully 
supported in older browsers, 
most notably Internet Explorer 6 
(IE6). There is some JavaScript 
you can use to get around this 
issue. The details of this script 
can be found in the tools section 
of the website accompanying 
this book.
dIagonal
round
semI-opaque
drop-shadoW
straIght
transparent gIf
If the transparent part of the 
image has straight edges and 
it is 100% transparent (that is, 
not semi-opaque), you can save 
the image as a GIF (with the 
transparency option selected).
C#: Demos and Sample Codes for Image Content Extraction Using OCR
C# Sample Code for Png Image Text Extraction. This C# OCR demo code illustrates how to extract text from Png and save to png.pdf. // Set the training data path.
pdf data extraction tool; extract data from pdf into excel
C# PDF File Permission Library: add, remove, update PDF file
Form Process. Data: Read, Extract Field Data. Data: Auto Fill-in Field Data. Field: Insert Choose to offer PDF annotation and content extraction functions.
how to save fillable pdf form in reader; change font size pdf form reader
119
IMAGES
examInIng Images
on the Web
CheCkIng the sIze of Images
If you are updating a website, you might need to check the size of an 
existing image before creating a new one to replace it. This can be 
achieved by right-clicking on the image and making a selection from 
the pop-up menu that appears. (Mac users will need to hold down the 
control key and click rather than right-click.)
doWnloadIng Images
If you want to download images from a website, you can do so by 
accessing the same pop-up menu. (Please remember however that all 
images online are subject to copyright and require explicit permission to 
reuse.)
On the left you can see how to 
check the size of images and 
how to download them using 
Safari. Below is a brief overview 
of what to select in the pop-up 
menu to perform these functions 
in various browsers.
Chrome
Size: Open Image in New Tab 
Size appears in new tab
Download: Save Image As
fIrefox
Size: View Image Info
Size appears in pop-up window
Download: Save Image As
Internet explorer
Size: Properties
Size appears in pop-up window
Download: save Image
safarI
Size: Open Image in New tab 
Size appears in title bar
Download: save Image As
VB.NET PDF File Permission Library: add, remove, update PDF file
Data: Read, Extract Field Data. Data: Auto Fill-in Field Data. Field: Insert, Delete, Update Choose to offer PDF annotation and content extraction functions.
extract data from pdf forms; extract data from pdf form to excel
C# PDF File Merge Library: Merge, append PDF files in C#.net, ASP.
Merge Microsoft Office Word, Excel and PowerPoint data to PDF form. PDF document splitting, PDF page reordering and PDF page image and text extraction.
extract data from pdf to excel; extract pdf data into excel
artICle
120
IMAGES
120
IMAGES
Result
<figure>
<img src="images/otters.jpg" alt="Photograph of 
  two sea otters floating in water">
<br />
<figcaption>Sea otters hold hands when they 
  sleep so they don't drift away from each 
  other.</figcaption>
</figure>
chapter-05/figure-and-figure-caption.html
HtMl
<figure>
Images often come with 
captions. HTML5 has introduced 
a new 
<figure>
element to 
contain images and their caption 
so that the two are associated. 
You can have more than one 
image inside the 
<figure>
element as long as they all share 
the same caption.
<figcaption>
The 
<figcaption>
element has 
been added to HTML5 in order 
to allow web page authors to add 
a caption to an image.
Before these elements were 
created there was no way to 
associate an 
<img>
element with 
its caption.
Older browsers that do not 
understand HTML5 elements 
simply ignore the new elements 
and display the content of them.
html5: fIgure and 
fIgure CaptIon
In this example, the logo is a GIF 
because it uses flat colors, while 
the photographs are JPEGs. The 
main photo is placed inside the 
HTML5 
<figure>
element and 
has its own caption.
The 
alt
attribute on each 
image provides a description 
for those using screen readers 
and the 
title
attribute provides 
additional information. (This is 
shown in the tooltip.)
This example does not 
use the 
height
width
, or 
align
attributes as these are 
being phased out and you 
are encouraged to use CSS 
properties instead.
121 IMAGES
example
Images
122
IMAGES
<html>
<head>
 <title>Images</title>
</head>
<body>
 <h1>
  <img src="images/logo.gif"
    alt="From A to Zucchini" />
 </h1>
 <figure>
  <img src="images/chocolate-islands.jpg" 
    alt="Chocolate Islands"
    title="Chocolate Islands Individual Cakes" />
  <p>
   <figcaption>
   This recipe for individual chocolate 
    cakes is so simple and so delectable!
   </figcaption>
  </p>
 </figure>
 <h4>More Recipes:</h4>
 <p>
  <img src="images/lemon-posset.jpg" 
    alt="Lemon Posset" 
    title="Lemon Posset Dessert" />
  <img src="images/roasted-brussel-sprouts.jpg" 
    alt="Roasted Brussel Sprouts" 
    title="Roasted Brussel Sprouts Side Dish" />
  <img src="images/zucchini-cake.jpg" 
    alt="Zucchini Cake" 
    title="Zucchini Cake No Frosting" />
 </p>
</body>
</html>
Documents you may be interested
Documents you may be interested