Which is better with HTML/CSS to show an img?

Question

Which is better:

<img src="http://placehold.it/300x200" alt="">

or:

.img {
  content: url(http://placehold.it/300x200); /* or background-image */
}

<div class="img"></div>

Consider loading times and which is better to stop users to be able to highlight the image, (I don't know why I just don't like people highlighting images) which above option is better?

You can't prevent someone from downloading an image if you serve it to them. — Phix
– Phix, Commented May 16, 2018 at 4:02
If there is a need to prevent some downloads it's possible to create event handler which would interrupt right click so that 90% of users won't be able to download it except for those who go right to the code and get it directly from there. — Sergey
– Sergey, Commented May 16, 2018 at 6:24

VXp · Accepted Answer · 2018-05-16 06:11:51Z

1

Setting the image through CSS means some browsers will not display the image if the user tries to print your page, and inline CSS styles become hard to manage. You should probably also set the alt, as this helps with accessibility:

<img src="example.png" alt="example image">

There's no sure fire way to prevent someone downloading an image, but if you want to prevent users from right clicking (to save image as), dragging the image etc. you can use some CSS for this:

img {
    pointer-events: none;
}

This rule will be applied to all img elements.

edited May 16, 2018 at 6:11

VXp

12.1k6 gold badges34 silver badges47 bronze badges

answered May 16, 2018 at 4:23

Alex Tulic

441 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pons Purushothaman · Accepted Answer · 2018-05-16 04:23:41Z

0

I think it depends on the scenario.

If it is design(background-image) element, using image as css background will be best.
For elements like website logos, partner logos or icons etc(generally static images but may be clickable), any method is okay.
But if it is part of content, like an image in news article or blog, I think it is better use <img> tag. Since we can use 'alt' and 'title' attributes in <img>, it will help in SEO also.

answered May 16, 2018 at 4:23

Pons Purushothaman

2,2791 gold badge16 silver badges23 bronze badges

Comments

Stefan Morris · Accepted Answer · 2018-05-16 04:24:34Z

0

It all depends on your requirements. <img> tags with alt and title attributes may provide better SEO and is easier for things like maintaining aspect ratio (just providing one dimension - width/height will maintain aspect ratio), while background images allow for easier ways to crop an image or have it dynamically change using CSS.

FYI, you can prevent users from selecting/highlighting your tag with the CSS property user-select.

answered May 16, 2018 at 4:24

Stefan Morris

1651 silver badge11 bronze badges

Comments

VXp · Accepted Answer · 2018-05-16 06:12:03Z

0

If the image is part of the content such as a logo or diagram or person then use the <img> tag plus alt attribute.

If you don't want people to highlight the image background-image would be better option.

edited May 16, 2018 at 6:12

VXp

12.1k6 gold badges34 silver badges47 bronze badges

answered May 16, 2018 at 4:09

virat

10511 bronze badges

Collectives™ on Stack Overflow

Which is better with HTML/CSS to show an img?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related