Which takes longer to render: individually drawn images placed via absolute positioning, or one complete image?

Question

Which takes longer to render: individually drawn images placed via absolute positioning, or one complete image?

I currently have a collection of "cards" on my website that are jpg images, but I am considering switching to an HTML/CSS solution. This change would involve placing numerous small icons on a background and adding stylish text on top.

My concern is determining which method is faster for both the client and the server.

To help illustrate this dilemma, I quickly put together a rough example.

Original full image size is 111kb:

https://i.sstatic.net/jD2av.jpg

Rendering using HTML/CSS:

Check out the code here

<div class="wrapper">
  <img class="background" src="http://i.imgur.com/qCxyd9v.jpg">
  <img class="icon one" src="http://i.imgur.com/c5Qx3x7.png">
  <img class="icon two" src="http://i.imgur.com/4G8xUeM.png">
  <img class="icon three" src="http://i.imgur.com/9Kips1U.png">
  <img class="icon four" src="http://i.imgur.com/0utE9VD.png">
  <img class="icon five" src="http://i.imgur.com/Ej7w0pA.png">
  <img class="icon six" src="http://i.imgur.com/9EdnWnW.png">
  <div class="text">
    How can I measure the performance impact of this rendering approach?
  </div>
</div>

.wrapper {
  position: relative;
}
.icon {
  position: absolute;
}

.icon.one {
  left: 10px;
  top: 20px;
}

.icon.two {
  left: 140px;
  top: 20px;
}

.icon.three {
  left: 270px;
  top: 20px;
}

.icon.four {
  left: 400px;
  top: 20px;
}

.icon.five {
  left: 140px;
  top: 150px;
}

.icon.six {
  left: 270px;
  top: 150px;
}

.text {
  position: absolute;
  left: 120px;
  top: 350px;
  font-size: 24px;
  color: white;
  text-align: center;
  max-width: 300px;
}

The background image size is 73 kb, with each icon being 7kb, totaling to 115 kb.

Sometimes, some of the icons may be duplicates, reducing the overall file size. However, it's essential to consider the cost of positioning elements on the page.

How can I accurately measure the most efficient option? It seems like a case-by-case evaluation rather than a straightforward answer.

So, should I:

1) Figure out how to measure the best choice?

or

2) Accept that it doesn't make much difference in the end?

html css

Answer 1

Answer №1

After conducting a measurement on your fiddle using Chrome Dev Tools, I have provided a screenshot for reference.

https://i.sstatic.net/reg4o.jpg

The approach of fragmenting the image into separate assets appears to be advantageous as it leads to numerous concurrent http requests, which is typically more efficient with the same bandwidth.

It's worth noting that in cases like this, determining a universal rule can be challenging and decisions may need to be made on a case-by-case basis.

For this specific scenario, I recommend employing the "many-assets-via-css" method.

Answer 2

After conducting a measurement on your fiddle using Chrome Dev Tools, I have provided a screenshot for reference.

https://i.sstatic.net/reg4o.jpg

The approach of fragmenting the image into separate assets appears to be advantageous as it leads to numerous concurrent http requests, which is typically more efficient with the same bandwidth.

It's worth noting that in cases like this, determining a universal rule can be challenging and decisions may need to be made on a case-by-case basis.

For this specific scenario, I recommend employing the "many-assets-via-css" method.

Answer 3

Answer №2

Are you curious about how to measure the loading time of a website? Well, all you need is an inspector tool. I recommend using Google Chrome and accessing the inspector, then navigating to the "Timeline" tab. From there, refresh the page or click record in the top-left corner before refreshing to view load times for different elements.

For instance, this particular page loads in 2.72 seconds with specific breakdowns like 77.11ms Loading, 456.61 Scripting, 191.89 Rendering, 162.97 Painting, and 163.16 Other. By analyzing these metrics, you can identify the major areas affecting your page's performance. In this case, scripting seems to be the biggest pain point, but it only causes a half-second delay, so nothing major to worry about.

If your file sizes are minimal and if there aren't multiple repetitive items on the page, they won't significantly impact loading time. A 115kb main file plus a typically small CSS size should not pose a noticeable delay on most modern devices. However, increasing the number of images can lead to more significant loading issues. In such cases, consider combining and optimizing images to reduce server calls.

UPDATE Check out this crude example demonstrating how to use a single icon with CSS to create diamond shapes: https://jsfiddle.net/g4stvufk/

Ensure that the icon includes the diamond shine effect for authenticity.

