7

I recently ready a couple of posts on the SO Meta site about adding borders to images. See Highlighting border for images and How to make images stand out when posting images with whitespace?. There was another with an image of a unicorn, the one I originally read, but I don't know where it's gone.

There are 2 different way to highlight an image to show that it's not part of the post. Either using > at the beginning of the line to put it into a blockquote, or wrapping it in <kbd> tags.

Some users have expressed a concern that putting it in a blockquote is bad for SEO and I suppose semantically incorrect. It would be semantically incorrect to wrap it with <kbd> tags aswell, but I don't think it would affect SEO - at least not as much.

I personally think it looks pretty decent with the <kdb> formatting.

What do you think about it?

Obviously it wouldn't be a site rule, or worthy of any kind of enforcement, just a better formatting practice.

No Formatting:

Blockquote Formatting (would be yellow instead of grey on main site):

<kbd> Formatting:

There's even space for a little title!

1
  • 4
    Nooo please noo....
    – joojaa
    May 4, 2016 at 9:58

4 Answers 4

Reset to default
7

I'm probably more insistent on proper semantics than most people, but I would definitely be against abusing <kbd> or <blockquote>. If I saw it as a suggested edit, I'd definitely be inclined to reject the change, but I wouldn't go so far as to edit it out of other people's posts.

I think adding your own border or drop shadow before is the best solution given the tools we have available.

5
  • 2
    The point is that people don't add they're own border. If you're editing someone else's post.. downloading an image, opening it in PS, adding a border, exporting, re-uploading... is a lot more effort than adding a tag around an image
    – Cai
    May 3, 2016 at 17:17
  • I completely agree with you btw, i think using <kbd> or <blockquote> tags is a horrible idea... but a better solution—which I don't have—would be nice.
    – Cai
    May 3, 2016 at 17:18
  • Fair enough, it's not an issue if all images are formatted appropriately beforehand. I just figured if it's good enough for other sites, and is an easy way to improve some cases it might be worthwhile. The general opinion so far is a resounding no.
    – Dom
    May 3, 2016 at 17:57
  • FWIW, I have edited other users' images in the past for readability improvements (this example comes to mind), but it's certainly easier for someone who always has PS or Ai fired up. Some sort of optional custom styling would be cool, but that sort of feature request might be a long shot :\
    – JohnB
    May 3, 2016 at 18:03
  • I've edited to crop images before.. wrapping the images in a tag would be a lot easier than saving the image, opening in PS, cropping, exporting then re-uploading.
    – Cai
    May 3, 2016 at 18:22
6

I havn't read through all of the related discussions you posted and it's not completely clear from your question, but this isn't something we would permanently want.

This annoys me sometimes, but most of the time I use it to my advantage. This recent image I posted in an answer wouldn't look anywhere near as good with a border or box around it...

This looks good:

enter image description here

This looks stupid:

enter image description here


With regards to a solution, I agree with @Vincent that the <kbd> formatting looks horrible. Let's not do that!

I don't like the blockquote solution either. It's better, but it doesn't look great. I personally don't think images in blockquotes will affect SEO noticably (or at all). It may be semantically incorrect, but I don't see any way for any non-person (i.e SERP algorithms) to decide if it is semantically incorrect or not—an image in a blockquote in itself isn't semantically incorrect. I'll have to look in to that later but I can't see it making a big difference.

An ideal solution would be a way of adding a 1 pixel light grey border to images (not permenantly, but a way to add that border if its needed). Just adding style="border:1px solid #ccc;" would be ok, but we can't do that.

3
  • I think it looks better without because you formatted it appropriately when creating the image, so I suppose if everybody formats it properly it's not an issue.
    – Dom
    May 3, 2016 at 17:56
  • My point exactly, as long as you are aware of the whitespace is isn't an issue.. the problem is a lot of people don't even think about it.
    – Cai
    May 3, 2016 at 18:20
  • That's weird, the grey doesn't show on my tablet even with the uploaded screenshot.
    – Dom
    May 5, 2016 at 11:04
4

Not a fan of this. Besides the semantic side of the argument (which I have absolutely no knowledge of), I do think the <kbd> formatting looks way worse, especially because of the lack of a padding on the top.

Isn't there any other formatting we can use, or request css for, that is semantically less incorrect and looks less... improvised?

9
  • Hi Vincent, hmmm, I agree with your point, I've actually altered it a tad. If you do <kbd> (+ 2 spaces) followed by a new line it gives padding at the top, but then the padding is even worse lol. But, adding a title makes it look pretty decent I think. See the update. Also, it'd be nice to get specific CSS, but I doubt that'll happen sadly.
    – Dom
    May 3, 2016 at 16:27
  • It might be nice to give the signal--we're bound not to be the only site struggling with this dilemma! :)
    – Vincent
    May 3, 2016 at 16:41
  • Requesting any change we want for the SE designers to implement would definitely be the way to go
    – Zach Saucier
    May 3, 2016 at 17:20
  • I'd add my support where possible if someone wants to make the request to SE, we could maybe add in whatever other requests we have at the same time, I just think it's unlikely to be done because right now they're dealing with a lot of CSS issues afaik, and then there's probably lots of other stuff in the pipeline that'll take priority.
    – Dom
    May 3, 2016 at 18:26
  • 1
    Better, in this case, is in the eye of the huge floating globule with one huge eye and numerous eyes on stalks :P
    – Vincent
    May 4, 2016 at 16:48
  • That's weird, the grey doesn't show on my tablet even with the uploaded screenshot. :/ Also, I have no idea what you mean by that.
    – Dom
    May 5, 2016 at 11:04
  • Google 'beholder'. XD
    – Vincent
    May 5, 2016 at 12:38
  • I know the saying, it just kinda seems like you're calling me a "huge floating globule with one huge eye and numerous eyes on stalks" because I'm the one who said it looks better ie. I'm the beholder. But I doubt you would intentionally say something offensive like that, hence why I don't understand what you mean.
    – Dom
    May 5, 2016 at 16:48
  • 1
    @Dom Please note the :P after the comment. A beholder is a D&D monster. A huge floating... You get it. Google images for it to get it. I was making a nerdy joke.
    – Vincent
    May 5, 2016 at 21:40
0

Perhaps the best solution to this would be to allow extra attributes for the image tag used here. Semantics is key. The addition of bordersize, dropshadow and crop attributes to the image tag could save us all sooo much time (particularly the crop attribute), for instance...

[![enter image description here][1][1px][10 10 50 20]][1]
1
  • 1
    This would lead to inconsistent styling which would likely lead to worse results than any other approach
    – Zach Saucier
    May 9, 2016 at 17:59

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .