始めるチュートリアル開発者ガイドimgixを使用したクリエイティブな導入事例

imgixを使用したクリエイティブなショーケース

多くのお客様がimgixを非常にクリエイティブな方法で使用しているため、他の多くの方々にもインスピレーションを与えるために共有したいと思います。

レシート

テキストエンドポイントを使用したレシート

https://assets.imgix.net/~text?txt-size=20&txt-font=monospace&txt-pad=20&w=500&bg=efefef&txt=+++++++++Delivery+%7C+Paid+%28UPI%29+++++++++++--------------------------------------+%0A+++++++++Cineplanet+Food+Court++++++++++%0A%0A+++++++++++++Token+No%3A+001++++++++++++++%0A%0A+++++++Kompally%2C+Medchal+Road%2C+5++++++++%0A+++++++++++++++++00014+++++++++++++++++++--------------------------------------+%0A+++++++Date%3A+14%2F12%2F2023+10%3A48%3A06++++++++%0A++++++++Phone+Number%3A+0123456789+++++++++--------------------------------------+%0A++Item+Name++++++++++Qty.+++Price+%28Rs%29+++%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D+%0A++Salted+Popcorn+B+++1+++++++++++70.00++%0A++ox+30+gms++++++++++++++++++++++++++++++--------------------------------------+%0A++Delivery+Charges+%28Rs%29%3A++++++++++0.00+++--------------------------------------+%0A++Grand+Total+%28Rs%29%3A++++++++++++++70.00++%0A+--------------------------------------

ogImageへの見出しの挿入

ブログ記事

ogImageタグ

<meta
  property="og:image"
  content="https://qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png?ixlib=rb-4.0.0&amp;w=1200&amp;mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JUUzJTgwJTkwTExNJUUzJTgxJUFFJUU3JUEwJTk0JUU3JUE5JUI2JUU4JTgwJTg1JUU1JTkwJTkxJUUzJTgxJTkxJUUzJTgwJTkxNDAwJUU2JTlDJUFDJUUzJTgyJTkyJUU4JUI2JTg1JUUzJTgxJTg4JUUzJTgyJThCTExNJUUzJTgxJUFCJUU5JTk2JUEyJUUzJTgxJTk5JUUzJTgyJThCJUU4JUFCJTk2JUU2JTk2JTg3JUUzJTgxJUFFJUUzJTgzJUFBJUUzJTgyJUI5JUUzJTgzJTg4JUUzJTgyJTkyJUU1JTg1JUFDJUU5JTk2JThCJUUzJTgzJUJCJUU2JTlCJUI0JUU2JTk2JUIwJUUzJTgxJTk3JUUzJTgxJUE2JUUzJTgxJTg0JUUzJTgxJUJFJUUzJTgxJTk5JnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz03NWIxZmZiZGYyNTgwNDg2ZTkwN2Y4NThhMzE5MzIxMA&amp;mark-x=142&amp;mark-y=112&amp;blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTcxNiZ0eHQ9JTQwc2h1cmVfX18mdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zMiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWY5Y2U1M2QwNTEyZDJhOTA1YjE2OTU4NWE5YTM5OGYx&amp;blend-x=142&amp;blend-y=491&amp;blend-mode=normal&amp;s=6d763c6a76ddd8b6d47c601ff300a730"
/>

出力結果

ogimageタグ出力画像

美しい「マーク」と「ブレンド」の使用

背景画像

犬の壁紙

透明背景のインテリア

インテリア画像

グレー背景とシャドウ付きのインテリア

シャドウ付きのインテリア画像

微調整された合成画像

合成画像

https://assets.imgix.net/docs/showcase/dog_wallpaper.jpeg?w=835&h=620&fit=crop&blend-w=835&blend-h=620&blend-fit=scale&blend-mode=multiply&mark-w=835&mark-h=620&mark-fit=scale&mark-pad=0&mark=https://assets.imgix.net/docs/showcase/interior.png&blend=https://assets.imgix.net/docs/showcase/interior_shadow.jpeg&auto=format,compress

半透明と不透明を使用した「背景色」