Pictures are not only for the user interface. They sometimes will contain useful information. The photo I used for my background, has been deleted/moved, it is leading to reduced contrast. The explanation we gave for that image has become a puzzle to the user. So how can I fix these problems?
How Can The Image Be Made Optional?
You have never intended to use a missing image. You can use image alt text in image attribute, which will be displayed if the image goes missing. In this way, you can explain the image without the actual image. You can use an attribute in an image tag to replace a picture by a default image if the image goes missing. You may also take the help of, third-party service which will replace the missing image with the default image of the specified location. You should also see the permissions while using the image as it may be in a private domain.
How Can The Image Be Made Optional?
If you have an account on a website and you posted a picture but later you noticed the image had gone missing, check the link of the image if it’s still working. On the page where the image is located, right-click the image placeholder or the alternative text for the image and select “Copy image address” or “Copy Image Location.”
After this, press Ctrl + T to open a new tab then press Ctrl + V to paste the address of the image on the address bar and then hit Enter. The image should appear after this. If the page displayed an error or the image is missing, it means your image has been deleted.
Go to the website where you uploaded the image and check if your file is available. If the file is no longer there, try uploading the image to another cloud storage like Dropbox or Google Drive to make sure your file won’t get deleted.
On the other hand, if your image is too big and you want to make it smaller, you can do it without resizing the actual image by editing the values in the IMG tag. But you can only do this if you have access to the HTML page or you can edit the HTML tag.
The HTML image tag <img> is used to define an image in an HTML document. It requires two attributes: src and alt. This HTML tag is used as a single tag and doesn’t require a closing tag. Note that images are technically not inserted into an HTML document. They are linked to HTML pages and the image tag generates a holding room for the linked or referenced image.
The image tag is supported in all major web browsers such as Google Chrome, Microsoft Internet Explorer, Mozilla Firefox, Safari, and the Opera browser. The following are the attributes that can be used in the image tag:
- align – this attribute is no longer supported in HTML5. It specifies the alignment of an image based on the surrounding elements. The align attribute can have the following values: top, bottom, middle, left, and right.
- alt – this attribute specifies the alternate or substitute text for an image. It usually appears when the image is not available or can’t be displayed.
- border – this attribute is no longer supported in HTML5. It indicates the width of the border around the image. Its value is declared in pixels.
- crossorigin – this is a new attribute introduced in HTML5. It permits images from third-party websites that permit cross-origin access to be used with canvas.
- height – it indicates the height of the image to be displayed by the image tag. Its value is declared in pixels.
- hspace – this attribute is no longer supported in HTML5. It specifies the whitespace on the left and on the right of an image. Its value is declared in pixels.
- ismap – it specifies an image as a server-side image-map.
- longdesc – it specifies a URL to a comprehensive description of an image. Its value is declared in URL format.
- src – this specifies the URL of the image to be displayed by the image tag. Its value is declared in URL format.
- usemap – this specifies an image as a client-side image-map.
- vspace – this attribute is no longer supported in HTML5. It indicates the whitespace on top and bottom of an image. Its value is declared in pixels.
- width – it specifies the width of the image to be displayed by the image tag. Its value is declared in pixels.
Here is an example of the image tag using the TechyV logo.
<img src=”https://techyv.com/sites/default/2016/10/techpedia_logo.png” alt=”Techyv.com” width=”132” height=”82”>
Output:
To resize an image, just change the value indicated in the width and height attributes. Another way is to change the width value then removing the height attribute. When you change the width, the height will follow. You can also use percentage as value instead of numbers like 50%, 85%, 102%, and so on. For example:
<img src=”https://techyv.com/sites/default/2016/10/techpedia_logo.png” alt=”Techyv.com” width=”75%”>
