{"id":8178,"date":"2017-11-30T21:53:41","date_gmt":"2017-11-30T21:53:41","guid":{"rendered":"https:\/\/designcanyon.com\/?p=8178"},"modified":"2017-11-30T21:53:41","modified_gmt":"2017-11-30T21:53:41","slug":"improve-website-performance-scaled-images","status":"publish","type":"post","link":"https:\/\/designcanyon.com\/articles\/improve-website-performance-scaled-images\/","title":{"rendered":"How to Improve Website Performance with Scaled Images"},"content":{"rendered":"

What are Scaled Images?
\n<\/strong><\/p>\n

It\u2019s basically an image that has been scaled to match the exact size defined in CSS or HTML.<\/p>\n

\"\"<\/p>\n

For instance, let\u2019s say your source image is 400 x 400 but you want to display it at 40 x 40. To achieve this, first, browser will have to download this large file and then reduce its size to 40 x 40, which is the actual requirement.<\/p>\n

This is an inefficient method as the browser has to download a large size picture than compute it to the smaller size, which may increase the load time of a website.<\/p>\n

Opposed to this, the more efficient method should be rather than using 400 x 400 image, users must use the accurate required image size because when file size will be accurate, page will load faster and improve your website’s performance.<\/p>\n

To read the full tutorial visit Hostinger<\/a>.<\/p>\n

What are the advantages of Serving Scaled Images?<\/strong><\/p>\n

Inappropriate sized images are the worst enemy of a website\u2019s performance as they can seriously delay page load time.<\/p>\n

Opposed to this, properly sized images not only improve the load time of your website but also save many bytes of data.<\/p>\n

Besides this, it also helps your website to load faster on small devices such as smartphones and tablets that have been widely used to access the internet.<\/p>\n

Moreover, in the modern Search Engine Optimization scenario, scaled images have turned into a leading recommendation to enhance website\u2019s ranking on popular search engines like Google, Bing, etc.<\/p>\n

How to Analyze and Fix Serve Scaled Images Issue<\/strong><\/p>\n

There are a lot of ways you can fix to serve scaled images issues. However, the most recommended method is given below. Remember, every image which size is greater than your content width will have this issue.<\/p>\n

Before you start with this guide, you need the followings:<\/p>\n

FTP Access-(Image directories)<\/p>\n

Image Editor-(Any online image editing tool or paint)<\/p>\n

Step-1<\/strong> First, Analyze Your Site<\/p>\n

You can use any tool but I would suggest using GTMetrix<\/a> since it identifies the accurate image dimension that should be used.<\/p>\n

I have also used this tool to analyze one of my sites built in WordPress. The tool provided me a list of images with their exact location and suggested value.<\/p>\n

I am sharing the snapshot of the same with you below.<\/p>\n

\"\"<\/p>\n

GTMetrix, showed me the exact size of the uploaded image and recommended size as well.<\/p>\n

Step-2 <\/strong>First, download the images you need to scale down. The images identified by GTMetrix tool can be downloaded using any FTP client.<\/p>\n

You can use \u2018Paint\u2019 application, which is easily available in all Windows operating systems to scale down the images. Besides this, you can also use online image editor tool such as picresize.<\/p>\n

Now scale down images to the recommended values.<\/p>\n

Save the image with the same filename so that you can easily replace the old ones without making any changes in the script code.<\/p>\n

Step-3 <\/strong>Test The Changes
\n<\/strong><\/p>\n

Now it is time to test the images. Make sure you have re-uploaded the same images with the same filename so that you don\u2019t encounter 404 error.<\/p>\n

Hopefully, this short guide will help you to serve scaled image and increase your website\u2019s performance.<\/p>\n","protected":false},"excerpt":{"rendered":"

What are Scaled Images? It\u2019s basically an image that has been scaled to match the exact size defined in CSS or HTML. For instance, let\u2019s…<\/p>\n","protected":false},"author":799,"featured_media":8179,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[179],"tags":[],"yoast_head":"\nHow to Improve Website Performance with Scaled Images - DesignCanyon<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/designcanyon.com\/articles\/improve-website-performance-scaled-images\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Improve Website Performance with Scaled Images - DesignCanyon\" \/>\n<meta property=\"og:description\" content=\"What are Scaled Images? It\u2019s basically an image that has been scaled to match the exact size defined in CSS or HTML. For instance, let\u2019s…\" \/>\n<meta property=\"og:url\" content=\"https:\/\/designcanyon.com\/articles\/improve-website-performance-scaled-images\/\" \/>\n<meta property=\"og:site_name\" content=\"DesignCanyon\" \/>\n<meta property=\"article:published_time\" content=\"2017-11-30T21:53:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/designcanyon.com\/wp-content\/uploads\/2017\/11\/1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"900\" \/>\n\t<meta property=\"og:image:height\" content=\"300\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"najam\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@shafiq\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"najam\" \/>\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:\/\/designcanyon.com\/articles\/improve-website-performance-scaled-images\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/designcanyon.com\/articles\/improve-website-performance-scaled-images\/\"},\"author\":{\"name\":\"najam\",\"@id\":\"https:\/\/designcanyon.com\/#\/schema\/person\/c65dfa1cc5b68df3651dbe202cf446bb\"},\"headline\":\"How to Improve Website Performance with Scaled Images\",\"datePublished\":\"2017-11-30T21:53:41+00:00\",\"dateModified\":\"2017-11-30T21:53:41+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/designcanyon.com\/articles\/improve-website-performance-scaled-images\/\"},\"wordCount\":542,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/designcanyon.com\/#organization\"},\"articleSection\":[\"Articles\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/designcanyon.com\/articles\/improve-website-performance-scaled-images\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/designcanyon.com\/articles\/improve-website-performance-scaled-images\/\",\"url\":\"https:\/\/designcanyon.com\/articles\/improve-website-performance-scaled-images\/\",\"name\":\"How to Improve Website Performance with Scaled Images - DesignCanyon\",\"isPartOf\":{\"@id\":\"https:\/\/designcanyon.com\/#website\"},\"datePublished\":\"2017-11-30T21:53:41+00:00\",\"dateModified\":\"2017-11-30T21:53:41+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/designcanyon.com\/articles\/improve-website-performance-scaled-images\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/designcanyon.com\/articles\/improve-website-performance-scaled-images\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/designcanyon.com\/articles\/improve-website-performance-scaled-images\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/designcanyon.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Improve Website Performance with Scaled Images\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/designcanyon.com\/#website\",\"url\":\"https:\/\/designcanyon.com\/\",\"name\":\"DesignCanyon\",\"description\":\"Creativity, Technology and Everything in between.\",\"publisher\":{\"@id\":\"https:\/\/designcanyon.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/designcanyon.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/designcanyon.com\/#organization\",\"name\":\"DesignCanyon\",\"url\":\"https:\/\/designcanyon.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/designcanyon.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/designcanyon.com\/wp-content\/uploads\/2016\/12\/logo-designcanyon.svg\",\"contentUrl\":\"https:\/\/designcanyon.com\/wp-content\/uploads\/2016\/12\/logo-designcanyon.svg\",\"caption\":\"DesignCanyon\"},\"image\":{\"@id\":\"https:\/\/designcanyon.com\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/designcanyon.com\/#\/schema\/person\/c65dfa1cc5b68df3651dbe202cf446bb\",\"name\":\"najam\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/designcanyon.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/8440dd55c0ba529e4d6f7cf20c945997?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/8440dd55c0ba529e4d6f7cf20c945997?s=96&d=mm&r=g\",\"caption\":\"najam\"},\"sameAs\":[\"https:\/\/twitter.com\/shafiq\"],\"url\":\"https:\/\/designcanyon.com\/author\/shafiq\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Improve Website Performance with Scaled Images - DesignCanyon","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:\/\/designcanyon.com\/articles\/improve-website-performance-scaled-images\/","og_locale":"en_US","og_type":"article","og_title":"How to Improve Website Performance with Scaled Images - DesignCanyon","og_description":"What are Scaled Images? It\u2019s basically an image that has been scaled to match the exact size defined in CSS or HTML. For instance, let\u2019s…","og_url":"https:\/\/designcanyon.com\/articles\/improve-website-performance-scaled-images\/","og_site_name":"DesignCanyon","article_published_time":"2017-11-30T21:53:41+00:00","og_image":[{"width":900,"height":300,"url":"https:\/\/designcanyon.com\/wp-content\/uploads\/2017\/11\/1.png","type":"image\/png"}],"author":"najam","twitter_card":"summary_large_image","twitter_creator":"@shafiq","twitter_misc":{"Written by":"najam","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/designcanyon.com\/articles\/improve-website-performance-scaled-images\/#article","isPartOf":{"@id":"https:\/\/designcanyon.com\/articles\/improve-website-performance-scaled-images\/"},"author":{"name":"najam","@id":"https:\/\/designcanyon.com\/#\/schema\/person\/c65dfa1cc5b68df3651dbe202cf446bb"},"headline":"How to Improve Website Performance with Scaled Images","datePublished":"2017-11-30T21:53:41+00:00","dateModified":"2017-11-30T21:53:41+00:00","mainEntityOfPage":{"@id":"https:\/\/designcanyon.com\/articles\/improve-website-performance-scaled-images\/"},"wordCount":542,"commentCount":0,"publisher":{"@id":"https:\/\/designcanyon.com\/#organization"},"articleSection":["Articles"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/designcanyon.com\/articles\/improve-website-performance-scaled-images\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/designcanyon.com\/articles\/improve-website-performance-scaled-images\/","url":"https:\/\/designcanyon.com\/articles\/improve-website-performance-scaled-images\/","name":"How to Improve Website Performance with Scaled Images - DesignCanyon","isPartOf":{"@id":"https:\/\/designcanyon.com\/#website"},"datePublished":"2017-11-30T21:53:41+00:00","dateModified":"2017-11-30T21:53:41+00:00","breadcrumb":{"@id":"https:\/\/designcanyon.com\/articles\/improve-website-performance-scaled-images\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/designcanyon.com\/articles\/improve-website-performance-scaled-images\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/designcanyon.com\/articles\/improve-website-performance-scaled-images\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/designcanyon.com\/"},{"@type":"ListItem","position":2,"name":"How to Improve Website Performance with Scaled Images"}]},{"@type":"WebSite","@id":"https:\/\/designcanyon.com\/#website","url":"https:\/\/designcanyon.com\/","name":"DesignCanyon","description":"Creativity, Technology and Everything in between.","publisher":{"@id":"https:\/\/designcanyon.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/designcanyon.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/designcanyon.com\/#organization","name":"DesignCanyon","url":"https:\/\/designcanyon.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/designcanyon.com\/#\/schema\/logo\/image\/","url":"https:\/\/designcanyon.com\/wp-content\/uploads\/2016\/12\/logo-designcanyon.svg","contentUrl":"https:\/\/designcanyon.com\/wp-content\/uploads\/2016\/12\/logo-designcanyon.svg","caption":"DesignCanyon"},"image":{"@id":"https:\/\/designcanyon.com\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/designcanyon.com\/#\/schema\/person\/c65dfa1cc5b68df3651dbe202cf446bb","name":"najam","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/designcanyon.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/8440dd55c0ba529e4d6f7cf20c945997?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/8440dd55c0ba529e4d6f7cf20c945997?s=96&d=mm&r=g","caption":"najam"},"sameAs":["https:\/\/twitter.com\/shafiq"],"url":"https:\/\/designcanyon.com\/author\/shafiq\/"}]}},"_links":{"self":[{"href":"https:\/\/designcanyon.com\/wp-json\/wp\/v2\/posts\/8178"}],"collection":[{"href":"https:\/\/designcanyon.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/designcanyon.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/designcanyon.com\/wp-json\/wp\/v2\/users\/799"}],"replies":[{"embeddable":true,"href":"https:\/\/designcanyon.com\/wp-json\/wp\/v2\/comments?post=8178"}],"version-history":[{"count":1,"href":"https:\/\/designcanyon.com\/wp-json\/wp\/v2\/posts\/8178\/revisions"}],"predecessor-version":[{"id":8181,"href":"https:\/\/designcanyon.com\/wp-json\/wp\/v2\/posts\/8178\/revisions\/8181"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/designcanyon.com\/wp-json\/wp\/v2\/media\/8179"}],"wp:attachment":[{"href":"https:\/\/designcanyon.com\/wp-json\/wp\/v2\/media?parent=8178"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/designcanyon.com\/wp-json\/wp\/v2\/categories?post=8178"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/designcanyon.com\/wp-json\/wp\/v2\/tags?post=8178"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}