In web programming, you can put an image with the tag img
or as a background image using background-image
CSS and the result will be visually similar:
.hamburguesa {
background-image:url(https://i.imgur.com/tbhsHbKh.jpg);
width:256px;
height:256px;
display:inline-block;
}
<img src="https://i.imgur.com/tbhsHbKh.jpg" alt="Hamburguesa" />
<div class="hamburguesa"></div>
What are the advantages of using one over the other? In what situations should it be used img
and in which ones should it be used background-image
?
Factors to take into account: usability, accessibility, adaptability, type of display (screen, printer, etc).
It all depends on what purpose you have for the image:
IMG
IMG
if you want people to print the page and you want the image to be included by default.IMG
(withalt
) when the image has important semantic meaning, such as a warning icon. This ensures that the meaning of the image is communicated to all agents of use, including screen readers.IMG
if you want the browser to display an image in proportion to the size of the text.IMG
for multiple overlay images in IE6.IMG
instead of background-image can drastically improve the performance of animations over a background.CSS background-image
CSS background-image
if the image is not part of the content.CSS background-image
when image replaces textCSS background-image
if you want people to print the page and you do NOT want the image to be included by default.CSS background-image
if necessary to improve download times.CSS background-image
if necessary to make visible only part of the image.CSS background-image
combined withCSS background-size:cover
in order to stretch a background image to cover the entire container (eg div, body, etc..).Well, when it should be used, here it depends, it would depend a lot on the project or the design.
Examples:
background-image
in a div of a character or image that represents the company or a product with a short descriptive text.One of the topics of great interest and great advantage is when the image has a resolution that is too large and applying responsive resolution does not suit taste, that is, the dimensions become too small in certain parts or sometimes a blurry effect.
Example
background-image
:The advantage is that it adapts to a responsive but a certain part of the image is rescued by hiding certain unwanted content, changing the value of
background-position
important to add this propertybackground-size: cover;
for its operation.While in an image
img
if you change the value ofheight: auto;
to aheight: 600px;
if you observe the difference when changing the value it no longer occupies 100% of the site and if you change the 100% of the site for brusheswidth
, the responsiveness would be lost.About when to use
img
more corresponds as an example a product which shows a representative image, or like the logo of the company or the site.Disadvantages of:
background-image
One of the disadvantages of
background-image
is that there is no seo positioning in images. Why background images do not have an attributealt
google and seo recommendations is that for seo positioning in images it is to give the attribute a namealt="Foro stackoverflow"
Advantages of:
img
It is that if it has seo positioning in the images with the attribute
alt="stackoverflow"
. This will make it easier to find the name of your company, the more space you gain in SEO positioning, the better.Use img for what it is, literally adding an image.
Use background-image when you want to put a background image of some element, such as a div.
Let's use things for what they are made for :)
Background-image: Mostly used for a box or html content to introduce a background image.
Img: It is used to place images, as blog, logos, galleries among other things.
My answer is seen from the pragmatic use and with an emphasis on SEO, beyond what is theoretically possible with each element.
I would highly recommend using
img
and using carefullybackground-image
because this is supposed to be minor content.img
img
when you need search engines to crawl the image using thealt
and tagstitle
. You're going to want your images to be crawled most of the time, of course they have to be part of the content.img
when the image is complex or large.background-image
background-image
for simple images like textures or decorations. These images are not tracked by search engines, so with a considerable weight they are usually not profitable for the web since they reduce performance.background-image
for complex images that are not part of the content. A common example is a third party image that sometimes even has an opaque filter, it is not recommended to use this image but sometimes it is a good idea because it adds a certain attraction to the site.important to consider
img
theybackground-image
can be used for complex images such as photos from the real world, avoid using these images especiallybackground-image
because, in addition to increasing the weight of the web, they are not usually profitable in the latter case since they are not tracked by search engines.background-image
with an increasingly complex background and this is what causes the confusion or fine line between usingimg
orbackground-image
when it should initiallybackground-image
be for simple images. However, as an exception , it is sometimes useful when you want to display complex images that are not part of the content but add appeal to the website.img
is usually more useful thanbackground-image
and that the latter is only a design utility since it is not directly important for the content according to SEO and its use must be controlled by criteria or through A/B tests with the help of tools like Google Analytics.Example of good use of
background-image
:Except that it is not a simple image, it is a good implementation because it does not cover a large space and therefore is not usually heavy, and it is not part of the content.