A logo could be good but the size of the optimized logo in SVG is ~20kb.
Another one could be a pattern, a CSS pattern or SVG.
Here is the pen:
When a post doesn’t have any images, I want the size of the image container still remains, and show some kind of default image that doesn’t require much resource when called. What’s the best way to deal with this?
Your code in the pen is static HTML.
Are you using something to dynamically create/insert the posts?
You don’t have a size on the img tag so there won’t be any sort of default size to work with.
I was thinking you could use the :before and :after pseudo elements which are available when the source is missing because they are no longer replaced elements and just set a default aspect ratio.
e.g.
However that does not work on Safari and looks different elsewhere so is not really safe to use.
Second attempt was to use js ‘onerror’ to add a class to the image so it could be styled.
That seems to work better cross browser but of course the inline event handler should be external to the html. You could probably refine that routine so that you set the src of the image to a “Missing Image” data uri and change the alt attribute to say placeholder or something similar. There would still be the problem of working out the image size if you were having different sized images. I just use aspect-ratio in my example.
I’m not really sure if any of the above is useful but may help the discussion move forward 
If your posts are generated dynamically in some way, then you could just substitute your default image when there is no source.
If you want something to show if the image fails to load, use a CSS background on the tag and ensure you set the desired width/height.
<div class="card h-100">
<img src="data:" class="card-img-top text-center" alt="...">
<div class="card-body">
<h5 class="card-title">A post w/ no image.</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
CSS:
img.card-img-top {
height: 150px;
background: red;
}
Use JavaScript to stick in an SVG:
Here I tried using :empty. Though it does rely on the img tag not being there, and you can’t even have any whitespace.
I think you meant can’t
Are you using something to dynamically create/insert the posts?
Yes, I’m aware that the pen is static. I’m using a backend.
I just want to ask if there’s a significance if I used SVG, CSS, or just image as a placeholder for empty image posts to the performance of the system, if there is, which one is the best?
Ahh. I see.
My instinct would be that CSS would be the most lightweight, but also the least… informative?
You can use CSS to apply an image or SVG, which… would be functionally identical to just putting an image/svg in there; but you can also just leave an empty (or otherwise styled) block.
I would tend not to recommend my SVG approach (with JavaScript) because I have been unable to get the SVG to be the same size as an image would be.
In my view performance is not an issue, Whatever you put in place of a blog post image will be small (in bytes) compared with the rest of the web page.
I would just use a background gradient or (plain background) along with some text to say ‘no image available’ or similar. Why bother putting another image in place of a missing image?
I saw this site from SO that says it’s better to use images than css features like gradients
https://trac.webkit.org/wiki/QtWebKitGraphics#Usestaticimages
From the site:
Sometimes it’s tempting to use webkit’s drawing features, like -webkit-gradient, when it’s not actually necessary - maintaining images and dealing with Photoshop and drawing tools can be a hassle. However, using CSS for those tasks moves that hassle from the designer’s computer to the target’s CPU. Gradients, shadows, and other decorations in CSS should be used only when necessary (e.g. when the shape is dynamic based on the content) - otherwise, static images are always faster. On very low-end platforms, it’s even advised to use static images for some of the text if possible.
The post is 13 years old so I don’t know if it’s still applicable.
Sorry it just lost all credibility there.
I think the article was talking about animations anyway. Your whole page is built with html and css and you are worried about one small bit of css?
When this post was created, Windows 7 was brand new, Mac was on Snow Leopard, and you’re closer to Netscape Navigator than Microsoft Edge. The “ideal RAM” for a PC would have been 3 or 4 GB. When the post says “very low-end platforms”, you’re probably still looking at 512MB.
I think we’ve come up juuust a little bit since then on needing to worry about the CPU load of “draw me some hash lines.”
Well, it also has animations and includes php and js. That’s why I was asking if it has a significance to the system.
If you load an image then there is always a delay as the image has to load. If you use a background color and some text there will be no delay and no (measurable) impact on performance.
You could use a data uri for the missing image to avoid any loading of an image but then you slightly increase the file size of the page as data uris are quite large.
Gotcha, I’ll test data URI first before using gradients.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.