I have recently come across the webp picture format and the use of the tag to use .webp images in supporting browsers and .jpg in non-supporting. But I have run onto a frustrating problem. Codepen pasted below.
The “logo.webp” is displayed with a thin sliver of pale colour along the bottom and left. Looking at the developer tools the image has a height of 100px but has a height of 104px. If I alter the height in the image and source tags to 104px then the height of increases to 108px.
The sliver on the left and bottom of the image disappears if I just use the <img… line, removing the and lines.
As Gandalf said you need to fix the html errors as your attributes are wrong in those img and picture tags but they aren’t really the cause of the problem.
Images are inline elements and are stacked on the baseline (not the bottom) of an element and they also respect the white space around them hence why you get a gap at the bottom and the side.
If you set the the image to display:block the issue will go away.
.logo{display:block}
The reason why that if you remove the picture element and just use the img tag the problem doesn’t occur is because the image is now a flex item as it is a direct child of the header which is a flex box and as such flex-items have the equivalent of a block display by default. When the image is inside a picture element it is no longer a direct child of flexbox and its display isn’t altered.
I usually set all my images to display:block in my initial set up ( img{display:block} ) because most times that’s what required. If you need inline images then you can make special classes for them as required.