{"id":18831,"date":"2013-12-11T15:01:23","date_gmt":"2013-12-11T07:01:23","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=18831"},"modified":"2025-04-04T01:39:26","modified_gmt":"2025-04-03T17:39:26","slug":"grayscale-image-web","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/grayscale-image-web\/","title":{"rendered":"How to Convert Web Images to Grayscale: 3 Easy Methods"},"content":{"rendered":"<p>I\u2019ve always been a fan of grayscale images because they look more artistic. Many photo editors, like Photoshop, allow you to turn colorful images into grayscale effortlessly, even offering options to adjust color depth and tones. However, achieving the same effect on the web can be tricky due to varying browser capabilities.<\/p>\n<p>In this post, we\u2019ll explore several methods to convert images to grayscale on the web. We\u2019ll discuss the pros and cons of each approach and, towards the end, we\u2019ll combine these methods to create a solution that works across different browsers.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/css-filter\/\" class=\"ref-block__link\" title=\"Read More: How to Apply CSS Filter Effects to Web Images\" rel=\"bookmark\"><span class=\"screen-reader-text\">How to Apply CSS Filter Effects to Web Images<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/css-filter.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-15216 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/css-filter.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">How to Apply CSS Filter Effects to Web Images<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tAdjusting image Brightness and Contrast, or converting an image to Grayscale or Sepia are common features you'll find...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>1. CSS Filter<\/h2>\n<p>Using the CSS <code>filter<\/code> property is perhaps the easiest way to convert an image to grayscale. In the past, Internet Explorer had a proprietary CSS property called <code>filter<\/code> to apply custom effects, including grayscale.<\/p>\n<p>Today, the <code>filter<\/code> property is part of the CSS3 specification and is supported in several browsers, such as Firefox, Chrome, and Safari. Previously, we also discussed the <a href=\"https:\/\/www.hongkiat.com\/blog\/css-filter\/\">Webkit filter<\/a> that allows us to apply not only grayscale but also sepia and blur effects.<\/p>\n<p>We can add the following style rules to convert images to grayscale using the <code>filter<\/code> property:<\/p>\n<pre>\r\nimg {\r\n  -webkit-filter: grayscale(1);  \/* Webkit *\/\r\n  filter: gray;  \/* IE6-9 *\/\r\n  filter: grayscale(1);  \/* W3C *\/\r\n}\r\n<\/pre>\n<p>This code will take effect in IE6-9 and Webkit browsers (Chrome 18+, Safari 6.0+, and Opera 15+).<\/p>\n<p><strong>Note:<\/strong> <a rel=\"nofollow noopener\" target=\"_blank\" href=\"http:\/\/blogs.msdn.com\/b\/ie\/archive\/2012\/06\/04\/legacy-dx-filters-removed-from-ie10-release-preview.as\">IE10 dropped support for the legacy IE<\/a> <code>filter<\/code> and also does not support the prefixed version, <code>-ms-filter<\/code>, for applying grayscale. This code does not work in Firefox either.<\/p>\n<h2>2. JavaScript<\/h2>\n<p>The second method is using JavaScript, which should work in all browsers with JavaScript enabled, including older versions like IE6 and below.<\/p>\n<pre>\r\nvar imgObj = document.getElementById('js-image');\r\n\r\nfunction gray(imgObj) {\r\n  var canvas = document.createElement('canvas');\r\n  var canvasContext = canvas.getContext('2d');\r\n\r\n  var imgW = imgObj.width;\r\n  var imgH = imgObj.height;\r\n  canvas.width = imgW;\r\n  canvas.height = imgH;\r\n\r\n  canvasContext.drawImage(imgObj, 0, 0);\r\n  var imgPixels = canvasContext.getImageData(0, 0, imgW, imgH);\r\n\r\n  for (var y = 0; y < imgPixels.height; y++) {\r\n    for (var x = 0; x < imgPixels.width; x++) {\r\n      var i = (y * 4) * imgPixels.width + x * 4;\r\n      var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) \/ 3;\r\n      imgPixels.data[i] = avg; \r\n      imgPixels.data[i + 1] = avg; \r\n      imgPixels.data[i + 2] = avg;\r\n    }\r\n  }\r\n\r\n  canvasContext.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);\r\n  return canvas.toDataURL();\r\n}\r\n\r\nimgObj.src = gray(imgObj);\r\n<\/pre>\n<p>Using the JavaScript method, we can apply the grayscale effect under certain conditions, such as when the image is <code>hovered<\/code> over or clicked. We can also use it with jQuery effects to apply smooth animations when transitioning from gray to full color. The only downside is that this effect will not work if JavaScript is disabled in the browser.<\/p>\n<h2>3. SVG<\/h2>\n<p>Another method is by using an <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.w3.org\/TR\/SVG\/filters.html\">SVG Filter<\/a>.<\/p>\n<p>To do this, create an SVG file and add the following code. Save and name the file, for example, <code>gray.svg<\/code>.<\/p>\n<pre>\r\n&lt;svg xmlns=\"https:\/\/www.w3.org\/2000\/svg\"&gt;\r\n  &lt;filter id=\"grayscale\"&gt;\r\n    &lt;feColorMatrix type=\"matrix\" values=\"0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\"\/&gt;\r\n  &lt;\/filter&gt;\r\n&lt;\/svg&gt;\r\n<\/pre>\n<p>Then, use the <code>filter<\/code> property to link the SVG file, followed by the ID of the filter element in our SVG file:<\/p>\n<pre>\r\nimg {\r\n  filter: url('img\/gray.svg#grayscale');\r\n}\r\n<\/pre>\n<p>You can also embed the code directly within the CSS, like this:<\/p>\n<pre>\r\nimg {\r\n  filter: url('url(\"data:image\/svg+xml;utf8,&lt;svg%20xmlns='https:\/\/www.w3.org\/2000\/svg'&gt;&lt;filter%20id='grayscale'&gt;&lt;feColorMatrix%20type='matrix'%20values='0.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200%200%200%201%200'\/&gt;&lt;\/filter&gt;&lt;\/svg&gt;#grayscale\");')\r\n}\r\n<\/pre>\n<p>This will yield the same result.<\/p>\n<h2>Conclusion<\/h2>\n<p>To achieve cross-browser support for the grayscale effect, we can combine the methods mentioned above using the following code snippet. This code will apply the grayscale effect in Firefox 3.5+, Opera 15+, Safari, Chrome, and Internet Explorer.<\/p>\n<pre>\r\nimg {\r\n  -webkit-filter: grayscale(100%);\r\n  -webkit-filter: grayscale(1);\r\n  filter: grayscale(100%);\r\n  filter: url('..\/img\/gray.svg#grayscale');\r\n  filter: gray;\r\n}\r\n<\/pre>\n<p>We can use the above code along with the JavaScript method and only provide the CSS <code>filter<\/code> as a fallback in case JavaScript is disabled. This approach can easily be implemented with the help of Modernizr.<\/p>\n<p>Modernizr will add a <code>js<\/code> class to the <code>body<\/code> if JavaScript is enabled, and will switch the class name to <code>no-js<\/code> if it is disabled. With CSS, you can do the following:<\/p>\n<pre>\r\n.no-js img {\r\n  -webkit-filter: grayscale(100%);\r\n  -webkit-filter: grayscale(1);\r\n  filter: grayscale(100%);\r\n  filter: url('..\/img\/gray.svg#grayscale');\r\n  filter: gray;\r\n}\r\n<\/pre>\n<p>That's all! You can see the demo in action below:<\/p>\n<p><a href=\"https:\/\/hongkiat.github.io\/grayscale-web-image\/\" class=\"su-button su-button-style-flat\" style=\"color:#FFFFFF;background-color:#2D89EF;border-color:#246ec0;border-radius:0px\" target=\"_self\"><span style=\"color:#FFFFFF;padding:7px 20px;font-size:16px;line-height:24px;border-color:#6cadf4;border-radius:0px;text-shadow:none\"><i class=\"sui sui-external-link\" style=\"font-size:16px;color:#fff\"><\/i>  View dmeo <\/span><\/a>\n<a href=\"https:\/\/github.com\/hongkiat\/grayscale-web-image\/\" class=\"su-button su-button-style-flat\" style=\"color:#FFFFFF;background-color:#2D89EF;border-color:#246ec0;border-radius:0px\" target=\"_self\"><span style=\"color:#FFFFFF;padding:7px 20px;font-size:16px;line-height:24px;border-color:#6cadf4;border-radius:0px;text-shadow:none\"><i class=\"sui sui-external-link\" style=\"font-size:16px;color:#fff\"><\/i>  Download source <\/span><\/a><\/p>\n<h2>Sources<\/h2>\n<p>Check out the following sources for references on grayscale and the <code>filter<\/code> effect:<\/p>\n<ul>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.w3.org\/TR\/filter-effects-1\/\">Filter Effect<\/a> \u2014 W3C<\/li>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/web.dev\/learn\/\">Understanding CSS Filter Effects<\/a> \u2014 HTML5 Rocks<\/li>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/stackoverflow.com\/questions\/609273\/convert-an-image-to-grayscale-in-html-css\">Convert an image to grayscale in HTML\/CSS<\/a> \u2014 StackOverflow<\/li>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/caniuse.com\/css-filters\">CSS Filters Browser Support<\/a> \u2014 CanIUse.com<\/li>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/filter\">Mozilla CSS Filter<\/a> \u2014 MDN<\/li>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/docs.microsoft.com\/en-gb\/\">Internet Explorer Filter and Transition<\/a> \u2014 MSDN<\/li>\n<\/ul>","protected":false},"excerpt":{"rendered":"<p>I\u2019ve always been a fan of grayscale images because they look more artistic. Many photo editors, like Photoshop, allow you to turn colorful images into grayscale effortlessly, even offering options to adjust color depth and tones. However, achieving the same effect on the web can be tricky due to varying browser capabilities. In this post,&hellip;<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[352],"tags":[2305,2175],"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.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Convert Web Images to Grayscale: 3 Easy Methods - Hongkiat<\/title>\n<meta name=\"description\" content=\"I&#039;ve always been a fan of grayscale images because they look more artistic. Many photo editors, like Photoshop, allow you to turn colorful images into\" \/>\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\/grayscale-image-web\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Convert Web Images to Grayscale: 3 Easy Methods\" \/>\n<meta property=\"og:description\" content=\"I&#039;ve always been a fan of grayscale images because they look more artistic. Many photo editors, like Photoshop, allow you to turn colorful images into\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/grayscale-image-web\/\" \/>\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=\"2013-12-11T07:01:23+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-03T17:39:26+00:00\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/grayscale-image-web\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/grayscale-image-web\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"How to Convert Web Images to Grayscale: 3 Easy Methods\",\"datePublished\":\"2013-12-11T07:01:23+00:00\",\"dateModified\":\"2025-04-03T17:39:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/grayscale-image-web\\\/\"},\"wordCount\":596,\"commentCount\":11,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"keywords\":[\"Image Optimization\",\"Scalable Vector Graphics (SVG)\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/grayscale-image-web\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/grayscale-image-web\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/grayscale-image-web\\\/\",\"name\":\"How to Convert Web Images to Grayscale: 3 Easy Methods - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"datePublished\":\"2013-12-11T07:01:23+00:00\",\"dateModified\":\"2025-04-03T17:39:26+00:00\",\"description\":\"I've always been a fan of grayscale images because they look more artistic. Many photo editors, like Photoshop, allow you to turn colorful images into\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/grayscale-image-web\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/grayscale-image-web\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/grayscale-image-web\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Convert Web Images to Grayscale: 3 Easy Methods\"}]},{\"@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\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Convert Web Images to Grayscale: 3 Easy Methods - Hongkiat","description":"I've always been a fan of grayscale images because they look more artistic. Many photo editors, like Photoshop, allow you to turn colorful images into","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\/grayscale-image-web\/","og_locale":"en_US","og_type":"article","og_title":"How to Convert Web Images to Grayscale: 3 Easy Methods","og_description":"I've always been a fan of grayscale images because they look more artistic. Many photo editors, like Photoshop, allow you to turn colorful images into","og_url":"https:\/\/www.hongkiat.com\/blog\/grayscale-image-web\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2013-12-11T07:01:23+00:00","article_modified_time":"2025-04-03T17:39:26+00:00","author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/grayscale-image-web\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/grayscale-image-web\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"How to Convert Web Images to Grayscale: 3 Easy Methods","datePublished":"2013-12-11T07:01:23+00:00","dateModified":"2025-04-03T17:39:26+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/grayscale-image-web\/"},"wordCount":596,"commentCount":11,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"keywords":["Image Optimization","Scalable Vector Graphics (SVG)"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/grayscale-image-web\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/grayscale-image-web\/","url":"https:\/\/www.hongkiat.com\/blog\/grayscale-image-web\/","name":"How to Convert Web Images to Grayscale: 3 Easy Methods - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"datePublished":"2013-12-11T07:01:23+00:00","dateModified":"2025-04-03T17:39:26+00:00","description":"I've always been a fan of grayscale images because they look more artistic. Many photo editors, like Photoshop, allow you to turn colorful images into","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/grayscale-image-web\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/grayscale-image-web\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/grayscale-image-web\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Convert Web Images to Grayscale: 3 Easy Methods"}]},{"@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\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-4TJ","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/18831","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\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=18831"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/18831\/revisions"}],"predecessor-version":[{"id":73642,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/18831\/revisions\/73642"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=18831"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=18831"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=18831"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=18831"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}