{"id":5165,"date":"2009-09-11T19:58:52","date_gmt":"2009-09-11T11:58:52","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=5165"},"modified":"2024-05-14T22:02:01","modified_gmt":"2024-05-14T14:02:01","slug":"dynamic-image-replacement-practical-techniques-and-tools","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/dynamic-image-replacement-practical-techniques-and-tools\/","title":{"rendered":"Dynamic Image Replacement: Practical Techniques and Tools"},"content":{"rendered":"<p><strong>Note:<\/strong> This post was first published on the 11th Sep, 2009.<\/p>\n<p>When it comes to web design, creativity of design should not be hold back by the limited choices of supported web fonts we call the <em><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/en.wikipedia.org\/wiki\/Web_typography#Web-safe_fonts\">web-safe fonts<\/a><\/em>. Designers should be free to use any fonts they prefer on titles and content.<\/p>\n<p>In 2005, dynamic image replacement was made popular with a technique called <strong>Scalable Inman Flash Replacement (sIFR)<\/strong>. Developed by <strong>Shaun Inman<\/strong>, sIFR take advantage of Javascript and Adobe Flash to allow web designers to use any custom fonts they like on the website and still maintain visibility to those who don\u2019t have that font. And as the web continues to evolve, today we have more alternative solutions using various technologies, just in case you are not quite a fan of Flash.<\/p>\n<p>Without further ado, let\u2019s take a look at some of the <strong>techniques to achieve Dynamic Image Replacements<\/strong>.<\/p>\n<h2>Commonly Used Techniques<\/h2>\n<p>Here are some of the most commonly practiced techniques for dynamic image replacements.<\/p>\n<h3>Scalable Inman Flash Replacement (sIFR)<\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/dynamic-image-replacement\/sifr2.png\" width=\"192\" height=\"116\" alt=\"sifr\"><\/figure>\n<p><strong><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/mikeindustries.com\/blog\/sifr\">sIFR<\/a><\/strong> is one of the most popular method to embed custom fonts on websites. It uses Javascript and Flash to generate a custom typeface for your website and allows the converted typeface to be selectable. Aside from that, converted typeface remains as text in source codes so search engines can still crawl them.<\/p>\n<p><strong>sIFR 2<\/strong> (recommended) is the current stable release, however if you are looking into implementing sIFR, you should also know that <strong>siFR 3<\/strong> beta is also available for download. It might be a little buggy but at least it solves the font-expansion problem of <strong>sIFR 2<\/strong>.<\/p>\n<p><strong>Tools for sIFR that might come in handy:<\/strong><\/p>\n<ul>\n<li><strong>sIFRvault<\/strong>\n    sIFRvault is a repository of sIFR fonts you can download.\n    <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/dynamic-image-replacement\/sifrvault.png\" width=\"400\" height=\"305\" alt=\"sifrvault\"><\/li>\n<li><strong><a rel=\"nofollow noopener\" target=\"_blank\" href=\"http:\/\/www.sifrgenerator.com\/\">sIFR Generator<\/a><\/strong>\n    Online tool that allows you to create sIFR .swf files with a few clicks of your mouse. Simply upload the TTF font of the font you want to convert, preview and download.<\/li>\n<\/ul>\n<h3>sIFR Lite<\/h3>\n<p>The original sIFR is 22k, so <strong>Dave<\/strong> decided to rework it using a more object-oriented approach, and the result? 3x smaller at 3.7k.<\/p>\n<h3>PHP + CSS Dynamic Text Replacement (P+C DTR)<\/h3>\n\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/dynamic-image-replacement\/PC-DTR.png\" width=\"500\" height=\"94\" alt=\"pcdtr\"><\/figure>\n<p>As the name suggest, this is a text replacement method that uses PHP and CSS that make use of the original method described by <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/alistapart.com\/articles\/dynatext\"><strong>Steward Rosenberger<\/strong><\/a>. It is also an enhancement from the previous version developed by <a rel=\"nofollow noopener\" target=\"_blank\" href=\"http:\/\/artypapers.com\/csshelppile\/pcdtr\/\"><strong>R. Marie Cox<\/strong><\/a> that doesn\u2019t support text wrapping and inner tags. Another cool thing about P+C DTR is, the image text can be customizable with CSS tags.<\/p>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/gist.github.com\/joaquingatica\/713768\">typeface.js<\/a><\/h3>\n<p><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/gist.github.com\/joaquingatica\/713768\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/dynamic-image-replacement\/typeface-js.png\" width=\"500\" height=\"280\" alt=\"typeface.js\"><\/a><\/p>\n<p>What makes <strong>typeface.js<\/strong> special is that they only use Javascript to embed custom fonts, and the style can be further customized with HTML and CSS; no Flash is required. It is open source and supports most browsers we are using these days, whether it\u2019s Safari, Firefox, IE (6 and above).<\/p>\n<p>Personally, after some experiments with typeface.js, we think there could be some potential room for improvements. Firstly, the fonts tend to render slightly different among different browsers. If you are using typeface.js, we suggest you do a cross-browser check before assuming what you see in Firefox will be what you see in Safari. Text are also not selectable with typeface.js.<\/p>\n<p>Custom fonts in typeface.js are not compiled; meaning users are able to download the fonts. That could lead to copyright problems. It\u2019s advised that you check thoroughly to make sure the fonts you are using are ok for redistribution.<\/p>\n<h3><strong><a rel=\"nofollow noopener\" target=\"_blank\" href=\"http:\/\/wiki.github.com\/sorccu\/cufon\/about\">Cufon<\/a><\/strong><\/h3>\n<p><a rel=\"nofollow noopener\" target=\"_blank\" href=\"http:\/\/wiki.github.com\/sorccu\/cufon\/about\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/dynamic-image-replacement\/cufon.png\" width=\"500\" height=\"288\" alt=\"cufon\"><\/a><\/p>\n<p>No Flash required, <strong>Cufon<\/strong> is a great alternative to sIFR and it\u2019s quite simple to implement. First, you use the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/cufon.shoqolate.com\/generate\/\">Cufon generator<\/a> to generate and customize the font you want, then you insert the Cufon Javascript in your source code and you tell the script which selectors you want the fonts to be customized.<\/p>\n<p>The biggest problem with Cufon would be the legal issue of using these custom fonts online. Since it\u2019s embedded within Javascript, it can be easily ripped by anyone who view the source code. Cufon custom fonts are not selectable; that\u2019s the other turn-off.<\/p>\n<h3><strong>Facelift<\/strong><\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/dynamic-image-replacement\/facelift.png\" width=\"500\" height=\"150\" alt=\"facelift\"><\/figure>\n<p>Also known as <strong>Facelift Image Replacement (FLIR)<\/strong>, it is another great method to sIFR that do no required Flash. Looks like very other alternative is hitting in sIFR\u2019s Flash issue.<\/p>\n<p>Facelift uses PHP and PHP\u2019s GD Library. They inherit the legacy problem of custom font replacements \u2013 unable to select the text. Aside from that, we think it\u2019s great too.<\/p>\n<h2>More Methods<\/h2>\n<p>The techniques above might be more widely used, but we\u2019ve noticed some other ways too to give convert your text into beautiful custom typefaces.<\/p>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/typeselect.org\/\">Type Select<\/a><\/h3>\n<p><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/typeselect.org\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/dynamic-image-replacement\/typeselect.png\" width=\"500\" height=\"230\" alt=\"typeselect\"><\/a><\/p>\n<p><strong>TypeSelect<\/strong> leverages on typeface.js, jQuery, the canvas, toDataURL, CSS background properties and real overlayed text to give a custom typeface on your website. Text selection works on Firefox, Safari and even Chrome but not IE.<\/p>\n<h3><strong>Swf Image Replacement (swfIR)<\/strong><\/h3>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/dynamic-image-replacement\/swfir.png\" width=\"400\" height=\"236\" alt=\"swfir\"><\/figure>\n<p><strong>swfIR<\/strong> gives you the ability to apply an assortment of visual effects to any or all images on your website. For example, you can add any images on your website and swfIR will add a rounder border, rotate the positioning or even add shadows to it.<\/p>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/css-tricks.com\/css-image-replacement\/\">Nine Techniques for CSS Image Replacement<\/a><\/h3>\n<p><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/css-tricks.com\/css-image-replacement\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/dynamic-image-replacement\/css-tricks-css-image-replacement.png\" width=\"498\" height=\"368\" alt=\"css-tricks.com\/css-image-replacement\"><\/a><\/p>\n<p>These are not dynamic text replacements, but <strong>Chris Coyier<\/strong> demonstrates as many as nine different CSS techniques to replace text with images; each with a report card listing the condition of \u2013 what if images are on\/off, CSS is on\/off.<\/p>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"http:\/\/www.fontburner.com\/\">Font Burner<\/a><\/h3>\n<p><a rel=\"nofollow noopener\" target=\"_blank\" href=\"http:\/\/www.fontburner.com\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/dynamic-image-replacement\/font-burner.png\" width=\"500\" height=\"110\" alt=\"font burner\"><\/a><\/p>\n<p><strong>Font Burner<\/strong> leverage on Scalable Inman Flash Replacement (sIFR) to change your titles into custom font. All you need to do is find the font, select it and insert the code into the head and your title will be changed in no time.<\/p>\n<h2>WordPress + Dynamic Image Replacement<\/h2>\n<p>If you are a WordPress user looking for a dynamic image replacement solution for the title or even the content of your blog, chances are there is a plugin for them. Here are some text replacement plugins we have come to know about.<\/p>\n<p><strong><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/wordpress.org\/\/extend\/plugins\/wp-sifr\/\">sIFR WordPress Plugin \u2013 WP sIFR<\/a><\/strong><\/p>\n<p><strong>WP sIFR<\/strong> was created to remove the complications from getting custom fonts on a WordPress site. With WP sIFR, you only have to upload your SWF font file to the plugin directory and then login, activate it, and configure its styles all in the Settings panel.<\/p>\n<p><strong><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/wordpress.org\/\/extend\/plugins\/wp-cufon\/\">Cufon WordPress Plugin \u2013 WP-Cufon<\/a><\/strong><\/p>\n<p>The only thing you have to do is converting your fontfiles and upload them into the plugins directory. You can enable the objects you want to get replaced in the Admin Menu of WordPress.<\/p>\n<p><strong><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/wordpress.org\/\/extend\/plugins\/facelift-image-replacement\/\">Facelift Image Replacement (FLIR) WordPress Plugin<\/a><\/strong><\/p>\n<p><strong>FLIR<\/strong> for WordPress is SEO friendly and only renders the image in the browser if JavaScript is enabled. Your HTML\/XHTML code remains unchanged, leaving your head tags readable by search engines and the page readable by those without JavaScript.<\/p>\n<p><strong><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/wordpress.org\/\/extend\/plugins\/font-burner-control-panel\/\">Font Burner Control Panel<\/a><\/strong><\/p>\n<p>The <strong>Font Burner<\/strong> Control Panel plugin allows you to easily add any of the 1000+ free fonts available on the Font Burner website to your WordPress theme.<\/p>","protected":false},"excerpt":{"rendered":"<p>Note: This post was first published on the 11th Sep, 2009. When it comes to web design, creativity of design should not be hold back by the limited choices of supported web fonts we call the web-safe fonts. Designers should be free to use any fonts they prefer on titles and content. In 2005, dynamic&hellip;<\/p>\n","protected":false},"author":9,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3397],"tags":[894,866],"topic":[4521],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Dynamic Image Replacement: Practical Techniques and Tools - Hongkiat<\/title>\n<meta name=\"description\" content=\"Note: This post was first published on the 11th Sep, 2009. When it comes to web design, creativity of design should not be hold back by the limited\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/dynamic-image-replacement-practical-techniques-and-tools\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Dynamic Image Replacement: Practical Techniques and Tools\" \/>\n<meta property=\"og:description\" content=\"Note: This post was first published on the 11th Sep, 2009. When it comes to web design, creativity of design should not be hold back by the limited\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/dynamic-image-replacement-practical-techniques-and-tools\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2009-09-11T11:58:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-05-14T14:02:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/dynamic-image-replacement\/sifr2.png\" \/>\n<meta name=\"author\" content=\"Hongkiat.com\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Hongkiat.com\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/dynamic-image-replacement-practical-techniques-and-tools\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/dynamic-image-replacement-practical-techniques-and-tools\\\/\"},\"author\":{\"name\":\"Hongkiat.com\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/7cc686597d92f9086729e4bcc1577ba3\"},\"headline\":\"Dynamic Image Replacement: Practical Techniques and Tools\",\"datePublished\":\"2009-09-11T11:58:52+00:00\",\"dateModified\":\"2024-05-14T14:02:01+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/dynamic-image-replacement-practical-techniques-and-tools\\\/\"},\"wordCount\":1170,\"commentCount\":46,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/dynamic-image-replacement-practical-techniques-and-tools\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/dynamic-image-replacement\\\/sifr2.png\",\"keywords\":[\"Fonts\",\"Typography\"],\"articleSection\":[\"Desktop\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/dynamic-image-replacement-practical-techniques-and-tools\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/dynamic-image-replacement-practical-techniques-and-tools\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/dynamic-image-replacement-practical-techniques-and-tools\\\/\",\"name\":\"Dynamic Image Replacement: Practical Techniques and Tools - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/dynamic-image-replacement-practical-techniques-and-tools\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/dynamic-image-replacement-practical-techniques-and-tools\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/dynamic-image-replacement\\\/sifr2.png\",\"datePublished\":\"2009-09-11T11:58:52+00:00\",\"dateModified\":\"2024-05-14T14:02:01+00:00\",\"description\":\"Note: This post was first published on the 11th Sep, 2009. When it comes to web design, creativity of design should not be hold back by the limited\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/dynamic-image-replacement-practical-techniques-and-tools\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/dynamic-image-replacement-practical-techniques-and-tools\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/dynamic-image-replacement-practical-techniques-and-tools\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/dynamic-image-replacement\\\/sifr2.png\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/dynamic-image-replacement\\\/sifr2.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/dynamic-image-replacement-practical-techniques-and-tools\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Dynamic Image Replacement: Practical Techniques and Tools\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/7cc686597d92f9086729e4bcc1577ba3\",\"name\":\"Hongkiat.com\",\"description\":\"This post is published by an HKDC (hongkiat.com) staff. (I.e., intern, staff writer, or editor).\",\"sameAs\":[\"https:\\\/\\\/www.hongkiat.com\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/com\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Dynamic Image Replacement: Practical Techniques and Tools - Hongkiat","description":"Note: This post was first published on the 11th Sep, 2009. When it comes to web design, creativity of design should not be hold back by the limited","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/dynamic-image-replacement-practical-techniques-and-tools\/","og_locale":"en_US","og_type":"article","og_title":"Dynamic Image Replacement: Practical Techniques and Tools","og_description":"Note: This post was first published on the 11th Sep, 2009. When it comes to web design, creativity of design should not be hold back by the limited","og_url":"https:\/\/www.hongkiat.com\/blog\/dynamic-image-replacement-practical-techniques-and-tools\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2009-09-11T11:58:52+00:00","article_modified_time":"2024-05-14T14:02:01+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/dynamic-image-replacement\/sifr2.png","type":"","width":"","height":""}],"author":"Hongkiat.com","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Hongkiat.com","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/dynamic-image-replacement-practical-techniques-and-tools\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/dynamic-image-replacement-practical-techniques-and-tools\/"},"author":{"name":"Hongkiat.com","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/7cc686597d92f9086729e4bcc1577ba3"},"headline":"Dynamic Image Replacement: Practical Techniques and Tools","datePublished":"2009-09-11T11:58:52+00:00","dateModified":"2024-05-14T14:02:01+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/dynamic-image-replacement-practical-techniques-and-tools\/"},"wordCount":1170,"commentCount":46,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/dynamic-image-replacement-practical-techniques-and-tools\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/dynamic-image-replacement\/sifr2.png","keywords":["Fonts","Typography"],"articleSection":["Desktop"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/dynamic-image-replacement-practical-techniques-and-tools\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/dynamic-image-replacement-practical-techniques-and-tools\/","url":"https:\/\/www.hongkiat.com\/blog\/dynamic-image-replacement-practical-techniques-and-tools\/","name":"Dynamic Image Replacement: Practical Techniques and Tools - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/dynamic-image-replacement-practical-techniques-and-tools\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/dynamic-image-replacement-practical-techniques-and-tools\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/dynamic-image-replacement\/sifr2.png","datePublished":"2009-09-11T11:58:52+00:00","dateModified":"2024-05-14T14:02:01+00:00","description":"Note: This post was first published on the 11th Sep, 2009. When it comes to web design, creativity of design should not be hold back by the limited","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/dynamic-image-replacement-practical-techniques-and-tools\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/dynamic-image-replacement-practical-techniques-and-tools\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/dynamic-image-replacement-practical-techniques-and-tools\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/dynamic-image-replacement\/sifr2.png","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/dynamic-image-replacement\/sifr2.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/dynamic-image-replacement-practical-techniques-and-tools\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Dynamic Image Replacement: Practical Techniques and Tools"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/7cc686597d92f9086729e4bcc1577ba3","name":"Hongkiat.com","description":"This post is published by an HKDC (hongkiat.com) staff. (I.e., intern, staff writer, or editor).","sameAs":["https:\/\/www.hongkiat.com"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/com\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-1lj","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/5165","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=5165"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/5165\/revisions"}],"predecessor-version":[{"id":71854,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/5165\/revisions\/71854"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=5165"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=5165"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=5165"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=5165"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}