Skip to content

Instantly share code, notes, and snippets.

@kevinweber

kevinweber/img

Last active May 7, 2021 07:47
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kevinweber/e2160c586ac13827d29bbd28669a35a8 to your computer and use it in GitHub Desktop.
Save kevinweber/e2160c586ac13827d29bbd28669a35a8 to your computer and use it in GitHub Desktop.
Download ZIP
1:1 (and other) ratio placeholder image / pixel / svg. Generate custom sizes via http://png-pixel.com/
Raw
img
<!--/* This is a 1x1 sized PNG */-->
<img class="ratio" alt="" aria-hidden="true" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=">
<!--/* This is a 2x1 sized PNG */-->
<img class="ratio" alt="" aria-hidden="true" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAABCAQAAABeK7cBAAAAC0lEQVR42mNkAAIAAAoAAv/lxKUAAAAASUVORK5CYII=">
<!--/* This is a 3x1 sized PNG */-->
<img class="ratio" alt="" aria-hidden="true" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAABCAQAAACx6dw/AAAAC0lEQVR42mNkAAMAAA4AAjOwv9wAAAAASUVORK5CYII=">
<!--/* This is a 4x3 sized PNG */-->
<img class="ratio" alt="" aria-hidden="true" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAQAAAAe/WZNAAAADklEQVR42mNkgAJGDAYAAFEABCaLYqoAAAAASUVORK5CYII=">
<!--/* This is a 16x9 sized PNG */-->
<img class="ratio" alt="" aria-hidden="true" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJCAQAAACRI2S5AAAAEElEQVR42mNkIAAYRxWAAQAG9gAKqv6+AwAAAABJRU5ErkJggg==">
<!--/* This is a 9x16 sized PNG */-->
<img class="ratio" alt="" aria-hidden="true" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAQAQAAAADsM2juAAAAAnRSTlMAAQGU/a4AAAANSURBVHgBY/jfQBICAELGF/HHpM2ZAAAAAElFTkSuQmCC">
Raw
svg
<svg viewBox="0 0 3 2" />
<svg viewBox={'0 0 1 ${ratio}'} />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment