{"id":32043,"date":"2017-06-23T21:01:36","date_gmt":"2017-06-23T13:01:36","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=32043"},"modified":"2022-07-13T19:41:55","modified_gmt":"2022-07-13T11:41:55","slug":"build-responsive-images-responsifyjs","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/build-responsive-images-responsifyjs\/","title":{"rendered":"Responsive Images Made Easy with ResponsifyJS"},"content":{"rendered":"<p>The modern web should be 100% responsive and newer libraries are making this increasingly possible.<\/p>\n<p>With free plugins, such as <strong><a href=\"https:\/\/github.com\/wentin\/ResponsifyJS\" target=\"_blank\" rel=\"noopener\">ResponsifyJS<\/a><\/strong>, it\u2019s even easier to get your websites working on all devices. This <strong>free jQuery plugin<\/strong> takes a container of images and <strong>dynamically rearranges them<\/strong> based on varying screen sizes.<\/p>\n<p>Since different containers <strong>hold images differently<\/strong>, they can resize in very strange ways. Sometimes, you\u2019ll have photos of people and their faces can get cut off when resized on mobile.<\/p>\n<p class=\"recommended_top\">\n\t\t\t\t\t<strong>Read Also:<\/strong>\u00a0\n\t\t\t\t\t<a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/html5-picture\/\">How to Use HTML5 &lt;picture&gt; to Get Responsive Image<\/a>\n\t\t\t\t<\/p>\n<p>The Responsify plugin was created to solve this exact problem. It can work automatically but the true magic lies in <strong>defining your own focus area<\/strong> on the picture.<\/p>\n<p>It uses an <strong>internal system of decimal descriptions<\/strong> to find where the focus of the image should be. For example, you can <strong>define positions<\/strong> such as <code>data-focus-top<\/code> which \u201cblocks in\u201d a certain segment of the image.<\/p>\n<p>This data needs to be passed <strong>in the form of decimals<\/strong>, for instance a .5 decimal targets 50% of the image (left\/right or top\/bottom). Naturally, this is pretty confusing to do by yourself. But, there\u2019s a <strong>free <a href=\"https:\/\/responsifyjs.space\/app\/\" target=\"_blank\" rel=\"noopener\">Responsify app<\/a><\/strong> that lets you <strong>calculate the positions dynamically<\/strong> in your browser.<\/p>\n<p>Just upload a picture, define the focus area, then copy\/paste the image code into your website. The Responsify plugin will have all the data it needs to properly resize the image on smaller screens.<\/p>\n<figure><a href=\"https:\/\/responsifyjs.space\/app\/\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/build-responsive-images-responsifyjs\/02-jquery-responsify-plugin.jpg\" alt=\"Responsify app\" width=\"800\" height=\"732\"><\/a><\/figure>\n<p>You can find quite a few <strong>live demo links<\/strong> in the <a href=\"https:\/\/github.com\/wentin\/ResponsifyJS\" target=\"_blank\" rel=\"noopener\">GitHub repo<\/a>, including code snippets to copy\/paste into your site.<\/p>\n<p>This plugin is not the perfect solution for every project. Sometimes, you\u2019ll <em>want<\/em> images to resize without fixed focus areas. But, if you\u2019re using <strong>masonry grids with jQuery<\/strong> it doesn\u2019t hurt to add ResponsifyJS to your stack.<\/p>\n<p>To learn more, visit the <a href=\"https:\/\/responsifyjs.space\/\" target=\"_blank\" rel=\"noopener\">plugin homepage<\/a> for a live demo, a download link, and a full setup guide.<\/p>\n<p class=\"note\"><strong>Read Also:<\/strong> <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/serving-responsive-images\/\" rel=\"noopener\">5 Methods To Serve True Responsive Images<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>The modern web should be 100% responsive and newer libraries are making this increasingly possible. With free plugins, such as ResponsifyJS, it\u2019s even easier to get your websites working on all devices. This free jQuery plugin takes a container of images and dynamically rearranges them based on varying screen sizes. Since different containers hold images&hellip;<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3393],"tags":[4646,2066],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Responsive Images Made Easy with ResponsifyJS - Hongkiat<\/title>\n<meta name=\"description\" content=\"The modern web should be 100% responsive and newer libraries are making this increasingly possible. With free plugins, such as ResponsifyJS, it&#039;s even\" \/>\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\/build-responsive-images-responsifyjs\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Responsive Images Made Easy with ResponsifyJS\" \/>\n<meta property=\"og:description\" content=\"The modern web should be 100% responsive and newer libraries are making this increasingly possible. With free plugins, such as ResponsifyJS, it&#039;s even\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/build-responsive-images-responsifyjs\/\" \/>\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=\"2017-06-23T13:01:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-07-13T11:41:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/build-responsive-images-responsifyjs\/02-jquery-responsify-plugin.jpg\" \/>\n<meta name=\"author\" content=\"Jake Rocheleau\" \/>\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=\"Jake Rocheleau\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/build-responsive-images-responsifyjs\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/build-responsive-images-responsifyjs\\\/\"},\"author\":{\"name\":\"Jake Rocheleau\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\"},\"headline\":\"Responsive Images Made Easy with ResponsifyJS\",\"datePublished\":\"2017-06-23T13:01:36+00:00\",\"dateModified\":\"2022-07-13T11:41:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/build-responsive-images-responsifyjs\\\/\"},\"wordCount\":322,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/build-responsive-images-responsifyjs\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/build-responsive-images-responsifyjs\\\/02-jquery-responsify-plugin.jpg\",\"keywords\":[\"Mobile Website Design &amp; Dev\",\"Responsive Web Design\"],\"articleSection\":[\"Toolkit\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/build-responsive-images-responsifyjs\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/build-responsive-images-responsifyjs\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/build-responsive-images-responsifyjs\\\/\",\"name\":\"Responsive Images Made Easy with ResponsifyJS - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/build-responsive-images-responsifyjs\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/build-responsive-images-responsifyjs\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/build-responsive-images-responsifyjs\\\/02-jquery-responsify-plugin.jpg\",\"datePublished\":\"2017-06-23T13:01:36+00:00\",\"dateModified\":\"2022-07-13T11:41:55+00:00\",\"description\":\"The modern web should be 100% responsive and newer libraries are making this increasingly possible. With free plugins, such as ResponsifyJS, it's even\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/build-responsive-images-responsifyjs\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/build-responsive-images-responsifyjs\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/build-responsive-images-responsifyjs\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/build-responsive-images-responsifyjs\\\/02-jquery-responsify-plugin.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/build-responsive-images-responsifyjs\\\/02-jquery-responsify-plugin.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/build-responsive-images-responsifyjs\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Responsive Images Made Easy with ResponsifyJS\"}]},{\"@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\\\/966b2daea15283b4145e71aa98a82c2a\",\"name\":\"Jake Rocheleau\",\"description\":\"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers\",\"sameAs\":[\"https:\\\/\\\/www.hongkiat.com\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/jake\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Responsive Images Made Easy with ResponsifyJS - Hongkiat","description":"The modern web should be 100% responsive and newer libraries are making this increasingly possible. With free plugins, such as ResponsifyJS, it's even","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\/build-responsive-images-responsifyjs\/","og_locale":"en_US","og_type":"article","og_title":"Responsive Images Made Easy with ResponsifyJS","og_description":"The modern web should be 100% responsive and newer libraries are making this increasingly possible. With free plugins, such as ResponsifyJS, it's even","og_url":"https:\/\/www.hongkiat.com\/blog\/build-responsive-images-responsifyjs\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2017-06-23T13:01:36+00:00","article_modified_time":"2022-07-13T11:41:55+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/build-responsive-images-responsifyjs\/02-jquery-responsify-plugin.jpg","type":"","width":"","height":""}],"author":"Jake Rocheleau","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Jake Rocheleau","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/build-responsive-images-responsifyjs\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/build-responsive-images-responsifyjs\/"},"author":{"name":"Jake Rocheleau","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a"},"headline":"Responsive Images Made Easy with ResponsifyJS","datePublished":"2017-06-23T13:01:36+00:00","dateModified":"2022-07-13T11:41:55+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/build-responsive-images-responsifyjs\/"},"wordCount":322,"commentCount":2,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/build-responsive-images-responsifyjs\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/build-responsive-images-responsifyjs\/02-jquery-responsify-plugin.jpg","keywords":["Mobile Website Design &amp; Dev","Responsive Web Design"],"articleSection":["Toolkit"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/build-responsive-images-responsifyjs\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/build-responsive-images-responsifyjs\/","url":"https:\/\/www.hongkiat.com\/blog\/build-responsive-images-responsifyjs\/","name":"Responsive Images Made Easy with ResponsifyJS - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/build-responsive-images-responsifyjs\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/build-responsive-images-responsifyjs\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/build-responsive-images-responsifyjs\/02-jquery-responsify-plugin.jpg","datePublished":"2017-06-23T13:01:36+00:00","dateModified":"2022-07-13T11:41:55+00:00","description":"The modern web should be 100% responsive and newer libraries are making this increasingly possible. With free plugins, such as ResponsifyJS, it's even","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/build-responsive-images-responsifyjs\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/build-responsive-images-responsifyjs\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/build-responsive-images-responsifyjs\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/build-responsive-images-responsifyjs\/02-jquery-responsify-plugin.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/build-responsive-images-responsifyjs\/02-jquery-responsify-plugin.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/build-responsive-images-responsifyjs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Responsive Images Made Easy with ResponsifyJS"}]},{"@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\/966b2daea15283b4145e71aa98a82c2a","name":"Jake Rocheleau","description":"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers","sameAs":["https:\/\/www.hongkiat.com"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/jake\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-8kP","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/32043","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\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=32043"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/32043\/revisions"}],"predecessor-version":[{"id":60399,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/32043\/revisions\/60399"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=32043"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=32043"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=32043"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=32043"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}