{"id":620,"date":"2015-02-11T09:13:25","date_gmt":"2015-02-11T14:13:25","guid":{"rendered":"https:\/\/www.sharpinnovations.com\/blog\/?p=620"},"modified":"2019-05-03T14:26:14","modified_gmt":"2019-05-03T18:26:14","slug":"smaller-images-equal-faster-load-times","status":"publish","type":"post","link":"https:\/\/www.sharpinnovations.com\/blog\/2015\/02\/smaller-images-equal-faster-load-times\/","title":{"rendered":"Smaller Images Equal Faster Load Times"},"content":{"rendered":"

Website page load times are important to users and search engines, alike. In both cases, loading pages faster is better\u2014Google rankings improve, users have a better experience, and bounce rates drop. Perhaps it comes as no surprise that one way to improve page load times is to use fewer images, or use images with small file sizes. With that in mind, website development has long focused on using very few images in the actual site design (done through cascading style sheets, where possible). Nonetheless, the problem persists, because images are still widely used throughout the actual website content. There have been many solutions generated over the years to address this concern, including loading the images on-the-go as they became visible on the page. While this is a reasonable solution, it comes with the downside of users having to wait for content to become available, even after the page itself has already loaded.<\/p>\n

\"srcset
The code for srcset handles what size photo is loaded on your device. The optimum size is selected which increases page load speed.<\/figcaption><\/figure>\n

Recently, there has been a lot of talk in the web design community about the usage of the \u201csrcset\u201d and \u201csizes\u201d attributes of an image. In short, srcset allows the browser to determine which image (out of a set) is the best to use in a given situation. These \u201csituations\u201d that it compares are that of the viewable image size, and the pixel density of one’s browser. This is true for both computers of varying types, as well as mobile devices (particularly important where download speeds are often slower). It take this information, then decides which of the available images in its set best fits that space. Doing this allows for the images on a site to dynamically choose the smallest available image for a certain size, ignoring the larger sizes which would be larger and cause slower load times.<\/p>\n

\"srcset
The tablet or desktop loads a higher resolution image than the mobile version, but both appear the same to the user. The file size is reduced depending on what device you use.<\/figcaption><\/figure>\n

The use of srcset is an important development for the web development community as we pursue improved user experiences and search engine performance. For more information about srcset, the code behind it, and how we implement it, check out: http:\/\/responsiveimages.org\/<\/a>. advantage of srcset in the years to come, which will only benefit the web even more!<\/p>\n","protected":false},"excerpt":{"rendered":"

Website page load times are important to users and search engines, alike. In both cases, loading pages faster is better\u2014Google rankings improve, users have a better experience, and bounce rates drop. Perhaps it comes as no surprise that one way to improve page load times is to use fewer images, or use images with small…<\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6,14,4],"tags":[71,27,68,69,70],"class_list":["post-620","post","type-post","status-publish","format-standard","hentry","category-mobile-web-design","category-seo","category-website-design","tag-faster-mobile-website","tag-responsive-web-design","tag-srcset","tag-srcset-images","tag-website-development"],"yoast_head":"\nSmaller Images Equal Faster Load Times - Sharp Innovations Blog<\/title>\n<meta name=\"description\" content=\"Website page load times are important to users and search engines, alike. In both cases, loading pages faster is better\u2014Google rankings improve, users have a better experience, and bounce rates drop. Perhaps it comes as no surprise that one way to improve page load times is to use fewer images, or use images with small...\" \/>\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.sharpinnovations.com\/blog\/2015\/02\/smaller-images-equal-faster-load-times\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Smaller Images Equal Faster Load Times - Sharp Innovations Blog\" \/>\n<meta property=\"og:description\" content=\"Website page load times are important to users and search engines, alike. In both cases, loading pages faster is better\u2014Google rankings improve, users have a better experience, and bounce rates drop. Perhaps it comes as no surprise that one way to improve page load times is to use fewer images, or use images with small...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.sharpinnovations.com\/blog\/2015\/02\/smaller-images-equal-faster-load-times\/\" \/>\n<meta property=\"og:site_name\" content=\"Sharp Innovations Blog\" \/>\n<meta property=\"article:published_time\" content=\"2015-02-11T14:13:25+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-05-03T18:26:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.sharpinnovations.com\/blog\/wp-content\/uploads\/2015\/02\/srcset-code.jpg\" \/>\n<meta name=\"author\" content=\"Peter Stevenson\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Peter Stevenson\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.sharpinnovations.com\/blog\/2015\/02\/smaller-images-equal-faster-load-times\/\",\"url\":\"https:\/\/www.sharpinnovations.com\/blog\/2015\/02\/smaller-images-equal-faster-load-times\/\",\"name\":\"Smaller Images Equal Faster Load Times - Sharp Innovations Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.sharpinnovations.com\/blog\/#website\"},\"datePublished\":\"2015-02-11T14:13:25+00:00\",\"dateModified\":\"2019-05-03T18:26:14+00:00\",\"author\":{\"@id\":\"https:\/\/www.sharpinnovations.com\/blog\/#\/schema\/person\/f4c13875615fd6d3bced5ab67384641e\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.sharpinnovations.com\/blog\/2015\/02\/smaller-images-equal-faster-load-times\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.sharpinnovations.com\/blog\/2015\/02\/smaller-images-equal-faster-load-times\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.sharpinnovations.com\/blog\/2015\/02\/smaller-images-equal-faster-load-times\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.sharpinnovations.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Smaller Images Equal Faster Load Times\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.sharpinnovations.com\/blog\/#website\",\"url\":\"https:\/\/www.sharpinnovations.com\/blog\/\",\"name\":\"Sharp Innovations Blog\",\"description\":\"Web Design, Development, and Internet Marketing Blog\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.sharpinnovations.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.sharpinnovations.com\/blog\/#\/schema\/person\/f4c13875615fd6d3bced5ab67384641e\",\"name\":\"Peter Stevenson\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.sharpinnovations.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/690f2437ddc98517a65c4a9c2fbd4c5b38381e7ee0dd59d13bc5e5d1a8a4b82b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/690f2437ddc98517a65c4a9c2fbd4c5b38381e7ee0dd59d13bc5e5d1a8a4b82b?s=96&d=mm&r=g\",\"caption\":\"Peter Stevenson\"},\"description\":\"Peter Stevenson is the rare combination a person who\u2019s not only driven, but passionate for all the right reasons. \u201cI love helping people,\u201d Peter says. \u201cI love the idea that the project I\u2019m working on could have a positive effect on someone\u2019s life.\u201d\",\"sameAs\":[\"https:\/\/plus.google.com\/113812486975179265781\"],\"url\":\"https:\/\/www.sharpinnovations.com\/blog\/author\/pstevenson\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Smaller Images Equal Faster Load Times - Sharp Innovations Blog","description":"Website page load times are important to users and search engines, alike. In both cases, loading pages faster is better\u2014Google rankings improve, users have a better experience, and bounce rates drop. Perhaps it comes as no surprise that one way to improve page load times is to use fewer images, or use images with small...","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.sharpinnovations.com\/blog\/2015\/02\/smaller-images-equal-faster-load-times\/","og_locale":"en_US","og_type":"article","og_title":"Smaller Images Equal Faster Load Times - Sharp Innovations Blog","og_description":"Website page load times are important to users and search engines, alike. In both cases, loading pages faster is better\u2014Google rankings improve, users have a better experience, and bounce rates drop. Perhaps it comes as no surprise that one way to improve page load times is to use fewer images, or use images with small...","og_url":"https:\/\/www.sharpinnovations.com\/blog\/2015\/02\/smaller-images-equal-faster-load-times\/","og_site_name":"Sharp Innovations Blog","article_published_time":"2015-02-11T14:13:25+00:00","article_modified_time":"2019-05-03T18:26:14+00:00","og_image":[{"url":"https:\/\/www.sharpinnovations.com\/blog\/wp-content\/uploads\/2015\/02\/srcset-code.jpg"}],"author":"Peter Stevenson","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Peter Stevenson","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.sharpinnovations.com\/blog\/2015\/02\/smaller-images-equal-faster-load-times\/","url":"https:\/\/www.sharpinnovations.com\/blog\/2015\/02\/smaller-images-equal-faster-load-times\/","name":"Smaller Images Equal Faster Load Times - Sharp Innovations Blog","isPartOf":{"@id":"https:\/\/www.sharpinnovations.com\/blog\/#website"},"datePublished":"2015-02-11T14:13:25+00:00","dateModified":"2019-05-03T18:26:14+00:00","author":{"@id":"https:\/\/www.sharpinnovations.com\/blog\/#\/schema\/person\/f4c13875615fd6d3bced5ab67384641e"},"breadcrumb":{"@id":"https:\/\/www.sharpinnovations.com\/blog\/2015\/02\/smaller-images-equal-faster-load-times\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.sharpinnovations.com\/blog\/2015\/02\/smaller-images-equal-faster-load-times\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.sharpinnovations.com\/blog\/2015\/02\/smaller-images-equal-faster-load-times\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.sharpinnovations.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Smaller Images Equal Faster Load Times"}]},{"@type":"WebSite","@id":"https:\/\/www.sharpinnovations.com\/blog\/#website","url":"https:\/\/www.sharpinnovations.com\/blog\/","name":"Sharp Innovations Blog","description":"Web Design, Development, and Internet Marketing Blog","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.sharpinnovations.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.sharpinnovations.com\/blog\/#\/schema\/person\/f4c13875615fd6d3bced5ab67384641e","name":"Peter Stevenson","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.sharpinnovations.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/690f2437ddc98517a65c4a9c2fbd4c5b38381e7ee0dd59d13bc5e5d1a8a4b82b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/690f2437ddc98517a65c4a9c2fbd4c5b38381e7ee0dd59d13bc5e5d1a8a4b82b?s=96&d=mm&r=g","caption":"Peter Stevenson"},"description":"Peter Stevenson is the rare combination a person who\u2019s not only driven, but passionate for all the right reasons. \u201cI love helping people,\u201d Peter says. \u201cI love the idea that the project I\u2019m working on could have a positive effect on someone\u2019s life.\u201d","sameAs":["https:\/\/plus.google.com\/113812486975179265781"],"url":"https:\/\/www.sharpinnovations.com\/blog\/author\/pstevenson\/"}]}},"_links":{"self":[{"href":"https:\/\/www.sharpinnovations.com\/blog\/wp-json\/wp\/v2\/posts\/620","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.sharpinnovations.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.sharpinnovations.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.sharpinnovations.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sharpinnovations.com\/blog\/wp-json\/wp\/v2\/comments?post=620"}],"version-history":[{"count":8,"href":"https:\/\/www.sharpinnovations.com\/blog\/wp-json\/wp\/v2\/posts\/620\/revisions"}],"predecessor-version":[{"id":1452,"href":"https:\/\/www.sharpinnovations.com\/blog\/wp-json\/wp\/v2\/posts\/620\/revisions\/1452"}],"wp:attachment":[{"href":"https:\/\/www.sharpinnovations.com\/blog\/wp-json\/wp\/v2\/media?parent=620"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sharpinnovations.com\/blog\/wp-json\/wp\/v2\/categories?post=620"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sharpinnovations.com\/blog\/wp-json\/wp\/v2\/tags?post=620"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}