The <IMG SRC=”#”> HTML Tag
Attribute of
<img> HTML Tag
What does The <IMG SRC=""> HTML Tag do?
Specifies the URL of an image to be displayed.
Code Example
A Note on Hotlinking
Including an image from another website like this is sometimes called “hotlinking.” Not all external-URL images are “hotlinks” — only when you link to an image that is already on another sight so that you don’t have to download it yourself.
Hotlinking is sometimes just fine. For instance, in the above example we hotlinked an image from Wikimedia Commons. This is a Public Domain image hosted by a media provider. No problem. However, it can be a problem in certain circumstances.
First of all, if the image in question is under copyright, and you do not have permission to use it, you may be in violation of copyright laws by hotlinking. Because you aren’t actually putting the image on your site, there is a bit of a legal gray area here, but it is at least potentially a problem.
Related to that, even if isn’t illegal, it may be immoral or unethical if you know that the image owner does not want you to hotlink their pictures. While you aren’t exactly “stealing” the image, you are using up their bandwidth and creating ill will.
Finally, if you don’t control the hotlinked image, it might change. Sometimes this just happens because sites go down or get rearranged. However, sometimes a perturbed site owner will deliberately change an image in response to hotlinking.
Hotlinking to an image hosting service is just fine, and it’s also reasonable to hotlink an image in a casual conversation on a forum or blog comment. But if an image is an integral part of your content (even if the content is a link to the image’s original source), you really should save the image to your own server.
Protip: If you want to block others from hotlinking your images, you can do so with .htaccess
Relative URLs
A relative URL does not include the domain name, and is relative to either the current page, or the current domain. If you begin the URL without a slash ( / ), it will be relative to the current page. If you begin with a slash, it will be relative to the domain.It is almost always the best idea to use source URLs which are relative to the domain, not the page. They will not break if the page content is moved or copied.
Additionally, when linking to images on your own site, it is almost always best to use relative URLs rather than absolute URLs. This way, the URLs won’t break when you change domains (which will happen automatically if you use a development or staging server in addition to your production one).
Data URIs
It is possible to encode content into a URI string. You then use the string as if it were a URL, and then the browser simply interprets it as if it were a file. It’s weird and kinda neat:
<img src="data:image/jpeg;base64,/2Q==">
You need a special encoding program to turn images or other files into Data URIs. The one above was created with this tool.
Data URIs are not usually a great solution. Most meaningful images are going to create insanely long strings (just see the example above), and they actually don’t load as fast as external files. They do cut down on HTTP requests to the server, which you may (or may not) care about. They can also be useful in situations where external images might not get loaded, such as in emails or in self-contained documents to be read offline.
Image File Types
Each browser supports a slightly different set of image file types. This used to be a serious problem for designers (Internet Explorer would not display PNG files correctly until v8, and SVG wasn’t supported until v9), but most of those issues have calmed down as all the major browsers have basically caught up with each other. Most normal image formats (JPEG, GIF, PNG, BMP, TIFF, SVG) will work in most situations most of the time.
However, that doesn’t mean that image file type doesn’t matter. What matters, though, is — what kind of image is it?
The kind of image file you use should depend on what the content of the image is. If you use the “wrong” image file format, you’ll end up with images that either don’t look good, or that are too large and waste bandwidth. Here is some quick information about the most important image file formats:
JPEG (JPG)
Images are compressed and lose data. Best for photography. Line drawings, text, and logo-style art work will look fuzzy.
PNG
Images are compressed but the compression is lossless, which means all the information of the original artwork is preserved. This is usually the best option for logos, icons, line-art, and text. PNG supports transparency (which is now supported in current versions of all browsers), so it is a crucial file format for most web design work.
GIF
Similar to the PNG, but with a less sophisticated compression algorithm and without transparency. The only compelling reason to use a GIF is for animated images.
SVG
Scalable Vector Graphic. This format actually save instructions for generating the image, not the image itself (that is — shapes, lines, and fills instead of pixels). This makes it infinitely scalable. Perfect for simple logos and icons.
99% of your image needs can be served with PNGs and JPEGs, and your designs will look better if you don’t mix the two up.
src and srcset
New in HTML5 is an image attribute named srcset. This attribute is used to define a list of image source files, along with sizing information, so that the browser can select the most appropriate option.
When the srcset attribute is set, the src files will be used as a “fallback” or “default” image. If the srcset image fails to load, or if the browser doesn’t support srcset, the src file will be selected instead. So it is very important to always include the src attribute in your images.
src of “
HTML5 also created a new image element called [](#). The element is used in order to specify several different image designs (not just sizes). Each separate image design is defined in an individual “ child-element.
<!–
–>
SOURCE: https://html.com/attributes/img-src/
0 comments:
Post a Comment