HTML

<div class="diamond">
    <img src="http://i.imgur.com/PWeXerY.png">
</div>

CSS

.diamond {
    width: 0;
    height: 0;
    border: 65px solid transparent;
    border-bottom-color: red;
    position: relative;
    top: -50px;
}
.diamond:after {
    content: '';
    position: absolute;
    left: -65px;
    top: 65px;
    width: 0;
    height: 0;
    border: 65px solid transparent;
    border-top-color: red;
}
img {
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

The key advice here is to "Reuse, Reuse, Reuse." Utilize existing resources whenever possible, like reusing icons and effects to improve efficiency.

Answer 4

Are you curious about how to measure the loading time of a website? Well, all you need is an inspector tool. I recommend using Google Chrome and accessing the inspector, then navigating to the "Timeline" tab. From there, refresh the page or click record in the top-left corner before refreshing to view load times for different elements.

For instance, this particular page loads in 2.72 seconds with specific breakdowns like 77.11ms Loading, 456.61 Scripting, 191.89 Rendering, 162.97 Painting, and 163.16 Other. By analyzing these metrics, you can identify the major areas affecting your page's performance. In this case, scripting seems to be the biggest pain point, but it only causes a half-second delay, so nothing major to worry about.

If your file sizes are minimal and if there aren't multiple repetitive items on the page, they won't significantly impact loading time. A 115kb main file plus a typically small CSS size should not pose a noticeable delay on most modern devices. However, increasing the number of images can lead to more significant loading issues. In such cases, consider combining and optimizing images to reduce server calls.

UPDATE Check out this crude example demonstrating how to use a single icon with CSS to create diamond shapes: https://jsfiddle.net/g4stvufk/

Ensure that the icon includes the diamond shine effect for authenticity.

HTML

<div class="diamond">
    <img src="http://i.imgur.com/PWeXerY.png">
</div>

CSS

.diamond {
    width: 0;
    height: 0;
    border: 65px solid transparent;
    border-bottom-color: red;
    position: relative;
    top: -50px;
}
.diamond:after {
    content: '';
    position: absolute;
    left: -65px;
    top: 65px;
    width: 0;
    height: 0;
    border: 65px solid transparent;
    border-top-color: red;
}
img {
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

The key advice here is to "Reuse, Reuse, Reuse." Utilize existing resources whenever possible, like reusing icons and effects to improve efficiency.

Answer 5

Answer №3

Optimizing website performance involves minimizing http requests, such as by implementing image sprites which require only one request and utilizing CSS for positioning. Automation tools like Grunt or Gulp can help streamline this process, including the use of lossless compression tools like TinyPNG.com to reduce image file sizes (these can also be integrated as API calls within your automated tasks), providing a comprehensive solution.

Answer 6

Optimizing website performance involves minimizing http requests, such as by implementing image sprites which require only one request and utilizing CSS for positioning. Automation tools like Grunt or Gulp can help streamline this process, including the use of lossless compression tools like TinyPNG.com to reduce image file sizes (these can also be integrated as API calls within your automated tasks), providing a comprehensive solution.

Which takes longer to render: individually drawn images placed via absolute positioning, or one complete image?

Answer №1

Answer №2

Answer №3

Similar questions

Retrieving PNG image from dynamically created PDF file with DomPDF

Using jQuery to toggle the visibility of div elements while displaying an indicator

What is the process for integrating SAP BO objects into HTML containers?

Embracing JQuery for Frontend Development with Node.js

The navigation bar struggles to display list elements without proper line breaks

"What's the best way to make sure a checkbox stays checked and its content remains visible after a

The unusual behavior of a page refresh in jQuery when replacing content

"Implementing jQuery to dynamically set the href attribute for a link when

Stacking SVG elements can lead to distortion effects

Updating a jQuery div issue

sticky placement changes when option is chosen

Creating a repeating sequence in HTML: A step-by-step guide

What is the best way to design a div that showcases text on top of a background image, complete with a pointer or arrow, and automatically adjusts its width to properly display the

What is the best way to retrieve a table from an HTML page and convert it into a data frame using XML and Rcurl in R programming?

The conversion of a 2D json array into a string is mistakenly performed

Center alignment of text and images within the button's image

What is preventing the div container from extending to its full width?

Ways to efficiently update styles dynamically using css and/or javascript

Is there a glitch causing the Owl carousel to malfunction?

Issues with NativeScript WebView displaying HTML file