We Keep Coding

Is using a SVG more efficient than a PNG as a lazyload placeholder?

I am using lazysizes lazyloading library, and I'm trying to decide on the most performance-optimal lazyload placeholder technique.
If the size is similar (for simplicity's sake; unlikely, as SVG is usually way smaller) would it be more optimal for performance to use SVG or PNG?
My HTML structure is like this:
<div class="image-module aspect-ratio--4x5">
<img class="lazyload" data-src="..." src="..." data-srcset="..." srcset="...">
<svg viewBox="0 0 204.7 255.3" width="100%" height="100%">
<use xlink:href="#idRef" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>
</div>
*"image-module" class container is just for aspect ratio
Related Questions:
I am guessing, regardless of whether SVG or PNG, I shouldn't be using them as inline element but as CSS background. Is my guess correct and will this improve performance?
Is there some tool to measure the performance of paint/render differences like this?
I think the best, most performance-optimal method is to use an SVG as a CSS background-image. However, while lazyloading the <img> is opacity: 0;, so I can't use background-image on the main img. What I plan to do is use background-image on the parent, image-module classed parent, and then to target it on-load with JS. Like so:
var $allImageModules = $('.image-module img');
$allImageModules.on('load', function(){
setTimeout(function(){
$(this).parent().find('svg').remove();
}, 537);
});
Is there some magical CSS way that I am not aware of to target the parent, depending on whether the class of its child image is "lazyload," "lazyloading," or "lazyloaded" class? PS: I know .find('svg').remove() doesn't work.
Once the image is loaded, does it help performance to replace the no-longer visible background image with background-image: none; like below?
.image-module.lazyload,
.image-module.lazyloading,
.image-module.lazyloaded {
background-image: url("data:image/svg+xml;utf8,<svg ... </svg>");
background-position: center;
background-size: 30%;
background-repeat: no-repeat;
}
.image-module.lazyloaded {
background-image: none;
}

is there a way to resize an image and have an image map stay in the same place? (html/Javascript/CSS)

i am currently making a website that s designed to be a test. It has an image and an image map, i am trying to use JavaScript to get the clients screen size and resize the image to fit the clients screen size but when i do the image map is not were i need it to be. Is there a way to get the image map to stay in the same place with out having to "physically" resize the image in paint or Photoshop. My site (with out getting the clients screen size). Basically i am trying to make the image fit their screen so its easier to navigate the test,its realistic, but without screwing up my image map positioning. Any hep would be much appreciated.
`<map name="desktopmap" >
<area onclick="correct();" shape="rect" coords="1,575,38,597" href="OS2.html" >
</map>
<img onclick=" wrong('OS2');" src = "../Pic/desktop.png" usemap = "#desktopmap" >`
Thank you.

What you can do instead is use absolutely positioned divs with percentage-based coordinates and dimensions, and hook your click events into those. That should allow your invisible "buttons" to scale nicely with the image. Image maps are a bit outdated and not very flexible.
Example fiddle (updated with correct/wrong functions):
http://jsfiddle.net/3ZLeK/1/
Example new HTML structure:
<div class="wrap">
<img class="bg" src="http://i.imgur.com/WgsCTDj.gif" />
<div class="box box1"></div>
</div>
Example new CSS:
.wrap {
position: relative;
overflow: auto;
}
.bg {
float: left;
width: 100%;
}
.box {
position: absolute;
cursor: pointer;
}
.box1 {
top: 95%;
left: 0;
width: 7%;
height: 5%;
}
In the fiddle I also changed your inline Javascript handling to use event handlers, because those attribute handlers are outdated as well.

You may use mediaqueries to rescale/zoom your map .
two experimental test here : http://dabblet.com/gist/5586117 and http://codepen.io/gcyrillus/pen/AJHmt
If you follow this idea, and think of using zoom + javascript instead of mediaquerie to include older browser such as IE , beaware of that some version of IE understands both : transform:scale(x); and zoom:X; . make sure you do not aplly twice a rescalling in that case.
Basicly , coords are pixels coordonates, a scaling is the only way, unless you modyfy each values of each coords :)
... not too sure my english is clear/correct enough.

image map alternative (maybe in javascript?)

