Best Practices to achieve this

HTML & CSS
1

Hello All,

I am new to web design and I am looking for the best practice to achieve the following. I currently have the below page (work in progress) the two blue circles represent a div.

1472×648 341 KB

the images are 4 separate ones and below is the html code:

  <div class="headerImages group">
                   <div class="imagecol1">
                        <img class="img1" src="resources/img/cSharp.png" />
                        <img class="img2" src="resources/img/dell.png" />
                    </div>
                    <div class="imagecol2">
                        <img class="img1" src="resources/img/sql.png" />
                        <img class="img2" src="resources/img/linux.pnh.png" />
                    </div>




                </div>

Is what I am doing correct or would it be best to combine the images into one image rather than using 4 separate ones?

2

I think semantically having the four separate images makes sense (if they are in fact intended to be separate entities), except for the fact you have omitted the alt attributes form the images which negates any semantics for the images and goes against best practice.
Another advantage of separate images is you are not tied to that 2 x 2 grid if that layout needs to change in some media query.
Though the advantage of combining the images is fewer server requests which may help loading times and improve UX.
So either could work, I would like to hear more opinions on these points.

2 Likes
3

Or you could keep the four images with their own alt tags set up in the two divs, but use image sprites to reduce the number of server requests (unless I have misunderstood the way image sprites work).

Would something like flexbox work better here for the layout of the images instead of having two column divs?

4

As far as I know, sprites can only be used with background images (which can’t have alt text).

2 Likes
5

You are right, and in this situation background images would not be semantically appropriate.

6

Thanks All for your time and comments :slight_smile:

7

If you want to link those 4 images to their 4 disciplines then 4 images would be the best approach. Usually I would expect to click either of those images and go to their respective pages.

If each of those images is important to your content (C#, Dell, Sql, etc.) then again they should be separate images although you could combine into a sprite and use image replacement text techniques if you are trying to cut down on image requests.

However as Sam said it would be easier to keep them as separate images because for smaller screens you will want to re-arrange them into a better fit (vertical perhaps).

3 Likes
8

I agree, it can also change naturally without a media query. A two-image block can be created on it’s own by setting a max-width on the image wrapping div. Then they can all stack naturally when there is no longer room for that max-width.

Flexbox can can certainly make alignment on the main axis easy with it’s justify-content property. But for only four images this can easily be done with inline-block images and text-align on the parent.

The only kicker is the smaller width of the SQL image. A little extra margin on that image can center it back up. The SQL image could also be the same width as the others with a transparent background.

Inline-block can give you something like this…

300×301 9.21 KB

The CSS below is overkill since I am imitating without the real images.
Most of the classes could be eliminated. Maybe one class would be needed to set extra margin on the small SQL image.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Image Block</title>
<style>
.imgwrap {
  display:inline-block; /*sit inline with text div*/
  max-width: 400px; /*width of 2 images + margins etc.*/
  text-align:center;
  outline:1px solid red;
}
.imgwrap img {
  display:inline-block;
  margin:10px;
  max-width:100%;
  height:auto;
  vertical-align:bottom;
}
  .imgwrap .c {
    width:160px;
    height:160px;
    background:purple;
  }
  .imgwrap .dell {
    width:160px;
    height:160px;
    background:lightblue;
    border-radius:80px;
  }
  .imgwrap .sql {
    width:80px;
    height:100px;
    margin:10px 50px;
    background:blue;
    border-radius:20px;
  }
  .imgwrap .lnx {
    width:160px;
    height:200px;
    background:gold;
    border-radius:80px 80px 20px 20px;
  }
</style>
</head>

<body>

<div class="imgwrap">
    <img class="c" src="resources/img/cSharp.png" alt="C+" width="" height="">
    <img class="dell" src="resources/img/dell.png" alt="Dell" width="" height="">
    <img class="sql" src="resources/img/sql.png" alt="SQL" width="" height="">
    <img class="lnx" src="resources/img/linux.pnh.png" alt="Linux" width="" height="">
</div>

</body>
</html>
1 Like
9

Sure, inline-blocks, flex and even floats can achieve this without queries. I only mention the query as an obvious example of when a layout changes to accommodate a different screen size.

10

I didn’t mean to imply that a media query would not be useful, I should have phrased that differently.

I agree with you about four separate images and not being tied to two images in a nested div (that 2 x 2 grid).

11

If you are indeed pursuing best practice, then follow @Ray.H Ray.H’s example in post #8 and include the actual dimensions of the images in the HTML, even if the CSS changes those dimensions.

Optionally (because it is not prohibited in HTML5), you can drop the XHTML trailing slash on empty elements, too. It has never been required by HTML although the earliest Netscape browser mistakenly thought otherwise. :shrug:

2 Likes
12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.