Images
Images in HTML is included using the <img> tag. You reference the image using the src attribute, with the value being the path to you image. E.g. for this file hierarchy:
products
starblaster.html
images
starblaster.jpg
index.html
... you would write it like this, when referencing to the image from `starblaster.html`:
This will render an image in the browser that has the same height and width as the image it self. That might not always be desirable. To change this you can use the attributes height and width to constrain your image size. E.g.:
Images often take longer to load than other HTML code. Thus it is a good idea to specify the size of the image so that the browser can render the rest of the text on the page while leaving he right amount of space for the image that is still loading.
Be aware that even if you resize your image using the width and height attributes, the file will have the same size measured in kilobytes and megabytes. Resize your image using a photo software (e.g. Photoshop or any other tool, there are web pages that does this) to reduce the file size.
There are a couple of other attributes you should know of alt provides a text description of the image which describes the image if you cannot see it. The alt attribute should give an accurate description of the image's content so it can be understood by screen readers and search engines. You can also use the title attribute to provide additional information about the image. Most browsers will display the content of this attribute in a tooltip when the user hovers over the image.
As <img> is a inline element, it will be placed on the same line as where you declare it. That is, if you declare it inside a paragraph, it will be inside the paragraph, and the height of that line will be the same as the image's height. You can place it before the paragraph in order to place it outside of the text. You will learn how to use CSS later, but the best way to style an image, e.g. aligning it, is best done using CSS.
When you are using images, think of these three guidelines (some will call them rules):
Save the image in the right format
The file formats JPG, gif and png are the most often used formats, and has the widest support among browsers. If you choose the wrong image format your images might not look as sharp as they should, and the web page might load slower.
Save the image at the right size You should save the image at the same width and height as it will appear on the website (measured in pixels). If the image is smaller than the width or height that you have specified, the image can be distorted and stretched, and the pixels will be visible. If the image is larger than the width and height you have specified, the image will take longer to load on the page.
Measure images in pixels As computer screens are made up of pixels, you should also measure your images in pixels (not centimeters).
Images as links
You can use the image element as a link if you want. In stead of a text between the `<a>` tags, put an image there.
Image formats
There are different image formats to choose from, and they all have their pros and cons. To understand the differences, there are two terms you should know about compression:
Lossless: The image is made smaller, but this does not affect the quality
Lossy: The image is made (even) smaller, and it affects the quality. Saving the image over and over again would make the image quality get progressively worse.
This information is gathered from stack overflow. Here you can read more about other aspects of the formats.
Below are an explanation on the four most used image formats, their advantages and disadvantages.
JPEG
JPEG (or JPG) is the most common file format for showing images, and for photos and images with much details. It removes details not visible for the human eye, and is a lossy format, which means that each time you save it you will loose quality. The lossy compression means that it is bad for logos and line drawings (images with large areas covered by one color).
Good for photos and gradients, bad for logos illustrations.
PNG
PNG is a lossless format, meaning that it will not loose any details when being saved. Then why not use PNGs on photos? That is because the images would be ridiculous large, and are best used on graphics and logos.
Good for illustrations, logos and images where part of the image is transparent. Bad for photos.
GIF
It does not matter if you pronounce it "jif" og "gif", the gif format behaves the same either way. There is a limited number of colors available, so it is not suitable for showing photos with high resolution. GIFs are today most suitable for animations, or showing video snippets, without sound, in an image format. These files grow fast in size.
Good for animations, bad for anything else.
SVG
SVG is, unlike the previous formats, a vector format, rather than raster. That means that you can scale the image indefinitely without loosing quality. This is suitable for simple images such as logos and graphics, but not photos, as the lines are mathematically calculated, rather than being described with pixels. SVG files can be written using XML, or with software such as Adobe Illustrator.
Good for logos, graphics and animations. Bad for photos.
Last updated