1x1 Pixel 的圖片服務

JavaScript 想要跨 Domain 做 Image beacon，經常需要使用 1x1 px 大小的圖片。

臨時需要本來想自己做一張，沒想到居然有個服務可以產生，可以產生各種顏色、透明都可以，然後還可以 base64 輸出~

1x1 Pixel 的圖片服務

產生透明 Pixel 的服務：Transparent PNG Pixel Base64 Encoded

產生的結果如下：

• Image 1x1 pixel Beacon
  • iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+fCQAFBwIC3vK9zQAAAABJRU5ErkJggg==
• PNG
  • CSS：background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+fCQAFBwIC3vK9zQAAAABJRU5ErkJggg==);
  • HTML IMG：<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+fCQAFBwIC3vK9zQAAAABJRU5ErkJggg==">
• GIF + 透明
  • data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==
  • HTML IMG：<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==">

SVG 的寫法超短

• CSS：background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3C/svg%3E");
• HTML IMG：<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3C/svg%3E">
• data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3C/svg%3E

作者: Tsung

對新奇的事物都很有興趣, 喜歡簡單的東西, 過簡單的生活. 檢視「Tsung」的全部文章