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への見出しの挿入
ブログ記事 (opens in a new tab)
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&w=1200&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JUUzJTgwJTkwTExNJUUzJTgxJUFFJUU3JUEwJTk0JUU3JUE5JUI2JUU4JTgwJTg1JUU1JTkwJTkxJUUzJTgxJTkxJUUzJTgwJTkxNDAwJUU2JTlDJUFDJUUzJTgyJTkyJUU4JUI2JTg1JUUzJTgxJTg4JUUzJTgyJThCTExNJUUzJTgxJUFCJUU5JTk2JUEyJUUzJTgxJTk5JUUzJTgyJThCJUU4JUFCJTk2JUU2JTk2JTg3JUUzJTgxJUFFJUUzJTgzJUFBJUUzJTgyJUI5JUUzJTgzJTg4JUUzJTgyJTkyJUU1JTg1JUFDJUU5JTk2JThCJUUzJTgzJUJCJUU2JTlCJUI0JUU2JTk2JUIwJUUzJTgxJTk3JUUzJTgxJUE2JUUzJTgxJTg0JUUzJTgxJUJFJUUzJTgxJTk5JnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz03NWIxZmZiZGYyNTgwNDg2ZTkwN2Y4NThhMzE5MzIxMA&mark-x=142&mark-y=112&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTcxNiZ0eHQ9JTQwc2h1cmVfX18mdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zMiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWY5Y2U1M2QwNTEyZDJhOTA1YjE2OTU4NWE5YTM5OGYx&blend-x=142&blend-y=491&blend-mode=normal&s=6d763c6a76ddd8b6d47c601ff300a730"
/>出力結果
美しい「マーク」と「ブレンド」の使用
背景画像
透明背景のインテリア
グレー背景とシャドウ付きのインテリア
微調整された合成画像
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