CINXE.COM

<!DOCTYPE html> <html> <head id="head"><script type="text/javascript" src="/_static/js/bundle-playback.js?v=HxkREWBo" charset="utf-8"></script> <script type="text/javascript" src="/_static/js/wombat.js?v=txqj7nKC" charset="utf-8"></script> <script>window.RufflePlayer=window.RufflePlayer||{};window.RufflePlayer.config={"autoplay":"on","unmuteOverlay":"hidden"};</script> <script type="text/javascript" src="/_static/js/ruffle/ruffle.js"></script> <script type="text/javascript"> __wm.init("https://web.archive.org/web"); __wm.wombat("https://www.msinteractive.com/blog/web-development/image-optimization","20201203035119","https://web.archive.org/","web","/_static/", "1606967479"); </script> <link rel="stylesheet" type="text/css" href="/_static/css/banner-styles.css?v=S1zqJCYt" /> <link rel="stylesheet" type="text/css" href="/_static/css/iconochive.css?v=3PDvdIFv" />  <title> Image Optimization via Image Management for Best Results - Moonstone Interactive </title><meta name="description" content="Learn how an image management strategy maximizes image optimization for better visual quality and performance while simplifying the image delivery process"/> <meta charset="UTF-8"/> <meta name="keywords" content="Image Optimization, Image management, Image resizing, Website speed performance"/> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta http-equiv="X-UA-Compatible" content="ie=edge"/> <link rel="stylesheet" href="https://web.archive.org/web/20201203035119cs_/https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="" crossorigin="anonymous">  <link rel="stylesheet" href="https://web.archive.org/web/20201203035119cs_/https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"/>   <link href="/web/20201203035119cs_/https://www.msinteractive.com/CMSPages/GetResource.ashx?stylesheetname=vendor.min" type="text/css" rel="stylesheet"/> <link href="/web/20201203035119cs_/https://www.msinteractive.com/CMSPages/GetResource.ashx?stylesheetname=main" type="text/css" rel="stylesheet"/> <link href="/web/20201203035119cs_/https://www.msinteractive.com/CMSPages/GetResource.ashx?stylesheetname=style" type="text/css" rel="stylesheet"/>   <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://web.archive.org/web/20201203035119/https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-WNRGS8S');</script>   <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://web.archive.org/web/20201203035119/https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-51126403-1', 'www.msinteractive.com'); ga('send', 'pageview'); </script>  <script data-ad-client="ca-pub-9876757397857955" async src="https://web.archive.org/web/20201203035119js_/https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>   <div itemscope itemtype="http://schema.org/ProfessionalService" style="display: none;"> <meta itemprop="name" content="Moonstone Interactive"/> <meta itemprop="url" content="https://web.archive.org/web/20201203035119/https://www.msinteractive.com/"/> <meta itemprop="priceRange" content="$0-$100000"/> <img itemprop="logo" src="https://web.archive.org/web/20201203035119im_/https://www.msinteractive.com/MSI/media/MSIMedia/Images/Logos/Moonstone-M-Logo.png" width="150px" height="150px" alt="Moonstone Interactive Logo"/> <img itemprop="image" src="https://web.archive.org/web/20201203035119im_/https://www.msinteractive.com/MSI/media/MSIMedia/Images/Logos/Moonstone-M-Logo.png" width="150px" height="150px" alt="Moonstone Interactive Logo"/> <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress"> <span itemprop="streetAddress">2010 Crow Canyon Pl #100</span> <span itemprop="addressLocality">San Ramon</span>, <span itemprop="addressRegion">CA</span> <span itemprop="postalCode">94583</span> <span itemprop="telephone">(925) 736-4178</span> </div> <div itemprop="geo" itemscope itemtype="http://schema.org/GeoCoordinates"> <meta itemprop="latitude" content="37.7791637"/> <meta itemprop="longitude" content="-121.9743457"/> </div> <a itemprop="sameAs" href="https://web.archive.org/web/20201203035119/https://www.facebook.com/Moonstone-Interactive-175850993725"></a> <a itemprop="sameAs" href="https://web.archive.org/web/20201203035119/https://www.linkedin.com/company/moonstone-interactive"></a> <a itemprop="sameAs" href="https://web.archive.org/web/20201203035119/https://www.yelp.com/biz/moonstone-interactive-san-ramon"></a> <a itemprop="sameAs" href="https://web.archive.org/web/20201203035119/https://plus.google.com/113059179769526741296"></a> <a itemprop="sameAs" href="https://web.archive.org/web/20201203035119/https://twitter.com/msiwebsites"></a> <a itemprop="sameAs" href="https://web.archive.org/web/20201203035119/https://www.youtube.com/channel/UCMFFmXQvVZY0uSQ0mlWSKsQ"></a> <meta itemprop="openingHours" content="Mo,Tu,We,Th,Fr 09:00-17:00"/> </div>   <script type="text/javascript" src="https://web.archive.org/web/20201203035119js_/https://secure.leadforensics.com/js/125360.min.js"></script> <noscript> <img alt="" src="https://web.archive.org/web/20201203035119im_/https://secure.leadforensics.com/125360.png" style="display:none;"/> </noscript>   <script type="text/javascript" src="//web.archive.org/web/20201203035119js_/https://platform-api.sharethis.com/js/sharethis.js#property=#5b862a6c7b4f100011fe46de&product=custom-share-buttons"></script>  <link href="/web/20201203035119im_/https://www.msinteractive.com/MoonstoneInteractive/media/MSI/favicon.ico" type="image/x-icon" rel="shortcut icon"/> <link href="/web/20201203035119im_/https://www.msinteractive.com/MoonstoneInteractive/media/MSI/favicon.ico" type="image/x-icon" rel="icon"/> </head> <body class="blog">  <noscript><iframe src="https://web.archive.org/web/20201203035119if_/https://www.googletagmanager.com/ns.html?id=GTM-WNRGS8S" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>  <form method="post" action="/web/20201203035119/https://www.msinteractive.com/blog/web-development/image-optimization" id="form"> <input type="hidden" name="__CMSCsrfToken" id="__CMSCsrfToken" value="K2wHOcvEldYcUBTkd8anF72HI7JYAguw5qTnHpdTSr2NHzRJzTSMOox+e+UGtC6HAIZ5F84ZT6X34Tj4nhgnHV4NbdTYCKuN2QBLQ3/bJTg="/> <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="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"/> <input type="hidden" name="lng" id="lng" value="en-US"/> <script type="text/javascript"> //<![CDATA[ function PM_Postback(param) { if (window.top.HideScreenLockWarningAndSync) { window.top.HideScreenLockWarningAndSync(6960); } if(window.CMSContentManager) { CMSContentManager.allowSubmit = true; }; __doPostBack('m$am',param); } function PM_Callback(param, callback, ctx) { if (window.top.HideScreenLockWarningAndSync) { window.top.HideScreenLockWarningAndSync(6960); }if (window.CMSContentManager) { CMSContentManager.storeContentChangedStatus(); };WebForm_DoCallback('m$am',param,callback,ctx,null,true); } //]]> </script> <script src="/web/20201203035119js_/https://www.msinteractive.com/ScriptResource.axd?d=NJmAwtEo3Ipnlaxl6CMhvkCNjRv4DCaQI7n5eBOhy_MKh-fbDU4mSL8h1J4D9CYPxT3i5ecR2FuLL8DEPRMPyjmhzVCbrS9uDSDCzlbjuPWJPdo9LEA85K7oDW5AfWjCi9q8R3LHeuemE5HC_QQm01psQDVB_L1Wv7KXhCMr6i81&t=ffffffffb4e3605f" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ var CMS = CMS || {}; CMS.Application = { "language": "en", "imagesUrl": "/CMSPages/GetResource.ashx?image=%5bImages.zip%5d%2f", "isDebuggingEnabled": false, "applicationUrl": "/", "isDialog": false, "isRTL": "false" }; //]]> </script> <input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="A5343185"/> <div id="ctxM"> </div> <div id="p_lt_master"> <div id="moonStoneMain" class="serviceTemplate">  <header id="headerPage" class="header-color"> <div id="covid19" class="container" style="background-color:#FF6666; font-weight: bold; color: #ffffff; margin-bottom: 20px; margin-top: -20px; padding: 15px 30px; font-size: 120%"> <button class="btn btn-moon" href="#" onclick="document.getElementById("covid19").style.display = "none";setCookie("covidBanner", "true", 365);" style="float:right;">X</button> <div class="row">The Coronavirus (COVID-19) is affecting all businesses in the world. Working remotely, Moonstone will continue to support our clients during business hours via website inquiry, phone, email, Asana and online meetings. Contact us below, or call us at 866.246.9091. </div> </div> <div id="navbar" class="container"> <div class="container"> <div class="row header-line"> <div class="col-12 col-lg-3 col-xl-2" id="headerLogo"><h1 class="d-none">Moonstone Interactive</h1> <a href="/web/20201203035119/https://www.msinteractive.com/" class="logo"> <img data-default="/MoonstoneInteractive/media/MSI/logo.png" id="msiLogo" src="/web/20201203035119im_/https://www.msinteractive.com/MoonstoneInteractive/media/MSI/logo.png" alt="Moonstone Interactive"/> </a> <a href="javascript:;" class="d-lg-none d-xl-none toggleMenu"> <img src="/web/20201203035119im_/https://www.msinteractive.com/MSI/assets/images/icon_hamburger.png" class="icon-menu-open" alt="Open menu"> <img src="/web/20201203035119im_/https://www.msinteractive.com/MSI/assets/images/icon_close.png" class="icon-menu-close" alt="Close menu"> </a></div> <div class="col-12 col-lg-7 col-xl-7" id="headerNav"> <ul class="nav"><li class="nav-item dropNav"> <a class="nav-link" href="/web/20201203035119/https://www.msinteractive.com/services">Services <span class="caret d-lg-none d-xl-none"><svg class="svg-icon" viewbox="0 0 20 20"><path fill="none" d="M11.611,10.049l-4.76-4.873c-0.303-0.31-0.297-0.804,0.012-1.105c0.309-0.304,0.803-0.293,1.105,0.012l5.306,5.433c0.304,0.31,0.296,0.805-0.012,1.105L7.83,15.928c-0.152,0.148-0.35,0.223-0.547,0.223c-0.203,0-0.406-0.08-0.559-0.236c-0.303-0.309-0.295-0.803,0.012-1.104L11.611,10.049z"> </path></svg></span> </a> <ul class="dropdown-menu dropdownMenu"><li class="nav-item"> <a class="nav-link" href="/web/20201203035119/https://www.msinteractive.com/services/internet-marketing">Internet Marketing</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20201203035119/https://www.msinteractive.com/services/responsive-web-design">Web Design</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20201203035119/https://www.msinteractive.com/services/web-site-development">Web Development</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20201203035119/https://www.msinteractive.com/services/content-management-systems">Content Management</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20201203035119/https://www.msinteractive.com/services/optimization">Optimization</a> </li></ul> </li><li class="nav-item dropNav"> <a class="nav-link" href="/web/20201203035119/https://www.msinteractive.com/web-site-design-portfolio">Portfolio </a> </li><li class="nav-item dropNav"> <a class="nav-link" href="/web/20201203035119/https://www.msinteractive.com/why-internet-marketing-company">Why Moonstone <span class="caret d-lg-none d-xl-none"><svg class="svg-icon" viewbox="0 0 20 20"><path fill="none" d="M11.611,10.049l-4.76-4.873c-0.303-0.31-0.297-0.804,0.012-1.105c0.309-0.304,0.803-0.293,1.105,0.012l5.306,5.433c0.304,0.31,0.296,0.805-0.012,1.105L7.83,15.928c-0.152,0.148-0.35,0.223-0.547,0.223c-0.203,0-0.406-0.08-0.559-0.236c-0.303-0.309-0.295-0.803,0.012-1.104L11.611,10.049z"> </path></svg></span> </a> <ul class="dropdown-menu dropdownMenu"><li class="nav-item"> <a class="nav-link" href="/web/20201203035119/https://www.msinteractive.com/why-moonstone/casestudies">Case Studies</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20201203035119/https://www.msinteractive.com/why-moonstone/performance-metrics-approach">Our Approach</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20201203035119/https://www.msinteractive.com/why-moonstone/web-experts">Our Expertise</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20201203035119/https://www.msinteractive.com/why-moonstone/videos">Our Videos</a> </li></ul> </li><li class="nav-item dropNav"> <a class="nav-link" href="/web/20201203035119/https://www.msinteractive.com/san-francisco-internet-marketing-company">Company <span class="caret d-lg-none d-xl-none"><svg class="svg-icon" viewbox="0 0 20 20"><path fill="none" d="M11.611,10.049l-4.76-4.873c-0.303-0.31-0.297-0.804,0.012-1.105c0.309-0.304,0.803-0.293,1.105,0.012l5.306,5.433c0.304,0.31,0.296,0.805-0.012,1.105L7.83,15.928c-0.152,0.148-0.35,0.223-0.547,0.223c-0.203,0-0.406-0.08-0.559-0.236c-0.303-0.309-0.295-0.803,0.012-1.104L11.611,10.049z"> </path></svg></span> </a> <ul class="dropdown-menu dropdownMenu"><li class="nav-item"> <a class="nav-link" href="/web/20201203035119/https://www.msinteractive.com/company/moonstone-interactive-news">News</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20201203035119/https://www.msinteractive.com/company/bios">Team</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20201203035119/https://www.msinteractive.com/company/clientlist">Client List</a> </li><li class="nav-item"> <a class="nav-link" href="/web/20201203035119/https://www.msinteractive.com/company/jobs">Careers</a> </li></ul> </li><li class="nav-item dropNav"> <a class="nav-link" href="/web/20201203035119/https://www.msinteractive.com/blog">Blog </a> </li><li class="nav-item dropNav"> <a class="nav-link" href="/web/20201203035119/https://www.msinteractive.com/gsa">GSA </a> </li></ul> </div> <div class="col-12 col-lg-2 col-xl-3" id="headerSearch"> <ul class="list text-right"><li class="nav-item navSearch"> <a class="nav-link dropdown-toggle" href="#" role="button" id="navSearch" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> <img id="searchIcon" data-default="/MoonstoneInteractive/media/MSI/Icons/icon_search.png" src="/web/20201203035119im_/https://www.msinteractive.com/MoonstoneInteractive/media/MSI/Icons/icon_search.png" alt="Search"> </a> <div class="dropdown-menu"> <form action="#" class="searchForm"> <input type="text" class="form-control" id="search" name="search" placeholder="Search"/> <button class="btn " id="magnifyglass"><img src="/web/20201203035119im_/https://www.msinteractive.com/MoonstoneInteractive/media/MSI/Icons/icon_search.png" alt="Search"></button> </form> </div> </li><li class="nav-item navContact d-none d-sm-inline "> <a class="nav-link btnStyle" href="/web/20201203035119/https://www.msinteractive.com/contact-us">Contact Us</a> </li> </ul> </div> </div> </div> </div> </header>  <main class="mainPage"> <section id="contactbanner"> <div class="sub-banner" data-parallax="scroll" style="background-image: url(/web/20201203035119im_/https://www.msinteractive.com/MoonstoneInteractive/media/MSI/OldSite/Banners/blog-banner.jpg);"> <div class="container"> <div class="row"> <div class="col-sm-7"> <div class="page-title"> <h1>Blog Image Optimization to Image Management: the impact of images in Responsive Design</h1> </div> <div class="page-subtext"> </div> </div> </div> </div> </div> </section> <section class="blog-content"> <div class="container"> <div class="mobile-sidebar visible-xs accordion" id="accordionExample"><div class="card"> <div class="card-header" id="headingOne"> <h3 class="mb-0" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Share with your Colleagues </h3></div><div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample"> <div class="card-body"><span title="Facebook" class="st_facebook_large" displaytext="Facebook"> <span data-network="facebook" class="stButton"> </span> </span> <span title="Twitter" class="st_twitter_large" displaytext="Tweet"> <span data-network="twitter" class="stButton"> </span> </span> <span title="LinkedIn" class="st_linkedin_large" displaytext="LinkedIn"> <span data-network="linkedin" class="stButton"> </span> </span> <span title="Email" class="st_email_large" displaytext="Email"> <span data-network="email" class="stButton"> </span> </span> </div></div></div><div class="card"> <div class="card-header" id="headingTwo"> <h3 class="mb-0 collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Categories </h3></div><div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample"> <div class="card-body"> <ul class="link-list"> <li><a href="/web/20201203035119/https://www.msinteractive.com/blog/web-development">Web Development</a></li><li><a href="/web/20201203035119/https://www.msinteractive.com/blog/web-design">Web Design</a></li><li><a href="/web/20201203035119/https://www.msinteractive.com/blog/content-management">Content Management</a></li><li><a href="/web/20201203035119/https://www.msinteractive.com/blog/return-on-investment">Return on Investment</a></li><li><a href="/web/20201203035119/https://www.msinteractive.com/blog/online-marketing">Online Marketing</a></li> </ul> </div> </div> </div><div class="card"> <div class="card-header" id="headingThree"> <h3 class="mb-0 collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">Calculator </h3></div><div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample"> <div class="card-body"><p>Moonstone Interactive is the only San Francisco Bay Area web design firm and Internet Marketing expert that offers a free online ROI Calculator</p> <p><a class="btnStyle" href="/web/20201203035119/https://www.msinteractive.com/Services/Optimization/ROI-Calculator">Try It Now</a></p> </div></div></div></div> <div class="content container"> <div class="row"> <div class="col-sm-8 content-area"><div class="col-sm-12 content-area blogDetails"> <h1>Image Optimization to Image Management: the impact of images in Responsive Design</h1> <div class="section-title"><span class="blog-category">Web Development</span> <span class="blog-date">Sep 25, 2018</span><br/> <span class="blog-author">Author: Global Administrator</span></div> <div class="blogPostImage"><img alt="Image Optimization to Image Management: the impact of images in Responsive Design" src="/web/20201203035119im_/https://www.msinteractive.com/MSI/media/MSIMedia/Images/Blog/1-image-optimization-thumb.png?ext=.png"/></div> <p>As expectations for a richer user experience continue to increase, the use of relevant images on your website is a must for developing a higher level of user engagement. Engaged website visitors translate to better adoption, increased revenue, and higher conversion rates for online businesses.</p> <p>If you were ever in doubt of the significant impact of relevant images on user engagement, just consider the following facts. </p> <ul> <li>Adding relevant images increases information retention from 10% to 65%.</li> <li>80% of people skim content when reading online, processing visuals 60,000 times faster than text.</li> <li>People who follow illustrated instructions do 323% better than those who just read text.</li> <li>People will spend 10% more time looking at visuals on a website than reading text.</li> <li>Posts that include images produce 650% higher user engagement than text-only posts.</li> </ul> <p><img alt="relevant image management" src="/web/20201203035119im_/https://www.msinteractive.com/MSI/media/MSIMedia/Images/Blog/2-relivant-images.png" style="float: left;margin-top:7px;"/></p> <p>These facts could lead us to conclude that the more images, the better. However, we also know that website speed performance-or the time a visitor waits for your pages to fully load-also has a significant impact on the user experience. Not only will slow pages cost you a loss of revenue; it will also be penalized by search engines, having an impact on your ranking, both on mobile and desktop devices. Amazon has claimed that if their pages were to slow down by just one second, they would lose $1.6 billion a year!</p> <p>Image load time is one of the top reasons that web speed performance gets bogged down.</p> <p><strong>This is when image optimization enters the equation.<img alt="Image Optimization" src="/web/20201203035119im_/https://www.msinteractive.com/MSI/media/MSIMedia/Images/Blog/3-image-optimization.png" style="margin-top: 30px; float: right;"/></strong></p> <p>Image optimization is the process of reducing the file size of your images to retain their quality while keeping your page load time low and increasing your overall web speed performance. And, if done properly, image optimization can also be about increasing your image SEO by getting your images to rank on Google and other image search engines.</p> <p>Let’s start with a few basic tips on image optimization.</p> <ol> <li>Name your images with descriptive, relevant, and helpful keywords; preferably those that your analytics show your visitors using.</li> <li>Optimize your alt attributes by including model numbers, product serial numbers, or other descriptive keywords users search for.</li> <li>Reduce the file size of your images by understanding file formats and when best to use a GIF, JPEG, or PNG—or even the new WebP format introduced by Google.</li> <li>Optimize thumbnail images by making them as small as possible and giving them different alt text from their larger counterparts.</li> <li>Use image sitemaps to help Google find the images you’re displaying through galleries or popups and increase your image SEO.</li> <li>Simplify and minimize your decorative images possibly by using CSS.</li> <li>Consider a Content Delivery Network (CDN) to help with bandwidth issues.</li> <li>Test your images to see what increases conversion. How many product images is optimal? How many product listings should be in a category page?</li> </ol> <p><strong>Effective image optimization gets more involved with the adoption of Responsive Design. </strong></p> <p><img alt="Responsive Image resizing" src="/web/20201203035119im_/https://www.msinteractive.com/MSI/media/MSIMedia/Images/Blog/4-responsive-images.png" style="margin-top: 7px; float: left;"/></p> <p>Responsive web design is the approach to web design that makes web pages render well on a variety of devices and window or screen sizes. <a href="/web/20201203035119/https://www.msinteractive.com/blog/optimization/website-performance-across-desktop-tablet-mobile-devices"><u>Content, design and performance are necessary across all devices</u></a> to ensure usability and engagement.</p> <p>With more and more visitors browsing the web over mobile devices, the need to serve visitors a rich, consistent experience is met with the challenge of increased diversity across the web delivery options.</p> <p>Since images are a key component of content and design, we need to understand the following image optimization concepts.</p> <p><img alt="Image Optimization and resizing" src="/web/20201203035119im_/https://www.msinteractive.com/MSI/media/MSIMedia/Images/Blog/5-working-on-images.png" style="margin-top: 7px; float: right;"/></p> <ol> <li><strong>Display size</strong><br/> As display sizes vary from device to device, so does the optimal width and height of your images. Do not use one large image and scale it via the IMG element. Instead, determine the optimal width and height for image display on the different end-user devices (desktop, laptop, tablet, smartphone) and generate and store each size. Then serve the appropriate size via conditional logic.</li> <li><strong>Resolution</strong><br/> Almost all screen resolutions range from 72 PPI (pixels per inch) to 100 PPI. There is no need to serve a 300 DPT (dots per inch) resolution image that you used for your print collateral.</li> <li><strong>Synchronously load</strong><br/> If your web page is synchronously loading all HTML, CSS, Javascript, and images together, the initial render time for your page will be very high. Defer loading images and instead load them asynchronously after the necessary code has been loaded. This method will also reduce the number of HTTP requests during the initial page load.</li> </ol> <p><strong>Creating all these different, optimized images for your Responsive Design takes us from image optimization to image management.</strong></p> <p><img alt="Image management" src="/web/20201203035119im_/https://www.msinteractive.com/MSI/media/MSIMedia/Images/Blog/6-responsive-images.png" style="margin-top: 7px; float: left;"/></p> <p>Image management includes clicking on pictures, editing, resizing per layout, optimizing, and delivering them to end users as fast as possible. The goal of an effective image management strategy is to improve development productivity, speed your website to market, and find a way to avoid creating multiple versions of each image to support responsive design.</p> <p>In addition to optimizing your images, here are 3 best practices of an image management strategy.</p> <ol> <li><strong>Simplify image workflow with URL-based resizing. </strong><br/> Image workflow is every step taken from the creation of an image to its uploading to a CMS. The time and effort the design team put into creating multiple size variants for images can get obliterated instantly by someone in Marketing uploading a huge image that degrades the user experience. This is how real-time image manipulation is key to saving lots of time and simplifying the workflow.</li> <li><strong>Increase web speed performance by using HTTP/2 instead of HTTP/1.1.</strong><br/> HTTP/1.1 requested images sequentially or created several parallel connections. The new HTTP/2 allows for the browser to make a single connection to the server and optimizes the requests to all images over a single connection.</li> <li><strong>Leverage CDNs for globally distributed caching. </strong><br/> Content Delivery Networks support faster page loads. Faster page loads ultimately lowers abandonment rates, improves conversion rates, and strengthens customer loyalty—increasing the overall user experience.</li> </ol> <p>Does the thought of creating an image management system on your own sound overwhelming? The good news is that there are CMS and Image Management System solutions already made you can use right away.</p> <p>When evaluating which is the right system for you, choose one that allows you to:<img alt="Website speed performance" src="/web/20201203035119im_/https://www.msinteractive.com/MSI/media/MSIMedia/Images/Blog/7-Content-management.jpg" style="margin-top: 30px; float: right;"/></p> <ul> <li>Upload images easily from a browser, mobile app or any application directly to the cloud without requiring you to build and maintain your own infrastructure.</li> <li>Store images securely in the cloud with multi-region backups, revision history and disaster recovery.</li> <li>Manage your ever-growing media library by organizing files, controlling user access, and monitoring usage and performance.</li> <li>Use a URL-based API to manipulate, enhance, and optimize images from cropping and scaling to transcoding and enhancing your original images on-the-fly, delivering the most optimal asset to every user, every time.</li> <li>Automate image optimization by focusing on the most important region of the image, selecting optimal quality, encoding settings, and delivering the image on any device in any resolution or pixel density.</li> <li>Efficiently deliver images to users globally via multiple Content Delivery Networks without having to handle the integration nor maintaining configuration sync and load balancing across different networks.</li> </ul> <p>Consider looking into <a href="https://web.archive.org/web/20201203035119/https://www.akamai.com/" rel="nofollow">https://www.akamai.com/</a> or <a href="https://web.archive.org/web/20201203035119/https://cloudinary.com/" rel="nofollow">https://cloudinary.com</a> to learn more about image management systems available to you.</p> <p><strong>Have you evaluated how your Image Management approaches Image Optimization to support your Responsive Design?</strong></p> <p><img alt="Content management" src="/web/20201203035119im_/https://www.msinteractive.com/MSI/media/MSIMedia/Images/Blog/8-Content-management.jpg" style="margin-top: 7px; width: 350px; height: 233px; float: left;"/>As communications become predominantly visual, your website design must incorporate image management best practices that balance the need for high-quality images, fast loading pages, and a rich user experience. And it must do so efficiently to ensure ROI.</p> <p>Don’t know where to start? Let’s assess where you are right now in terms of your image management strategy and where you would like to take it. Our expertise in effective responsive design will help lay out a step-by-step strategic plan to meet the business goals of your website.</p> <p>We can help. Let’s discuss how you can build a systematic approach to keeping your website with as high a conversion rate as possible. <a href="/web/20201203035119/https://www.msinteractive.com/contact-us">Consider our Free Website Assessment to get started.</a></p> </div> </div> <div class="col-lg-4 hidden-xs"> <aside> <script type="text/javascript">var switchTo5x = true;</script> <script type="text/javascript" src="https://web.archive.org/web/20201203035119js_/https://ws.sharethis.com/button/buttons.js"></script> <script type="text/javascript">stLight.options({ publisher: "1bbd20a4-2755-4809-8b63-fa54e0165079", doNotHash: false, doNotCopy: false, hashAddressBar: false });</script> <div class="widget"> <h3>Share with your Colleagues </h3><span title="Facebook" class="st_facebook_large" displaytext="Facebook"> <span data-network="facebook" class="stButton"> </span> </span> <span title="Twitter" class="st_twitter_large" displaytext="Tweet"> <span data-network="twitter" class="stButton"> </span> </span> <span title="LinkedIn" class="st_linkedin_large" displaytext="LinkedIn"> <span data-network="linkedin" class="stButton"> </span> </span> <span title="Email" class="st_email_large" displaytext="Email"> <span data-network="email" class="stButton"> </span> </span></div><div class="widget"> <h3>Categories </h3><ul style="margin:0;" class="CategoryListList"> <li class="CategoryListItem"><a href="/web/20201203035119/https://www.msinteractive.com/blog/web-development">Web Development</a></li><li class="CategoryListItem"><a href="/web/20201203035119/https://www.msinteractive.com/blog/web-design">Web Design</a></li><li class="CategoryListItem"><a href="/web/20201203035119/https://www.msinteractive.com/blog/content-management">Content Management</a></li><li class="CategoryListItem"><a href="/web/20201203035119/https://www.msinteractive.com/blog/return-on-investment">Return on Investment</a></li><li class="CategoryListItem"><a href="/web/20201203035119/https://www.msinteractive.com/blog/online-marketing">Online Marketing</a></li> </ul> </div><div class="sidebar-cta"><p>Moonstone Interactive is the only San Francisco Bay Area web design firm and Internet Marketing expert that offers a free online ROI Calculator</p> <p><a class="btnStyle" href="/web/20201203035119/https://www.msinteractive.com/Services/Optimization/ROI-Calculator">Try It Now</a></p> </div> <script type="text/javascript">var switchTo5x = true;</script> <script type="text/javascript" src="https://web.archive.org/web/20201203035119js_/https://ws.sharethis.com/button/buttons.js"></script> <script type="text/javascript">stLight.options({ publisher: "1bbd20a4-2755-4809-8b63-fa54e0165079", doNotHash: false, doNotCopy: false, hashAddressBar: false });</script> <script type="text/javascript">var switchTo5x = true;</script> <script type="text/javascript" src="https://web.archive.org/web/20201203035119js_/https://ws.sharethis.com/button/buttons.js"></script> <script type="text/javascript">stLight.options({ publisher: "1bbd20a4-2755-4809-8b63-fa54e0165079", doNotHash: false, doNotCopy: false, hashAddressBar: false });</script> </aside> </div> </div></div></div> </div> </section> <section id="ourPortfolio" class="background-white"> <div class="container"> <h3>Related Posts</h3> <div class="row portfolioList"> <div class="item col-12 col-sm-6 col-md-6 col-lg-4"> <a href="/web/20201203035119/https://www.msinteractive.com/content-management/smarter-content-management "> <div class="wrap"> <img src="/web/20201203035119im_/https://www.msinteractive.com/MoonstoneInteractive/media/MSI/Blog/cms-blog-thumb.png?ext=.png" alt="Smarter Content Management for an Effective, Faster Marketing Strategy"/> <div class="detail text-left"> <div class="info"> <h3 class="name">Smarter Content Management for an Effective, Faster Marketing Strategy</h3> <p>4/29/2019 12:00:00 AM</p> </div> <span class="btnStyle">Read More</span> </div> </div> </a> </div> <div class="item col-12 col-sm-6 col-md-6 col-lg-4"> <a href="/web/20201203035119/https://www.msinteractive.com/blog/content-management/cms-comparison "> <div class="wrap"> <img src="/web/20201203035119im_/https://www.msinteractive.com/MSI/media/MSIMedia/Images/Blog/Content-management.jpg?ext=.jpg" alt="CMS Comparison"/> <div class="detail text-left"> <div class="info"> <h3 class="name">CMS Comparison</h3> <p>2/27/2013 11:44:21 AM</p> </div> <span class="btnStyle">Read More</span> </div> </div> </a> </div> <div class="item col-12 col-sm-6 col-md-6 col-lg-4"> <a href="/web/20201203035119/https://www.msinteractive.com/blog/content-management/website-content-management "> <div class="wrap"> <img src="/web/20201203035119im_/https://www.msinteractive.com/MSI/media/MSIMedia/Images/Blog/Content-management2.jpg?ext=.jpg" alt="Website Content Management Expertise"/> <div class="detail text-left"> <div class="info"> <h3 class="name">Website Content Management Expertise</h3> <p>1/3/2013 11:55:51 AM</p> </div> <span class="btnStyle">Read More</span> </div> </div> </a> </div> </div> </div> </section> </main> <div class="cookieCrumbs"> <div class="CookieConsent"> <span id="p_lt_ctl04_sccCookieConsentBanner_lblText" class="ConsentText"><strong>Cookie Consent:</strong> This website uses Moonstone Interactive and third-party cookies to ensure optimal website functioning as described in our <a href="/web/20201203035119/https://www.msinteractive.com/policy#cookies">Cookie Use Notice</a>. Please continue to use our website if you agree to the use of cookies. Read more on our <a href="/web/20201203035119/https://www.msinteractive.com/policy">Privacy Policy</a> page. </span> <span class="ConsentButtons"> <input type="submit" name="p$lt$ctl04$sccCookieConsentBanner$btnAllowAll" value="Accept cookies" id="p_lt_ctl04_sccCookieConsentBanner_btnAllowAll" class="ConsentButton btn btn-default"/> </span> </div> </div>  <footer id="footerPage" class="white-bg"> <div class="footerSkew"> <div class="footerMain"> <div class="footerTop text-center"> <div class="container"><h2 class="headingPage">Let's work together </h2><p class="subDesc">Have you got an exciting project coming up? Tell us all about it. </p><a class="btnStyle" href="/web/20201203035119/https://www.msinteractive.com/contact-us">Let's Talk </a> </div> </div> <div class="footerCenter"> <div class="container"> <div class="wrapper"> <div class="row"> <div class="col-12 col-lg-3 col-sm-6 footerItem"><h4 class="ftHeading">GET IN TOUCH </h4><ul class="list address"> <li class="ad"><span><img alt="GET IN TOUCH" class="icon" src="/web/20201203035119im_/https://www.msinteractive.com/MoonstoneInteractive/media/MSI/Icons/ft_icon_location.png"/> Moonstone Interactive<br/> 2010 Crow Canyon Place Suite 100<br/> San Ramon, CA 94583</span></li> <li><a href="tel:9257364178"><img alt="Tel 9257374178" class="icon" src="/web/20201203035119im_/https://www.msinteractive.com/MoonstoneInteractive/media/MSI/Icons/ft_icon_phone.png"/> Tel: 925.736.4178</a></li> <li><a href="https://web.archive.org/web/20201203035119/mailto:info@msinteractive.com"><img alt="info@msinteractive.com" class="icon" src="/web/20201203035119im_/https://www.msinteractive.com/MoonstoneInteractive/media/MSI/Icons/ft_icon_email.png"/></a> <a href="/web/20201203035119/https://www.msinteractive.com/contact-us">Contact Us</a></li> </ul> </div> <div class="col-12 col-lg-3 col-sm-6 footerItem"> <ul class="list links"><li> <a href="/web/20201203035119/https://www.msinteractive.com/services">Services </a> </li><li> <a href="/web/20201203035119/https://www.msinteractive.com/web-site-design-portfolio">Portfolio </a> </li><li> <a href="/web/20201203035119/https://www.msinteractive.com/why-internet-marketing-company">Why Moonstone </a> </li><li> <a href="/web/20201203035119/https://www.msinteractive.com/san-francisco-internet-marketing-company">Company </a> </li><li> <a href="/web/20201203035119/https://www.msinteractive.com/blog">Blog </a> </li><li> <a href="/web/20201203035119/https://www.msinteractive.com/gsa">GSA </a> </li></ul> </div><div class="col-12 col-lg-3 col-sm-6 footerItem"> <ul class="list links"><li> <a href="/web/20201203035119/https://www.msinteractive.com/services/internet-marketing">Internet Marketing </a> </li><li> <a href="/web/20201203035119/https://www.msinteractive.com/services/responsive-web-design">Web Design </a> </li><li> <a href="/web/20201203035119/https://www.msinteractive.com/services/web-site-development">Web Development </a> </li><li> <a href="/web/20201203035119/https://www.msinteractive.com/services/content-management-systems">Content Management </a> </li><li> <a href="/web/20201203035119/https://www.msinteractive.com/services/optimization">Optimization </a> </li></ul> </div> <div class="col-12 col-lg-3 col-sm-6 footerItem"><h4 class="ftHeading">GET SOCIAL</h4> <ul class="list socail"> <li> <a href="https://web.archive.org/web/20201203035119/https://twitter.com/MSIwebsites" target="_blank" rel="noreferrer"> <img src="/web/20201203035119im_/https://www.msinteractive.com/MoonstoneInteractive/media/MSI/Icons/icon_twitter.png" alt="Twitter"> </a> </li> <li> <a href="https://web.archive.org/web/20201203035119/https://www.facebook.com/MSIwebsites" target="_blank" rel="noreferrer"> <img src="/web/20201203035119im_/https://www.msinteractive.com/MoonstoneInteractive/media/MSI/Icons/icon_facebook.png" alt="Facebook"> </a> </li> <li> <a href="https://web.archive.org/web/20201203035119/https://www.linkedin.com/company/moonstone-interactive" target="_blank" rel="noreferrer"> <img src="/web/20201203035119im_/https://www.msinteractive.com/MoonstoneInteractive/media/MSI/Icons/icon_linkedin.png" alt="Linkedin"> </a> </li>  </ul></div> </div> </div> </div> </div> <div class="footerBottom"> <div class="container"><p class="copyright text-right">© Copyright 2020 <a href="/web/20201203035119/https://www.msinteractive.com/">Moonstone Interactive</a><br/> <a href="/web/20201203035119/https://www.msinteractive.com/privacy">Privacy Policy</a> | <a href="/web/20201203035119/https://www.msinteractive.com/sitemap">Site Map</a><br/> <a href="https://web.archive.org/web/20201203035119/https://kentico.com/">Powered by Kentico</a></p> </div> </div> </div> </div> </footer> <div class="overlayNav"></div> </div> </div> <script src="/web/20201203035119js_/https://www.msinteractive.com/MSI/assets/js/vendor.min.js"></script> <script src="/web/20201203035119js_/https://www.msinteractive.com/MSI/assets/js/script.min.js"></script> <script src="/web/20201203035119js_/https://www.msinteractive.com/CMSPages/GetResource.ashx?scriptfile=%7e%2fCMSScripts%2fCustom%2fMSI%2fdefault.js" type="text/javascript"></script> </form> </body> </html>