Alright, so I was wondering if there was an alternative, lightweight way to creating an image map.
Basically, I want to take this image:
And have the sections of the diagram light up when they are hovered over, kinda like this (I've mocked it up in photoshop):
The other sections (which I haven't named yet) should be able to do the same. Also, I'd like to be able to use javascript later to have sliding links appear from behind those sections (I roughly know how to do that now, so I'm okay that)
Does anyone have any suggestions? Just a general direction on what to search for would be great.

Map tag would be good and it is not actually heavyweight as it does not require any external plug-ins.
However, since you just want a general idea: Once due to some error, I wasn't able to use map tag. So I split the original image into different images (positioned them as the original image was) and then used events on separate parts.
Tiresome, but a workaround.

Circles are easy to do with CSS. You can start with something like this :
width: 140px;
height: 140px;
background: rgba(255, 0, 0, 0.3);
-moz-border-radius: 70px;
-webkit-border-radius: 70px;
border-radius: 70px;
FIDDLE
Hope it help.

It's difficult for me to achieve that white shape in the middle, but here's a simple try:
http://jsfiddle.net/w8zTz/
Only with three div and a few css:
HTML
<div class="rojo"></div>
<div class="azul"></div>
<div class="amar"></div>
CSS
div {width:100px; height:100px; border-radius:100px; position:absolute; opacity:0.5;}
.rojo {background:red; top:0; left:30px;}
.azul {background:cornflowerblue; top:60px; left:0;}
.amar {background:gold; top:60px; left:70px;}
div:hover {opacity:1; z-index:-1}
(Z-index is for stack the div behind the other and reach transparency).
Hope this helps :)

Take two images
1)normal image
2)the particular section higligthed when hovered image
<img id="originalimage" src="originalimage.png" width="140" height="140" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="77,18,127,90" href="#" onmouseover="onHover('higlightedimageonhover-imagesrc.png')" onmouseout="onout6('originalimagesrc.png')"/>
</map>
<script>
function onHover6(image1)
{
document.getElementById('originalimage').src=image1;
}
function onout6(image2)
{
document.getElementById('originalimage').src=image2;
}
</script>
Here when you hover on the co-ordinates, the image changes to hoverimages and on mouseout it changes to original image.

CSS - Extra background image for when the first image doesn't load?

Okay, let's say you have something like this:
<span class="image" style="background-image: url('http://www.example.com/images/image1.png')"></span>
Every CSS tutorial I've ever read has covered the concept of using a background color after the background-image code, which of course takes the place of the image when one is unavailable, but...
How do you specify a backup background-image - one that should be displayed if the image referenced is unavailable? If there's no CSS trick for this, maybe JavaScript could handle it?

In modern browsers you can chain background images and have more than one on each node. You can even chain background-position and background-repeat etc!
This means you can declare your first image (which is the fallback) and then the second one appears over it, if it exists.
background-color: black;
background-image: url("https://via.placeholder.com/300x300?text=Top Image"), url("https://via.placeholder.com/300x300?text=Failed To Load");
background-position: 0 0, 0 0;
background-repeat: no-repeat, no-repeat;
JFIDDLE DEMO

Simple answer:
You could either nest the span inside another span - with the outer span set to use the backup background image. If the inside span's background isn't available, then you'll see the outside one's
Better, more difficult answer:
You could achieve a similar result in pure CSS, by adding some psuedo content before the span, and then styling that to have the fallback background. However, this usually takes some trial and error to get it right;
Something lile
span.image:before{content:" "; background:url(backup.png); display: block; position:absolute;}

Well, I know that the actual tag has onload, onerror, and onabort events.
You could try loading it in an image, then if that succeeds, use JS to set the background property of the body.
EDIT: Never mind. I like his answer better.

Just declare the preferred default image after your background declaration:
.image
{
background: #000 url('http://www.example.com/images/image1.png') 0 0 no-repeat;
width: xxpx;
height: xxpx;
background-image: url('http://www.example.com/images/image1.png');
}
<span class="image"></span>
idk the dimensions of your img, so they are "xxpx"
working demo: http://jsfiddle.net/jalbertbowdenii/rJWwW/1/

How to override HTML image using CSS

