{"id":21220,"date":"2014-03-25T13:03:55","date_gmt":"2014-03-25T13:03:55","guid":{"rendered":"http:\/\/website_screenshot_creation_and_manipulation_with_url2png_and_cloudinary"},"modified":"2025-03-30T12:49:13","modified_gmt":"2025-03-30T19:49:13","slug":"website_screenshot_creation_and_manipulation_with_url2png_and_cloudinary","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/website_screenshot_creation_and_manipulation_with_url2png_and_cloudinary","title":{"rendered":"Website screenshot creation and transformation with URL2PNG and Cloudinary"},"content":{"rendered":"
Thumbnails of website screenshots are a common visual design element. Search engines, such as Google, display webpage screenshots in their search results. Social news sites, such as DZone, embed screenshot thumbnails of shared pages. Bloggers and technology news sites embed screenshots of company websites and online services they discuss in their posts. Development companies embed screenshots of websites they helped develop.<\/div>\n
<\/div>\n

The Challenges of Embedding A Screenshot<\/h2>\n
<\/div>\n
Embedding a screenshot in your website is quite a hassle. You\u2019ll need to install a screen capture solution, browse to the web page in question, capture the relevant screen part, open the screenshot image in a graphic editor such as Photoshop, resize and crop the image, add borders and shadows, add arrows and other notation elements, save the resulting image file, upload the image to your CMS and embed it in the relevant HTML code.<\/div>\n
<\/div>\n
While manually creating a screenshot is somewhat time-consuming, the challenges involved in dynamically generating perfect screenshots for many web pages are much more significant.<\/div>\n
<\/div>\n
In this blog post we wanted to explain how you can use Cloudinary with its new URL2PNG<\/strong><\/a>\u00a0add-on to dynamically generate screenshots of any website. You can use Cloudinary’s rich set of cloud-based image transformation capabilities to resize the screenshot, crop it, transform it using various filters and effects and seamlessly deliver the screenshot thumbnails to your users via a fast CDN.<\/div>\n
<\/div>\n
Screenshot generation using Cloudinary\u2019s URL2PNG add-on are performed synchronously. This should dramatically simplify the process of adding screenshot thumbnails to your website as you’re not required to display a placeholder until a screenshot is fully generated.<\/div>\n
<\/div>\n
\"URL2PNG<\/div>\n

Screenshot creation\u00a0<\/span><\/h2>\n
Screenshots creation with URL2PNG is done using Cloudinary’s transformation\u00a0and delivery URLs. You need to set the image type to ‘url2png<\/strong><\/span>‘ and specify the URL of the remote website. To ensure that your Cloudinary account only captures screenshots of allowed URLs, you should either use Cloudinary’s explicit authenticated API or sign the dynamic URL with the API Secret<\/a> of your Cloudinary account.<\/div>\n
<\/div>\n
For example, the following URL captures a screenshot of ‘http:\/\/cloudinary.com<\/strong>‘ on-the-fly, stores the generated image in the cloud and delivered it optimized and cached via a CDN. You can see a scaled down sample of the generated screenshot image below.<\/div>\n
<\/div>\n
https:\/\/res.cloudinary.com\/demo\/<\/span>image\/url2png\/s–Kveu6Noy–\/<\/span>http:\/\/cloudinary.com<\/strong><\/div>\n
<\/div>\n
\"Screenshot<\/div>\n
<\/div>\n
<\/div>\n
You can generate such URLs, with or without their HTML image tags, using Cloudinary’s client libraries for Ruby on Rails<\/span><\/a>, <\/span>Python & Django<\/span><\/a>, <\/span>PHP<\/span><\/a>, <\/span>Node.js<\/span><\/a>, <\/span>jQuery<\/span><\/a>, <\/span>Java<\/span><\/a>, <\/span>.NET<\/span><\/a>, <\/span>iOS<\/span><\/a>, <\/span>Android<\/span><\/a> and <\/span>Scala<\/span>.<\/span><\/div>\n
<\/div>\n
The following sample code embeds an HTML image tag with a dynamic screenshot creation URL:<\/div>\n
<\/div>\n
Ruby on Rails:<\/div>\n
<%= cl_image_tag(\"http:\/\/cloudinary.com\", :sign_url => true, :type => \"url2png\") %>\n<\/pre>\n
PHP:<\/div>\n
<?php echo cloudinary_url(\"http:\/\/cloudinary.com\",\u00a0\n\u00a0 array(\"type\" => \"url2png\", \"sign_url\" => true)); ?>\n<\/pre>\n
Python:<\/div>\n
cloudinary.CloudinaryImage(\"http:\/\/cloudinary.com\", type = \"url2png\").build_url(\n\u00a0 sign_url = True)\n<\/pre>\n
Node.js:<\/div>\n
cloudinary.url(\"http:\/\/cloudinary.com\",\u00a0\n\u00a0 { type: \"url2png\",\n\u00a0 \u00a0 sign_url: true });\n<\/pre>\n
You can also generate screenshot thumbnails of websites that require query strings (URL parameters). The example below captures a screenshot of ‘http:\/\/www.bing.com\/search?q=dogs<\/strong>‘. \u00a0Cloudinary’s client libraries automatically encodes the special characters to ensure a valid URL:<\/div>\n
<%= cl_image_tag(\"http:\/\/www.bing.com\/search?q=dogs\", \n                 :sign_url => true, :type => \"url2png\") %>\n<\/pre>\n
https:\/\/res.cloudinary.com\/demo\/image\/url2png\/<\/span>s–OflFn9CX–\/<\/span>http:\/\/www.bing.com\/search%3Fq=dogs<\/strong><\/div>\n
<\/div>\n
\"URL2PNG<\/a><\/div>\n
<\/div>\n
<\/div>\n
Mobile website screenshots<\/h2>\n
Modern websites sometimes render pages differently when viewed on mobile devices. So far we’ve shown how you can capture website screenshots as viewed on a desktop machine. We’ll now show how to capture screenshots of websites as displayed on mobile devices.<\/div>\n
<\/div>\n
Any URL2PNG parameter<\/a>\u00a0can be specified when building Cloudinary URLs of URL2PNG screenshots. Parameters are prefixed with ‘\/url2png\/<\/strong>‘ and are of the format ‘key1=value1|key2=value2<\/strong>‘.<\/div>\n
<\/div>\n
The following code sample returns a dynamic URL that generates a screenshot as displayed on an iPhone 5 device. The ‘view_port<\/strong>‘ parameter is set to 640×1136, the user agent<\/strong> is set to the mobile Safari’s user agent and we also request non full page<\/strong> capturing.<\/div>\n
<%= cl_image_tag(\"http:\/\/www.bing.com\/search?q=dogs\/url2png\/viewport=640x1136|fullpage=false|user_agent=Mozilla\/5.0 (iPhone; CPU iPhone OS 7_0 like Mac OS X; en-us) AppleWebKit\/537.51.1 (KHTML, like Gecko) Version\/7.0 Mobile\/11A465 Safari\/9537.53\", \n                 :sign_url => true, :type => \"url2png\") %>\n<\/pre>\n
https:\/\/demo-res.cloudinary.com\/image\/url2png\/<\/span>s–oZYfCoKo–\/<\/span>http:\/\/www.bing.com\/search%3Fq%3Ddogs\/url2png\/viewport%3D640x1136%7Cfullpage%3Dfalse%7Cuser_agent%3DMozilla\/5.0%20%28iPhone%3B%20CPU%20iPhone%20OS%207_0%20like%20Mac%20OS%20X%3B%20en-us%29%20AppleWebKit\/537.51.1%20%28KHTML%2C%20like%20Gecko%29%20Version\/7.0%20Mobile\/11A465%20Safari\/9537.53<\/strong><\/div>\n
<\/div>\n
<\/div>\n
\"URL2PNG<\/div>\n
Cropping<\/h2>\n
The graphic design of your web or mobile applications will most likely require screenshots of very explicit dimensions. Cloudinary’s cloud-based image transformations can be applied on generated screenshots to get a perfect resize and crop.<\/div>\n
<\/div>\n
In the example below, we embed a 500×300<\/strong> cropped version of the much larger original screenshot. Note that we didn’t need to sign the URL in this example because we already generated a screenshot of the ‘http:\/\/cloudinary.com’ homepage in the example above.<\/div>\n
<\/div>\n
https:\/\/res.cloudinary.com\/demo\/image\/url2png\/<\/span>c_fill,g_north,h_300,w_500\/<\/span>http:\/\/cloudinary.com<\/strong><\/a><\/div>\n
<\/div>\n
\"URL2PNG<\/a><\/div>\n
<\/div>\n
The following Ruby on Rails code line generates an image tag with the URL above:<\/div>\n
<%= cl_image_tag(\"http:\/\/cloudinary.com\", :type => \"url2png\", \n                 :width => 500, :height => 300, :crop => :fill, :gravity => :north) %>\n<\/pre>\n
Another example, this time generating a 200×200 square thumbnail of the top part of the same screenshot while converting the image to grayscale:<\/div>\n
<\/div>\n
https:\/\/res.cloudinary.com\/demo\/image\/url2png\/<\/span>w_200,h_200,c_fill,g_north,e_grayscale\/<\/span>http:\/\/cloudinary.com<\/a><\/strong><\/div>\n
<\/div>\n
\"URL2PNG<\/a><\/div>\n
<\/div>\n
Same example in Java:<\/div>\n
cloudinary.url().type(\"url2png\").transformation(\n\u00a0 new Transformation()\n\u00a0 \u00a0 .width(200).height(200).crop(\"fill\").gravity(\"north\").effect(\"grayscale\"))\n\u00a0 .imageTag(\"http:\/\/cloudinary.com\"));\n<\/pre>\n
Caption overlays\u00a0<\/span><\/h2>\n
When embedding screenshots, you may want to add an embedded caption with the site’s name or URL. You can use Cloudinary’s dynamic text overlays to add a text over the screenshot image.<\/div>\n
<\/div>\n
The dynamic URL below first creates a 500×300 cropped version of the screenshot with a border of 2 pixels. A semi transparent black overlay is then added at the bottom of the image. Finally, the ‘http:\/\/cloudinary.com’ white text label is added at the bottom of the page:<\/div>\n
<\/div>\n
https:\/\/res.cloudinary.com\/demo\/image\/url2png\/<\/span>c_fill,g_north,h_300,w_500,bo_2px_solid_rgb:222\/l_black_bar,w_1.0,h_0.1,fl_relative,g_south,o_70\/l_text:helv_bd_18_white:cloudinary.com,g_south,y_6\/<\/span>http:\/\/cloudinary.com<\/strong><\/a><\/div>\n
<\/div>\n
\"URL2PNG<\/a><\/p>\n
<\/div>\n
<\/div>\n
Same example in PHP:<\/div>\n
<?php echo cloudinary_url(\"http:\/\/cloudinary.com\",\u00a0\n\u00a0 array(\n\u00a0 \u00a0 \"transformation\" => array(\n\u00a0 \u00a0 \u00a0 array(\"crop\" => \"fill\", \"gravity\" => \"north\",\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \"height\" => 300, \"width\" => 300, \"border\" => \"2px_solid_#222\"),\n\u00a0 \u00a0 \u00a0 array(\"overlay\" => \"black_bar\", \"width\" => 1.0, \"height\" => 0.1,\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \"flags\" => \"relative\", \"gravity\" => \"south\", \"opacity\" => 70),\n\u00a0 \u00a0 \u00a0 array(\"overlay\" => \"text:helv_bd_18_white:cloudinary.com\",\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \"gravity\" => \"south\", \"y\" => 6)\n\u00a0 \u00a0 )\n\u00a0 )); ?><\/pre>\n
Building a dynamic application? The same exact code and dynamic URL of the example above can be used for any web page by changing the origin URL both for the actual screenshot creation and for the text overlay. For example, here is the same method applied on the screenshot of ‘http:\/\/url2png.com’.<\/div>\n
<\/div>\n
https:\/\/res.cloudinary.com\/demo\/image\/url2png\/<\/span>c_fill,g_north,h_300,w_500,bo_2px_solid_rgb:222\/l_black_bar,w_1.0,h_0.1,fl_relative,g_south,o_70\/l_text:helv_bd_18_white:url2png.com,g_south,y_6\/<\/span>http:\/\/url2png.com<\/strong><\/a><\/div>\n
<\/div>\n
\"URL2PNG<\/div>\n
<\/div>\n
Advanced transformations<\/h2>\n
As mentioned above, graphic designers and bloggers usually prefer to apply certain styling on embedded screenshots. For example, I prefer to round the corners of a screenshot image, add a gray border and a light shadow.<\/div>\n
<\/div>\n
As you can see in the example below, Cloudinary’s cloud-based image transformations can be used to create such a result when applied on a screenshot dynamically created by the URL2PNG add-on.<\/div>\n
<\/div>\n
https:\/\/res.cloudinary.com\/demo\/image\/url2png\/<\/span>c_fill,g_north,h_300,w_500,r_25,bo_2px_solid_rgb:999\/e_shadow:20,co_rgb:bbb,x_3,y_3\/<\/span>http:\/\/cloudinary.com<\/a><\/strong><\/div>\n
<\/div>\n
\"URL2PNG<\/a><\/div>\n
<\/div>\n
One last example – another common practice is to mark and label certain elements of a screenshot. The following transformation URL, that can be easily generated using Cloudinary\u2019s client libraries, adds an overlay blank image with a red border and a red text overlay.<\/div>\n
<\/div>\n
https:\/\/res.cloudinary.com\/demo\/image\/url2png\/<\/span>c_fill,g_north,h_300,w_500,r_30,bo_2px_solid_rgb:1a3474,e_saturation:-70\/l_black_bar,w_220,h_60,g_north_west,x_70,y_30,o_10,bo_4px_solid_red\/l_text:helv_bd_18_white:Main%20text%20element,g_north_west,y_84,x_304,co_red\/<\/span>http:\/\/cloudinary.com<\/strong><\/a><\/div>\n
<\/div>\n
Summary\u00a0<\/span><\/h2>\n
URL2PNG provides an easy and useful solution to online web pages screenshot generation. As a Cloudinary add-on, URL2PNG screenshots can be enhanced on-the-fly and their integration in your website or mobile application is further simplified.<\/div>\n
<\/div>\n
You can try out the URL2PNG add-on<\/a><\/strong>\u00a0by signing up to a Cloudinary account<\/strong><\/a>\u00a0if you haven’t done so already and subscribe to the free plan of the URL2PNG add-on.<\/div>\n
<\/div>\n
Additional documentation and code samples are available here<\/strong><\/a>.<\/div>\n","protected":false},"excerpt":{"rendered":"
Thumbnails of website screenshots are a common visual design element. Search engines, such as Google, display webpage screenshots in their search results. Social news sites, such as DZone, embed screenshot thumbnails of shared pages. Bloggers and technology news sites embed screenshots of company websites and online services they discuss in their posts. Development companies embed […]<\/p>\n","protected":false},"author":41,"featured_media":23396,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[91,165,214,229,257],"class_list":["post-21220","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-django","tag-image-transformation","tag-node","tag-php","tag-ruby-on-rails"],"acf":[],"yoast_head":"\nOnline website screenshots with URL2PNG and Cloudinary<\/title>\n<meta name=\"description\" content=\"Learn how to automatically capture, transform and display online website screenshots with Cloudinary and URL2PNG. Code samples for all popular frameworks.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/website_screenshot_creation_and_manipulation_with_url2png_and_cloudinary\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Website screenshot creation and transformation with URL2PNG and Cloudinary\" \/>\n<meta property=\"og:description\" content=\"Learn how to automatically capture, transform and display online website screenshots with Cloudinary and URL2PNG. Code samples for all popular frameworks.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/website_screenshot_creation_and_manipulation_with_url2png_and_cloudinary\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2014-03-25T13:03:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-03-30T19:49:13+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1647048348\/58_website_screenshot_creation\/58_website_screenshot_creation-jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"1100\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/website_screenshot_creation_and_manipulation_with_url2png_and_cloudinary#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/website_screenshot_creation_and_manipulation_with_url2png_and_cloudinary\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Website screenshot creation and transformation with URL2PNG and Cloudinary\",\"datePublished\":\"2014-03-25T13:03:55+00:00\",\"dateModified\":\"2025-03-30T19:49:13+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/website_screenshot_creation_and_manipulation_with_url2png_and_cloudinary\"},\"wordCount\":1351,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/website_screenshot_creation_and_manipulation_with_url2png_and_cloudinary#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1647048348\/58_website_screenshot_creation\/58_website_screenshot_creation.jpg?_i=AA\",\"keywords\":[\"Django\",\"Image Transformation\",\"Node\",\"PHP\",\"Ruby on Rails\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2014\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/website_screenshot_creation_and_manipulation_with_url2png_and_cloudinary\",\"url\":\"https:\/\/cloudinary.com\/blog\/website_screenshot_creation_and_manipulation_with_url2png_and_cloudinary\",\"name\":\"Online website screenshots with URL2PNG and Cloudinary\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/website_screenshot_creation_and_manipulation_with_url2png_and_cloudinary#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/website_screenshot_creation_and_manipulation_with_url2png_and_cloudinary#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1647048348\/58_website_screenshot_creation\/58_website_screenshot_creation.jpg?_i=AA\",\"datePublished\":\"2014-03-25T13:03:55+00:00\",\"dateModified\":\"2025-03-30T19:49:13+00:00\",\"description\":\"Learn how to automatically capture, transform and display online website screenshots with Cloudinary and URL2PNG. Code samples for all popular frameworks.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/website_screenshot_creation_and_manipulation_with_url2png_and_cloudinary#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/website_screenshot_creation_and_manipulation_with_url2png_and_cloudinary\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/website_screenshot_creation_and_manipulation_with_url2png_and_cloudinary#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1647048348\/58_website_screenshot_creation\/58_website_screenshot_creation.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1647048348\/58_website_screenshot_creation\/58_website_screenshot_creation.jpg?_i=AA\",\"width\":2000,\"height\":1100},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/website_screenshot_creation_and_manipulation_with_url2png_and_cloudinary#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Website screenshot creation and transformation with URL2PNG and Cloudinary\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Online website screenshots with URL2PNG and Cloudinary","description":"Learn how to automatically capture, transform and display online website screenshots with Cloudinary and URL2PNG. Code samples for all popular frameworks.","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:\/\/cloudinary.com\/blog\/website_screenshot_creation_and_manipulation_with_url2png_and_cloudinary","og_locale":"en_US","og_type":"article","og_title":"Website screenshot creation and transformation with URL2PNG and Cloudinary","og_description":"Learn how to automatically capture, transform and display online website screenshots with Cloudinary and URL2PNG. Code samples for all popular frameworks.","og_url":"https:\/\/cloudinary.com\/blog\/website_screenshot_creation_and_manipulation_with_url2png_and_cloudinary","og_site_name":"Cloudinary Blog","article_published_time":"2014-03-25T13:03:55+00:00","article_modified_time":"2025-03-30T19:49:13+00:00","og_image":[{"width":2000,"height":1100,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1647048348\/58_website_screenshot_creation\/58_website_screenshot_creation-jpg?_i=AA","type":"image\/jpeg"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/website_screenshot_creation_and_manipulation_with_url2png_and_cloudinary#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/website_screenshot_creation_and_manipulation_with_url2png_and_cloudinary"},"author":{"name":"","@id":""},"headline":"Website screenshot creation and transformation with URL2PNG and Cloudinary","datePublished":"2014-03-25T13:03:55+00:00","dateModified":"2025-03-30T19:49:13+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/website_screenshot_creation_and_manipulation_with_url2png_and_cloudinary"},"wordCount":1351,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/website_screenshot_creation_and_manipulation_with_url2png_and_cloudinary#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1647048348\/58_website_screenshot_creation\/58_website_screenshot_creation.jpg?_i=AA","keywords":["Django","Image Transformation","Node","PHP","Ruby on Rails"],"inLanguage":"en-US","copyrightYear":"2014","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/website_screenshot_creation_and_manipulation_with_url2png_and_cloudinary","url":"https:\/\/cloudinary.com\/blog\/website_screenshot_creation_and_manipulation_with_url2png_and_cloudinary","name":"Online website screenshots with URL2PNG and Cloudinary","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/website_screenshot_creation_and_manipulation_with_url2png_and_cloudinary#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/website_screenshot_creation_and_manipulation_with_url2png_and_cloudinary#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1647048348\/58_website_screenshot_creation\/58_website_screenshot_creation.jpg?_i=AA","datePublished":"2014-03-25T13:03:55+00:00","dateModified":"2025-03-30T19:49:13+00:00","description":"Learn how to automatically capture, transform and display online website screenshots with Cloudinary and URL2PNG. Code samples for all popular frameworks.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/website_screenshot_creation_and_manipulation_with_url2png_and_cloudinary#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/website_screenshot_creation_and_manipulation_with_url2png_and_cloudinary"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/website_screenshot_creation_and_manipulation_with_url2png_and_cloudinary#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1647048348\/58_website_screenshot_creation\/58_website_screenshot_creation.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1647048348\/58_website_screenshot_creation\/58_website_screenshot_creation.jpg?_i=AA","width":2000,"height":1100},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/website_screenshot_creation_and_manipulation_with_url2png_and_cloudinary#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Website screenshot creation and transformation with URL2PNG and Cloudinary"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1647048348\/58_website_screenshot_creation\/58_website_screenshot_creation.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21220","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=21220"}],"version-history":[{"count":4,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21220\/revisions"}],"predecessor-version":[{"id":37320,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21220\/revisions\/37320"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/23396"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=21220"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=21220"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=21220"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}