{"id":31635,"date":"2014-04-30T08:00:15","date_gmt":"2014-04-30T15:00:15","guid":{"rendered":"http:\/\/www.bruceclay.com\/blog\/?p=31635"},"modified":"2019-07-22T17:15:38","modified_gmt":"2019-07-23T00:15:38","slug":"mobile-seo-responsive-design-image-optimization","status":"publish","type":"post","link":"https:\/\/www.bruceclay.com\/blog\/mobile-seo-responsive-design-image-optimization\/","title":{"rendered":"The #1 Thing You Can Do to Improve Mobile UX: Image Optimization"},"content":{"rendered":"

Or: So You\u2019ve Got Responsive Design, Now What?<\/strong><\/p>\n

Having a responsive design is the Google-recommended way to deliver content on mobile devices. While other mobile formats are acceptable to Google as well, Google prefers one over the others. The benefits of responsive design are clear, but what happens when responsive web design isn\u2019t good enough? An issue complicating mobile UX for many responsive sites: load time and image heavy sites.<\/b><\/p>\n

Load Time for Responsive Sites<\/h2>\n
\"Photo<\/a>
Photo by The U.S. Army<\/a>\u00a0 (CC by 2.0<\/a>).<\/figcaption><\/figure>\n

Web developer Trilibis recently released a survey<\/a> on the web performance of sites utilizing responsive web design and found that 69 percent of those sites did not have an acceptable load time<\/b>.<\/p>\n

Part of catering to a seamless mobile user experience means that site performance should be up to par; users aren\u2019t very forgiving of sites that are slow to load. Users don\u2019t like it, so they bounce. Google doesn\u2019t like it, so you rank lower. Desktop sites are viewed in this way; why would the expectation not translate to mobile devices, especially considering the narrower bandwidth?<\/p>\n

Perhaps we overlooked user experience and took for granted performance on mobile devices. We thought maybe the relatively fast load times on our desktop sites would translate to responsive design. Our site is content-rich and relevant to user queries. So, what gives?<\/p>\n

The single-most contributing factor to slow load times on responsive design mobile sites is images, says the Trilibis survey. Big, fat images.<\/b><\/p>\n

Senior VP of Sales at Trilibis, Ted Verani, asserted that the mobile web \u201cis considerably slower than its wireline counterpart. By serving images and pages that are optimized for mobile devices, we see dramatic improvements in page-load time, which translates to a much better overall user experience.\u201d<\/p>\n

It\u2019s easy to forget about images and the effect they have on load times, but if, we as an Internet marketing industry, have forgotten images, we have forgotten our mobile users. We must think of mobile as the lowest common denominator, as the key driver of traffic to our sites.<\/p>\n

This isn\u2019t news by any means, but clearly, image optimization is something that\u2019s been overlooked considering 32 percent of the mobile sites surveyed loaded in an abysmal 8-48 seconds with page sizes in excess of 1.7MB. Want to know what the average page sizes were for the top-30 online retailers according to the Keynote Mobile Commerce Performance Index<\/a>? 420KB, with an average load time of 3.7 seconds.<\/p>\n

Optimizing images as a means of decreasing page weight and load times is probably the easiest way to improve site performance, thereby improving mobile user experience by catering to the user\u2019s expectation of delivering here and now.<\/p>\n

3-Step SEO Solution to Quick Loading Images<\/h2>\n

There are three ways to easily optimize images: compression and definition.<\/p>\n

First, use a page speed to tool to identify which images are the culprits<\/i>. I previously wrote about Mobile UX<\/a> and using Google\u2019s PageSpeed Insights Tool<\/a>. Using this tool will point you in the direction of which images to optimize.<\/p>\n

Next, compress your images<\/em>. This can consist of anything from choosing a better, less space-intensive, image format, to determining how images are going to load on the page. Either way, chances are, the size of the images on your site need to come down, and there are many methods and tools that can be employed to accomplish such a goal. HTML5Rocks has an exhaustive article on a number of equally valid ideas on image compression<\/a>. Check it out — your mobile UX depends on it.<\/p>\n

Lastly, image dimensions<\/em>. This is critically important for both desktop and mobile\/responsive sites. Not defining your images means the browser must render the image as it loads the other elements of the page. When dimensions are defined, the browser will pre-render the space in accordance with the dimensions.<\/p>\n

In other words, there are no hang ups on loading images. Plus, it can act as a poor man\u2019s version of image compression. It is worth noting that images should be defined proportionate to their original dimensions, otherwise the images will be sized correctly, but the contents will look slightly humorous.<\/p>\n

It\u2019s clear employing responsive design isn\u2019t enough. We can\u2019t overlook the simplest elements, not even from a general optimization standpoint, image optimization included.<\/p>\n

This may not fix all the ills on all responsive web design sites, but it can go a long way in getting you there. Put these simple tips together and you\u2019ve already gone farther than most in addressing site performance issues, and more importantly, how users interact with your site.<\/p>\n","protected":false},"excerpt":{"rendered":"

Or: So You\u2019ve Got Responsive Design, Now What?<\/p>\n

Having a responsive design is the Google-recommended way to deliver content on mobile devices. While other mobile formats are acceptable to Google as well, Google prefers one over the others. So, while the benefits of responsive design are clear, but what happens when responsive web design isn\u2019t good enough? An issue complicating mobile UX for many responsive sites: load time and image heavy sites.<\/p>\n

Web developer Trilibis recently released a survey on the web performance of sites utilizing responsive web design and found that 69 percent of those sites did not have an acceptable load time. Perhaps we overlooked user experience and took for granted performance on mobile devices. We thought maybe the relatively fast load times on our desktop sites would translate to responsive design. Our site is content-rich and relevant to user queries. So, what gives?<\/p>\n

The single-most contributing factor to slow load times on responsive design mobile sites is images, says the Tribilis survey. Big, fat images. <\/p>\n

Read more of The #1 Thing You Can Do to Improve Mobile UX: Image Optimization<\/a>.<\/p>\n","protected":false},"author":66,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"content-type":"","footnotes":""},"categories":[4],"tags":[104,1232,1114],"acf":[],"yoast_head":"BruceClay - The #1 Thing You can Do to Improve Mobile UX: Image SEO Optimization<\/title>\n<meta name=\"description\" content=\"Three steps to image SEO. Correct the main issues that complicate mobile UX for many responsive sites: load time and heavy images.\" \/>\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.bruceclay.com\/blog\/mobile-seo-responsive-design-image-optimization\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"The #1 Thing You can Do to Improve Mobile UX: Image SEO Optimization\" \/>\n<meta property=\"og:description\" content=\"Three steps to image SEO. Correct the main issues that complicate mobile UX for many responsive sites: load time and heavy images.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.bruceclay.com\/blog\/mobile-seo-responsive-design-image-optimization\/\" \/>\n<meta property=\"og:site_name\" content=\"Bruce Clay, Inc.\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/matthewayoung\" \/>\n<meta property=\"article:published_time\" content=\"2014-04-30T15:00:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-07-23T00:15:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.bruceclay.com\/blog\/wp-content\/uploads\/2014\/04\/4271795260_f26f7f71cf_z.jpg\" \/>\n<meta name=\"author\" content=\"Matthew Young\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@matthewayoung\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Matthew Young\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.bruceclay.com\/blog\/mobile-seo-responsive-design-image-optimization\/\",\"url\":\"https:\/\/www.bruceclay.com\/blog\/mobile-seo-responsive-design-image-optimization\/\",\"name\":\"The #1 Thing You can Do to Improve Mobile UX: Image SEO Optimization\",\"isPartOf\":{\"@id\":\"https:\/\/www.bruceclay.com\/#website\"},\"datePublished\":\"2014-04-30T15:00:15+00:00\",\"dateModified\":\"2019-07-23T00:15:38+00:00\",\"author\":{\"@id\":\"https:\/\/www.bruceclay.com\/#\/schema\/person\/de9f977341ddd5bfa5646585c3cb2a37\"},\"description\":\"Three steps to image SEO. Correct the main issues that complicate mobile UX for many responsive sites: load time and heavy images.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.bruceclay.com\/blog\/mobile-seo-responsive-design-image-optimization\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.bruceclay.com\/blog\/mobile-seo-responsive-design-image-optimization\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.bruceclay.com\/blog\/mobile-seo-responsive-design-image-optimization\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.bruceclay.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"The #1 Thing You Can Do to Improve Mobile UX: Image Optimization\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.bruceclay.com\/#website\",\"url\":\"https:\/\/www.bruceclay.com\/\",\"name\":\"Bruce Clay, Inc.\",\"description\":\"SEO and Internet Marketing\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.bruceclay.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.bruceclay.com\/#\/schema\/person\/de9f977341ddd5bfa5646585c3cb2a37\",\"name\":\"Matthew Young\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.bruceclay.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/150811f1b81c3edcb35fed59b795d2e0?s=96&d=retro&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/150811f1b81c3edcb35fed59b795d2e0?s=96&d=retro&r=g\",\"caption\":\"Matthew Young\"},\"description\":\"I'm Matthew Young, senior SEO specialist at Adobe, which I joined in 2014 after working for Bruce Clay Inc. for three years as an SEO analyst. At Adobe, clients are my business. I work to ensure the highest levels of digital marketing success in all forms and maintain exceptional working relationships with them all. My opinions are my own and not those of Adobe Systems Inc.\",\"sameAs\":[\"https:\/\/www.facebook.com\/matthewayoung\",\"https:\/\/twitter.com\/matthewayoung\"],\"url\":\"https:\/\/www.bruceclay.com\/blog\/author\/matthew-young\/\"}]}<\/script>","yoast_head_json":{"title":"BruceClay - The #1 Thing You can Do to Improve Mobile UX: Image SEO Optimization","description":"Three steps to image SEO. Correct the main issues that complicate mobile UX for many responsive sites: load time and heavy images.","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.bruceclay.com\/blog\/mobile-seo-responsive-design-image-optimization\/","og_locale":"en_US","og_type":"article","og_title":"The #1 Thing You can Do to Improve Mobile UX: Image SEO Optimization","og_description":"Three steps to image SEO. Correct the main issues that complicate mobile UX for many responsive sites: load time and heavy images.","og_url":"https:\/\/www.bruceclay.com\/blog\/mobile-seo-responsive-design-image-optimization\/","og_site_name":"Bruce Clay, Inc.","article_author":"https:\/\/www.facebook.com\/matthewayoung","article_published_time":"2014-04-30T15:00:15+00:00","article_modified_time":"2019-07-23T00:15:38+00:00","og_image":[{"url":"https:\/\/www.bruceclay.com\/blog\/wp-content\/uploads\/2014\/04\/4271795260_f26f7f71cf_z.jpg"}],"author":"Matthew Young","twitter_card":"summary_large_image","twitter_creator":"@matthewayoung","twitter_misc":{"Written by":"Matthew Young","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.bruceclay.com\/blog\/mobile-seo-responsive-design-image-optimization\/","url":"https:\/\/www.bruceclay.com\/blog\/mobile-seo-responsive-design-image-optimization\/","name":"The #1 Thing You can Do to Improve Mobile UX: Image SEO Optimization","isPartOf":{"@id":"https:\/\/www.bruceclay.com\/#website"},"datePublished":"2014-04-30T15:00:15+00:00","dateModified":"2019-07-23T00:15:38+00:00","author":{"@id":"https:\/\/www.bruceclay.com\/#\/schema\/person\/de9f977341ddd5bfa5646585c3cb2a37"},"description":"Three steps to image SEO. Correct the main issues that complicate mobile UX for many responsive sites: load time and heavy images.","breadcrumb":{"@id":"https:\/\/www.bruceclay.com\/blog\/mobile-seo-responsive-design-image-optimization\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.bruceclay.com\/blog\/mobile-seo-responsive-design-image-optimization\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.bruceclay.com\/blog\/mobile-seo-responsive-design-image-optimization\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.bruceclay.com\/"},{"@type":"ListItem","position":2,"name":"The #1 Thing You Can Do to Improve Mobile UX: Image Optimization"}]},{"@type":"WebSite","@id":"https:\/\/www.bruceclay.com\/#website","url":"https:\/\/www.bruceclay.com\/","name":"Bruce Clay, Inc.","description":"SEO and Internet Marketing","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.bruceclay.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.bruceclay.com\/#\/schema\/person\/de9f977341ddd5bfa5646585c3cb2a37","name":"Matthew Young","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.bruceclay.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/150811f1b81c3edcb35fed59b795d2e0?s=96&d=retro&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/150811f1b81c3edcb35fed59b795d2e0?s=96&d=retro&r=g","caption":"Matthew Young"},"description":"I'm Matthew Young, senior SEO specialist at Adobe, which I joined in 2014 after working for Bruce Clay Inc. for three years as an SEO analyst. At Adobe, clients are my business. I work to ensure the highest levels of digital marketing success in all forms and maintain exceptional working relationships with them all. My opinions are my own and not those of Adobe Systems Inc.","sameAs":["https:\/\/www.facebook.com\/matthewayoung","https:\/\/twitter.com\/matthewayoung"],"url":"https:\/\/www.bruceclay.com\/blog\/author\/matthew-young\/"}]}},"_links":{"self":[{"href":"https:\/\/www.bruceclay.com\/wp-json\/wp\/v2\/posts\/31635"}],"collection":[{"href":"https:\/\/www.bruceclay.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bruceclay.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bruceclay.com\/wp-json\/wp\/v2\/users\/66"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bruceclay.com\/wp-json\/wp\/v2\/comments?post=31635"}],"version-history":[{"count":22,"href":"https:\/\/www.bruceclay.com\/wp-json\/wp\/v2\/posts\/31635\/revisions"}],"predecessor-version":[{"id":70133,"href":"https:\/\/www.bruceclay.com\/wp-json\/wp\/v2\/posts\/31635\/revisions\/70133"}],"wp:attachment":[{"href":"https:\/\/www.bruceclay.com\/wp-json\/wp\/v2\/media?parent=31635"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bruceclay.com\/wp-json\/wp\/v2\/categories?post=31635"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bruceclay.com\/wp-json\/wp\/v2\/tags?post=31635"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}