I have my current code:
#content img[src="/img/test.gif"] {
background-image:url(dark-img.png) !important;
}
From my understanding !important; overrides existing values?
Why isn't this overriding the current HTML image in place there? The background shows up, behind the HTML image.
I want it in front of the HTML image, is this possible using CSS or JS?
Edit: For what its worth, im making a userscript that will modify the existing style of the site. So I do not have direct access to the HTML image.

You don't need javascript for image replacement! As long as you can identify the image by a CSS selector, you can use CSS to do the trick.
See the solution here
http://www.audenaerde.org/csstricks.html#imagereplacecss

Here is the code using only css:
<img src="tiger.jpg"
style="padding: 150px 200px 0px 0px;
background: url('butterfly.jpg');
background-size:auto;
width:0px;
height: 0px;">
sets the image size to 0x0,
adds a border of the desired size (150x200), and
uses your image as a background-image to fill.
If you upvote this answer, give #RobAu's answer an upvote, too.

The replacement of an image in CSS can be done in several ways.
Each of them has some drawbacks (like semantics, seo, browsercompatibility,...)
On this link 9 (nine!) different techniques are discussed in a very good way :
http://css-tricks.com/css-image-replacement/
If you are interested in css in general : the whole site is worth a look.

The background-image property, when applied to an image, refers to (drum roll ... ) the background-image of the image. It will always be behind the image.
If you want the image to appear in front of the image, you are going to have to use two images, or another container with a background-image that covers the first image.
BTW, it is bad practice to rely on !important for overriding. It can also be ineffective since 1) it can't override declarations in an element's style attribute, and 2) it only works if it can work based on the markup and the current CSS. In your case, all the huffing and puffing and !important declarations won't make an image do something it can't do.

I answered a similar question in another SO page..
https://robau.wordpress.com/2012/04/20/override-image-src-in-css/
<img src="linkToImage.jpg" class="egg">
.egg {
width: 100%;
height: 0;
padding: 0 0 200px 0;
background-image: url(linkToImage.jpg);
background-size: cover;
}
So effectively hiding the image and padding down the background. Oh what a hack but if you want an with alt text and a background that can scale without using Javascript?

Use your 'userscript' to change 'src' attribute value.
If there is an ID there, you can do this:
document.getElementById('TheImgId').src = 'yournewimagesrc';
If there is no ID:
var imgElements = document.getElementsByTagName('img');
Do iteration of imgElements. When its src value is match with your criteria, change the value with your own, do break.
Update:
Javascript:
<script language="javascript">
function ChangeImageSrc(oldSrc, newSrc) {
var imgElements = document.getElementsByTagName('img');
for (i = 0; i < imgElements.length; i++){
if (imgElements[i].src == oldSrc){
imgElements[i].src = newSrc;
break;
}
}
}
</script>
HTML:
<img src="http://i.stack.imgur.com/eu757.png" />
<img src="http://i.stack.imgur.com/IPB9t.png" />
<img src="http://i.stack.imgur.com/IPB9t.png" />
<script language="javascript">
setTimeout("ChangeImageSrc('http://i.stack.imgur.com/eu757.png', 'http://i.stack.imgur.com/IPB9t.png')", 5000);
</script>
Preview:
The first image will be replaced after 5 secs. Try Live Demo.

you'll have to place the first image as a background-image too. Then you can override it. You could do in a "standard" css file for the site, and every user gets its own, where he can override what he wants.

i agree with all the answers here, just thought id point out that 'browsers' such as IE won't like the img[src="/img/test.gif"] as a means of selecting the image. it would need a class or id.

The images shown in tags are in the foreground of the element, not the background, so setting a background image in an won't override the image; it'll just appear behind the main image, as you're seeing.
What you want to do is replace the image. Here's your options:
Start with an element with a background image, not an tag. Then changing the background image in CSS will replace it.
Start with an tag, but use Javascript to change the src attribute. (this can't be done in CSS, but is simple enough in JS)
EDIT:
Seeing your edit in the question, I'd suggest option 2 - use Javascript to change the src attribute. It's quite simple; something like this would do the trick:
document.getElementById('myimgelement').src='/newgraphic.jpg';

You should be able to replace it by just doing something like:
.image {
content: url('https://picsum.photos/seed/picsum/400');
width: 200px;
height: 200px;
}
Unfortunately seems that it does not work in Firefox :(