{"id":3474,"date":"2016-09-23T11:00:30","date_gmt":"2016-09-23T05:30:30","guid":{"rendered":"http:\/\/gtm360.com\/blog\/?p=3474"},"modified":"2021-12-13T14:29:38","modified_gmt":"2021-12-13T08:59:38","slug":"aspect-ratio-is-not-rocket-science-but-so-many-brands-still-get-it-wrong","status":"publish","type":"post","link":"https:\/\/gtm360.com\/blog\/2016\/09\/23\/aspect-ratio-is-not-rocket-science-but-so-many-brands-still-get-it-wrong\/","title":{"rendered":"Aspect Ratio Is Not Rocket Science But So Many Brands Still Get It Wrong"},"content":{"rendered":"<p><a href=\"https:\/\/gtm360.com\/blog\/wp-content\/uploads\/2016\/09\/AD-GRAPHICS-HONDA-05APR2013.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"alignright wp-image-3478\" src=\"http:\/\/gtm360.com\/blog\/wp-content\/uploads\/2016\/09\/AD-GRAPHICS-HONDA-05APR2013.jpg\" alt=\"AD-GRAPHICS-HONDA-05APR2013\" width=\"200\" height=\"282\" srcset=\"https:\/\/gtm360.com\/blog\/wp-content\/uploads\/2016\/09\/AD-GRAPHICS-HONDA-05APR2013.jpg 425w, https:\/\/gtm360.com\/blog\/wp-content\/uploads\/2016\/09\/AD-GRAPHICS-HONDA-05APR2013-142x200.jpg 142w\" sizes=\"auto, (max-width: 200px) 100vw, 200px\" \/><\/a>A few years ago, images on websites and banner ads used to suck. Poor resolution, bleeding colors &#8211; these were the common problems in images used even by leading brands.<\/p>\n<p>That&#8217;s mostly history now. Image quality has improved significantly in recent times.<\/p>\n<p>I wish I could say the same about image sizes and aspect ratios.<\/p>\n<p>I wrote <a href=\"http:\/\/gtm360.com\/blog\/2010\/09\/19\/preserve-aspect-ratios-protect-corporate-identities\/\" target=\"_blank\" rel=\"noopener\"><strong>&#8220;Preserve Aspect Ratios And Protect Corporate Identities!&#8221;<\/strong><\/a> six years ago. I didn&#8217;t expect to change the world with this one post but, just as image quality has improved with time, I thought awareness of getting aspect ratios right would&#8217;ve increased during the same period.<\/p>\n<p>Alas, that has not happened. I still come across distorted images regularly on websites, digital ads, emails, flyers, signs and many other digital media properties. Given below are a few recent examples.<\/p>\n<p><strong>#1. CREST<\/strong><\/p>\n<p>I was a bit disheartened to note that a graphics design company bungled the aspect ratios of images on its own website!<\/p>\n<p><a href=\"https:\/\/gtm360.com\/blog\/wp-content\/uploads\/2016\/09\/ARNRS-fi.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-3536 size-full\" src=\"https:\/\/gtm360.com\/blog\/wp-content\/uploads\/2016\/09\/ARNRS-fi.jpg\" alt=\"arnrs-fi\" width=\"630\" height=\"280\" srcset=\"https:\/\/gtm360.com\/blog\/wp-content\/uploads\/2016\/09\/ARNRS-fi.jpg 630w, https:\/\/gtm360.com\/blog\/wp-content\/uploads\/2016\/09\/ARNRS-fi-200x89.jpg 200w\" sizes=\"auto, (max-width: 630px) 100vw, 630px\" \/><\/a><\/p>\n<p>My tweet to the company higlighting the problem went unanswered. I don&#8217;t know what was the root cause of the image distortion issue.<\/p>\n<p><strong>#2. STARTUP MASTER CLASS<\/strong><\/p>\n<p><em>&#8220;Engineers do it with precision&#8221;<\/em>.<\/p>\n<p>This <em>double-entendre<\/em> was emblazoned on the IIT Bombay T-Shirt during my undergrad days at the institute.<\/p>\n<p>Thirty years after I was graduated from IIT Bombay, one look at the website of\u00a0<strong><a href=\"http:\/\/startupmasterclass.in\/\" target=\"_blank\" rel=\"noopener\">Startup Master Class<\/a>\u00a0<\/strong>made me wonder if precision is confined only to t-shirts! The Pan-IIT event held in the first week of this month had mauled the mugshots of its keynote speakers, as you can see in the following exhibit.<\/p>\n<p><a href=\"http:\/\/gtm360.com\/blog\/wp-content\/uploads\/2016\/09\/SMC-01-NRN-new.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-3479\" src=\"http:\/\/gtm360.com\/blog\/wp-content\/uploads\/2016\/09\/SMC-01-NRN-new.jpg\" alt=\"SMC-01-NRN-new\" width=\"500\" height=\"250\" srcset=\"https:\/\/gtm360.com\/blog\/wp-content\/uploads\/2016\/09\/SMC-01-NRN-new.jpg 630w, https:\/\/gtm360.com\/blog\/wp-content\/uploads\/2016\/09\/SMC-01-NRN-new-200x100.jpg 200w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/a><\/p>\n<p>This is what Chrome&#8217;s Inspect command showed.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"https:\/\/pbs.twimg.com\/media\/CrQlb7xWEAAxp9Y?format=jpg&amp;name=small\" alt=\"\" width=\"630\" height=\"280\" \/><\/p>\n<p>If you look closely, the aspect ratios of the native and website images are reciprocals of each other (0.85 = 1\/1.17). This suggests that the designer \/ programmer of the website had wrongly substituted length for breadth while resizing the images, which is what probably caused the distortion of the images. This reflects a casual attitude.<\/p>\n<p>A few hours after I sent the above tweet, the event organizer fixed the issue. The pictures of the keynote speakers looked perfect.<\/p>\n<p><a href=\"https:\/\/gtm360.com\/blog\/wp-content\/uploads\/2016\/09\/SMC-04-NRN-new.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-3480 size-full\" src=\"https:\/\/gtm360.com\/blog\/wp-content\/uploads\/2016\/09\/SMC-04-NRN-new.jpg\" alt=\"SMC-04-NRN-new\" width=\"500\" height=\"220\" srcset=\"https:\/\/gtm360.com\/blog\/wp-content\/uploads\/2016\/09\/SMC-04-NRN-new.jpg 500w, https:\/\/gtm360.com\/blog\/wp-content\/uploads\/2016\/09\/SMC-04-NRN-new-200x88.jpg 200w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/a><\/p>\n<p>Kudos to @iitkaa_smc for taking my feedback in the right spirit &#8211; IITians always tend to do that in my experience &#8211; and taking prompt corrective action.<\/p>\n<p><strong>#3. FINEXTRA\u00a0<\/strong><\/p>\n<p>It&#8217;s not just Indian brands. The daily email newsletter of <a href=\"https:\/\/www.finextra.com\/about\/aboutfinextra.aspx\" target=\"_blank\" rel=\"noopener\">Finextra<\/a>, the leading UK-based newswire and information source for the fintech community, carries a incorrectly sized logo of SAP.<\/p>\n<blockquote class=\"twitter-tweet\" data-width=\"550\" data-dnt=\"true\">\n<p lang=\"en\" dir=\"ltr\"><a href=\"https:\/\/twitter.com\/Finextra?ref_src=twsrc%5Etfw\">@Finextra<\/a> Logo of SAP in your daily email is distorted. Attached image describes problem &amp; provides solution. <a href=\"https:\/\/t.co\/fbIgz1mabP\">pic.twitter.com\/fbIgz1mabP<\/a><\/p>\n<p>&mdash; Ketharaman Swaminathan (@s_ketharaman) <a href=\"https:\/\/twitter.com\/s_ketharaman\/status\/771742568543621121?ref_src=twsrc%5Etfw\">September 2, 2016<\/a><\/p><\/blockquote>\n<p><script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>\n<p>I&#8217;m hopeful that Finextra will fix this issue in the coming days.<\/p>\n<p>I&#8217;m saying this based on my experience with the British program manager of a leading consulting firm. This guy&#8217;s slide deck had several typos. The next day, he and I were going to present it to the steering committee of a Top 5 UK bank. I couldn&#8217;t keep quiet and pointed out a couple of typos. He raised his eyebrows and mumbled &#8220;What has the world come to when an Indian has to correct an Englishman&#8217;s spelling&#8221;. But he took my feedback sportingly and immediately fixed all the typos.<\/p>\n<p>I&#8217;m hoping that Finextra will do the same (Update: Indeed it has!). After all, my &#8220;graphical suggestion&#8221; is language-agnostic and my nationality shouldn&#8217;t matter.<\/p>\n<hr style=\"width: 70%;\" \/>\n<p>Aspect ratio is not rocket size. Designers \/ programmers can preserve it by using the &#8220;tiling&#8221; or &#8220;cropping&#8221; techniques described in my <a href=\"http:\/\/gtm360.com\/blog\/2010\/09\/19\/preserve-aspect-ratios-protect-corporate-identities\/\" target=\"_blank\" rel=\"noopener\">previous post<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A few years ago, images on websites and banner ads used to suck. Poor resolution, bleeding colors &#8211; these were the common problems in images used even by leading brands. That&#8217;s mostly history now. Image quality has improved significantly in recent times. I wish I could say the same about image sizes and aspect ratios. &#8230; <a title=\"Aspect Ratio Is Not Rocket Science But So Many Brands Still Get It Wrong\" class=\"read-more\" href=\"https:\/\/gtm360.com\/blog\/2016\/09\/23\/aspect-ratio-is-not-rocket-science-but-so-many-brands-still-get-it-wrong\/\" aria-label=\"Read more about Aspect Ratio Is Not Rocket Science But So Many Brands Still Get It Wrong\">Read more<\/a><\/p>\n","protected":false},"author":4,"featured_media":3536,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17,14,4,7,1],"tags":[],"class_list":["post-3474","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-b1-integrated-marketing","category-cx","category-digital-marketing","category-retail","category-mandatory-category"],"_links":{"self":[{"href":"https:\/\/gtm360.com\/blog\/wp-json\/wp\/v2\/posts\/3474","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gtm360.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gtm360.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gtm360.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/gtm360.com\/blog\/wp-json\/wp\/v2\/comments?post=3474"}],"version-history":[{"count":9,"href":"https:\/\/gtm360.com\/blog\/wp-json\/wp\/v2\/posts\/3474\/revisions"}],"predecessor-version":[{"id":8826,"href":"https:\/\/gtm360.com\/blog\/wp-json\/wp\/v2\/posts\/3474\/revisions\/8826"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gtm360.com\/blog\/wp-json\/wp\/v2\/media\/3536"}],"wp:attachment":[{"href":"https:\/\/gtm360.com\/blog\/wp-json\/wp\/v2\/media?parent=3474"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gtm360.com\/blog\/wp-json\/wp\/v2\/categories?post=3474"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gtm360.com\/blog\/wp-json\/wp\/v2\/tags?post=3474"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}