{"id":21531,"date":"2014-06-27T15:21:54","date_gmt":"2014-06-27T07:21:54","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=21531"},"modified":"2024-06-20T19:34:06","modified_gmt":"2024-06-20T11:34:06","slug":"github-image-diff","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/github-image-diff\/","title":{"rendered":"Comparing Image Changes on GitHub"},"content":{"rendered":"<p>With <a href=\"https:\/\/git-scm.com\/\" rel=\"nofollow noopener\" target=\"_blank\">Git<\/a>, you can track not only code changes but also image revisions. Reverting to previous versions is straightforward, making <a href=\"https:\/\/github.com\/\" rel=\"nofollow noopener\" target=\"_blank\">GitHub<\/a> an ideal platform for comparing these changes.<\/p>\n<p>GitHub is known for hosting code, projects, and developer collaborations. It also provides tools to view historical changes and file comparisons. To see this in action, select a file and click the <span class=\"key\">History<\/span> button shown here.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/github-image-diff\/history-button.jpg\" alt=\"GitHub history button\" height=\"80\" width=\"500\"><\/figure>\n<p>The image below demonstrates how GitHub marks the differences between revisions with green and red lines \u2013 green for additions and red for deletions. These color markers help you track changes efficiently.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/github-image-diff\/file-comparison.jpg\" alt=\"File comparison on GitHub\" height=\"320\" width=\"500\"><\/figure>\n<p>GitHub projects often include not just code but also images and PSD files. GitHub\u2019s interactive tools for comparing images and PSD files are worth exploring.<\/p>\n<h2>Exploring Image Comparison Tools on GitHub<\/h2>\n<p>GitHub supports various image formats, including PNG, JPG, GIF, and PSD. To compare images, select one, click the <span class=\"key\">History<\/span> button, and explore the comparison methods listed below the image: <strong>2-Up, Swipe,<\/strong> and <strong>Onion Skin<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/github-image-diff\/swipe-panel.jpg\" alt=\"GitHub swipe panel for image comparison\" height=\"80\" width=\"500\"><\/figure>\n<p>Using the <strong>Swipe<\/strong> method, you can view changes by sliding a divider to compare two versions of an image side by side \u2013 ideal for comprehensive changes like color adjustments.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/github-image-diff\/swipe-image-diff.jpg\" alt=\"Using the swipe method on GitHub\" height=\"320\" width=\"500\"><\/figure>\n<p>The <strong>2-Up<\/strong> method shows older and newer image versions side by side, perfect for noting changes in dimensions or overall design.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/github-image-diff\/2up-image-diff.jpg\" alt=\"2-Up comparison of images on GitHub\" height=\"256\" width=\"500\"><\/figure>\n<p><strong>Onion Skin<\/strong> is useful for subtle changes, offering a handle bar to fade between old and new versions, enhancing visibility of minor differences.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/github-image-diff\/onion-skin-handle.jpg\" alt=\"Onion skin handle on GitHub\" height=\"150\" width=\"500\"><\/figure>\n<p>Dragging the handle bar allows you to transition between revisions, seamlessly comparing them with a fade-in effect.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/github-image-diff\/onion-skin-in-action.gif\" alt=\"Onion skin in action on GitHub\" height=\"347\" width=\"501\"><\/figure>\n<h2>Final Thoughts<\/h2>\n<p>This innovative feature broadens GitHub\u2019s appeal beyond coding. Graphic designers and visual artists will find these image comparison tools particularly exciting, as they can also manage their creative revisions using Git and GitHub.<\/p>","protected":false},"excerpt":{"rendered":"<p>With Git, you can track not only code changes but also image revisions. Reverting to previous versions is straightforward, making GitHub an ideal platform for comparing these changes. GitHub is known for hosting code, projects, and developer collaborations. It also provides tools to view historical changes and file comparisons. To see this in action, select&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":[2726,3213],"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.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Comparing Image Changes on GitHub - Hongkiat<\/title>\n<meta name=\"description\" content=\"With Git, you can track not only code changes but also image revisions. Reverting to previous versions is straightforward, making GitHub an ideal platform\" \/>\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\/github-image-diff\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Comparing Image Changes on GitHub\" \/>\n<meta property=\"og:description\" content=\"With Git, you can track not only code changes but also image revisions. Reverting to previous versions is straightforward, making GitHub an ideal platform\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/github-image-diff\/\" \/>\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=\"2014-06-27T07:21:54+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-06-20T11:34:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/github-image-diff\/history-button.jpg\" \/>\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\\\/github-image-diff\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/github-image-diff\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"Comparing Image Changes on GitHub\",\"datePublished\":\"2014-06-27T07:21:54+00:00\",\"dateModified\":\"2024-06-20T11:34:06+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/github-image-diff\\\/\"},\"wordCount\":292,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/github-image-diff\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/github-image-diff\\\/history-button.jpg\",\"keywords\":[\"GitHub\",\"version control\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/github-image-diff\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/github-image-diff\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/github-image-diff\\\/\",\"name\":\"Comparing Image Changes on GitHub - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/github-image-diff\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/github-image-diff\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/github-image-diff\\\/history-button.jpg\",\"datePublished\":\"2014-06-27T07:21:54+00:00\",\"dateModified\":\"2024-06-20T11:34:06+00:00\",\"description\":\"With Git, you can track not only code changes but also image revisions. Reverting to previous versions is straightforward, making GitHub an ideal platform\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/github-image-diff\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/github-image-diff\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/github-image-diff\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/github-image-diff\\\/history-button.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/github-image-diff\\\/history-button.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/github-image-diff\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Comparing Image Changes on GitHub\"}]},{\"@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":"Comparing Image Changes on GitHub - Hongkiat","description":"With Git, you can track not only code changes but also image revisions. Reverting to previous versions is straightforward, making GitHub an ideal platform","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\/github-image-diff\/","og_locale":"en_US","og_type":"article","og_title":"Comparing Image Changes on GitHub","og_description":"With Git, you can track not only code changes but also image revisions. Reverting to previous versions is straightforward, making GitHub an ideal platform","og_url":"https:\/\/www.hongkiat.com\/blog\/github-image-diff\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2014-06-27T07:21:54+00:00","article_modified_time":"2024-06-20T11:34:06+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/github-image-diff\/history-button.jpg","type":"","width":"","height":""}],"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\/github-image-diff\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/github-image-diff\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"Comparing Image Changes on GitHub","datePublished":"2014-06-27T07:21:54+00:00","dateModified":"2024-06-20T11:34:06+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/github-image-diff\/"},"wordCount":292,"commentCount":0,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/github-image-diff\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/github-image-diff\/history-button.jpg","keywords":["GitHub","version control"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/github-image-diff\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/github-image-diff\/","url":"https:\/\/www.hongkiat.com\/blog\/github-image-diff\/","name":"Comparing Image Changes on GitHub - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/github-image-diff\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/github-image-diff\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/github-image-diff\/history-button.jpg","datePublished":"2014-06-27T07:21:54+00:00","dateModified":"2024-06-20T11:34:06+00:00","description":"With Git, you can track not only code changes but also image revisions. Reverting to previous versions is straightforward, making GitHub an ideal platform","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/github-image-diff\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/github-image-diff\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/github-image-diff\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/github-image-diff\/history-button.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/github-image-diff\/history-button.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/github-image-diff\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Comparing Image Changes on GitHub"}]},{"@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-5Bh","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/21531","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=21531"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/21531\/revisions"}],"predecessor-version":[{"id":72138,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/21531\/revisions\/72138"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=21531"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=21531"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=21531"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=21531"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}