Chapter5 Flashcards
what is the difference between jpg and png, gif use?
Use JPEG for photos and complex graphics. Use PNG and GIF for images with solid colors, logos and geometric shapes.
What is JPEG good for?
Works best for continues tone images like photographs
Can represent images with up to 16 million different colors.
Is a “lossy” format because to reduce the file size, it throws away some information about the image.
Does not support transparency
Files are smaller for more efficient web pages.
No support for animation
What is PNG good for?
PNG works best for images with a few solid colors, and images with lines like logos, clip art and small text in images
PNG can represent images with millions of different colors. PNG comes in three flavors: PNG-8, PNG-24, PNG-32, depending on how many colors you need to present
PNG compresses the files to reduce its size, but doesn’t throw away anything, So it’s a lossless format.
Allow colors to be set to transparent so that anything underneath the image will show through
Files tend to be larger than their JPEG equivalents, but can be smaller or larger than GIF depending on the number of colors used.
What is GIF good for?
Like PNG, GIF works best for images with a few solid colors and images with lines like logos, clip art, and small text in images.
Can represent up to 256 different colors
GIF is a lossless format
GIf also supports transparency, but allows only one color to be transparent
Files tend to be larger than their JPEG equivalents.
Supports animation
How to provide an alternative for your images in a webpage?
Using alt attribute
alt=”photo description”
how to define size of your picture?
using width and height attributes.
bra img src=”…” width=”48” height=”100” ket
both dimensions are in pixels
Why do we use picture dimmension attributes if the browser figures them out itself?
On many browsers if you supply the width and height in your HTML, then the browser can get a head start laying out the pages before displaying it. If you don’t the browser often have to readjust the page layout after it downloads the html and begins to display the page.
You can also display width and height values that are larger or smaller than the size of the image and the browser will scale the image to fit those dimension. As you will see later there are many reasons not to use height and width for this purpose.
We have said many times that we are supposed to use html for structure and not for presentation. These feel like presentation attributes. Am I wrong?
It depends on how you are using these attributes. If you are setting the images width and height to the correct dimensions, then it is really just informational. However if you are using these attributes for presentation. In that case it is probably better to consider using CSS to achieve the same result.
What is a pixel?
Your computers display is made up of millions of dots called pixels.If you look very closely at your display you will see them. And while screen sizes and resolutions tend to vary (same people have small monitors and some have large) most people typically set their browsers to somewhere between 800 and 1280 pixels wide. So around 800 px is a good rule of thumb for the maximum ( and your webpages too, but we’ll get to that in a later chapter)
How do the number of pixels relate to the size of the picture on the screen?
A good rule of thumb is 96 pixels to every inch, although with today’s high resolution monitors and retinal displays it can get higher. We used to use a 72 pixels per inch (ppi), but to handle modern displays, the concept of a CSS pixel has been created. The CSS pixel is 1/96 of an inch (96 ppi). So for a 3 inch wide * 3 inch high image, you would use 96 (pixels) * 3 (inches) = 288 * 288 pixels.
How large should I make my images?
In general you want to keep the width of your image less than 800 pixels. Logos tend to run between 100 and 200 pixels.
How to make thumbnails?
To keep things organized, create a separate folder called thumbnails for thumbnail images. Otherwise you’ll end up with a folder of larger images and small thumbnails all lumped together, which could get quite cluttered after you’ve added a significant number of photos. Then resize images to 150*100 pixels and save them with the same name in the thumbnail folder
When are images shown side by side or on top of each other and why?
Because img is displayed as an inline element, it doesn’t cause line breaks to be inserted after or before the element is displayed. So if there are several images together in your html page the browser will fit them side by side if the browser windows is wide enough. The reason the lager photos weren’t side by side is because the browser didn’t have room to display them next to each other. A browser always displays vertical space before and after a block element, and if you look back at the screen shots you’ll see images are right on top of each other with no space in between. That’s another sign that img is an inline element.
Where does the matte come in?
The process of anti-aliasing softens the edges relative to the background. If you put the bottem version of the logo against a colored background , you’de see it has white edges next to it. The matte option in photoshop allows you to specify the color of the backgound that the text will be placed on. So when the text is softened it is done against that color.
