{"id":284297,"date":"2019-03-14T07:25:35","date_gmt":"2019-03-14T14:25:35","guid":{"rendered":"http:\/\/css-tricks.com\/?p=284297"},"modified":"2019-03-14T07:25:35","modified_gmt":"2019-03-14T14:25:35","slug":"perfect-image-optimization-for-mobile-with-optimole","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/perfect-image-optimization-for-mobile-with-optimole\/","title":{"rendered":"Perfect Image Optimization for Mobile with Optimole"},"content":{"rendered":"

In 2015 there were 24,000 different Android devices, and each of them was capable of downloading images. And this was just the beginning. The mobile era is starting to gather pace with mobile visitors starting to eclipse desktop. One thing is certain, building and running a website in the mobile era requires an entirely different approach to images. You need to consider users on desktops, laptops, tablets, watches, smartphones and<\/em> then viewport sizes, resolutions, before, finally, getting to browser supported formats.<\/p>\n

So, what’s a good image optimization option to help you juggle all of these demands without sacrificing image quality and on-page SEO strategy?<\/p>\n

Say hello to Optimole<\/a>.<\/p>\n

<\/p>\n

If you’ve ever wondered how many breakpoints a folding screen will have, then you’ll probably like Optimole. It integrates with both the WordPress block editor and page builders to solve a bunch of image optimization problems. It’s an all-in-one service, so you can optimize images and also take advantage of features built to help you improve your page speed.<\/p>\n

What’s different about Optimole?<\/h3>\n

The next step in image optimization is device specificity, so the traditional method of catch and replace image optimization will no longer be the best option for your website. Most image optimizers work in the same way:<\/p>\n

    \n
  1. Select images for optimization.<\/li>\n
  2. Replace images on the page.<\/li>\n
  3. Delete the original.<\/li>\n<\/ol>\n

    They provide multiple static images for each screen size according to the breakpoints defined in your code. Essentially, you are providing multiple images to try and Optimized? Sure. Optimal? Hardly.<\/p>\n

    Optimole works like this:<\/p>\n

      \n
    1. Your images get sucked into the cloud and optimized.<\/li>\n
    2. Optimole replaces the standard image URLs with new ones – tailored to the user’s screen.<\/li>\n
    3. The images go through a fast CDN to make them load lightning fast.<\/li>\n<\/ol>\n
      \"\"<\/figure>\n
      \"\"<\/figure>\n

      Here’s why this is better: <\/strong>You will be serving perfectly sized images to every device, faster, in the best format, and without an unnecessary load on your servers.<\/p>\n

      A quick case study: CodeinWP<\/h3>\n

      Optimole’s first real test was on CodeinWP<\/a> as part of a full site redesign. The blog has been around for a while during which time is has emerged as one of the leaders in the WordPress space. Performance wise? Not so much. With over 150,000 monthly visitors, the site needed to provide a better experience for Google and mobile.<\/p>\n

      Optimole was used as one part of a mobile first strategy. In the early stages, Optimole helped provide a ~0.4s boost in load time for most pages with it enabled. Whereas, on desktop, Optimole is compressing images by ~50% and improving pagespeed grades by 23%. Fully loaded time and the total page size is reduced by ~19%.<\/p>\n

      Improved PageSpeed and quicker delivery<\/h3>\n

      Along with a device-specific approach, Optimole provides an image by image optimization to ensure each image fits perfectly into the targeted container. Google will love it. These savings in bandwidth are going to help you improve your PageSpeed scores.<\/p>\n

      It’s not always about the numbers; your website needs to conform to expected behavior even when rendering on mobile. You can avoid content jumping and shifting with any number of tweaks<\/a> but a container based lazy loading option provides the best user experience. Optimole sends a blurred image at the exact container size, so your visitors never lose their place on the page.<\/p>\n

      We offer CDNs for both free and premium users. If you’re already using CDN, then we can integrate it from our end. The extra costs involved will be balanced out with a monthly discount.<\/p>\n

      Picking the perfect image for every device<\/strong><\/h3>\n

      Everyone loves <srcsets><\/code> and <sizes><\/code><\/a> but it is time for an automated solution that doesn’t leak bandwidth. With client hints, Optimole provides dynamic image resizing that provides a perfectly sized image for each and every device.<\/p>\n

      Acting as a proxy service allows Optimole to deliver unique images based on supported formats. Rather than replace an image on the page with a broad appeal, Optimole provides the best image based on the information provided by the browser. This dynamism means WebP and Retina displays are supported for, lucky, users without needing to make any changes.<\/p>\n

      Optimole can be set to detect slower connections, and deliver an image with a high compression rate to keep the page load time low.<\/p>\n

      Industrial strength optimization with a simple UI<\/h3>\n

      The clean and simple UI gives you the options you need to make a site; no muss no fuss. You can set the parameters, introduce lazy loading, and test the quality without touching up any of the URLs.<\/p>\n

      \"\"<\/figure>\n

      You can reduce the extra CSS you need to make page builder images responsive and compressed. It currently takes time and a few CSS tricks to get all of your Elementor images responsive. For example, the extra thumbnails from galleries and carousels can throw a few curve balls. With Optimole all of these images are picked up from the page, and treated like any other. Automatically.<\/p>\n

      One of the reasons to avoid changing image optimization strategies is the, frightening, prospect of going through the optimization process again. Optimole is the set-and-forget optimization option that optimizes your images without making changes to the original image. Just install, activate and let Optimole handle the rest.<\/p>\n

      Set. Forget. Work on important things.<\/p>\n

      \"\"<\/figure>\n

      Try it today<\/h3>\n

      Get some insight into how Optimole can help your site with the speed test here.<\/a><\/p>\n

      If you like what you see then you can get a fully functional free plan with all the features. It includes 1GB of image optimization and 5GB of viewing bandwidth. The premium plans start with 10GB of image optimization, and 50GB of viewing bandwidth, plus access to an enhanced CDN including over 130 locations.<\/p>\n

      If you’re worried about making a big change, then rest assured Optimole can be uninstalled cleanly to leave your site exactly as before.<\/p>\n","protected":false},"excerpt":{"rendered":"

      In 2015 there were 24,000 different Android devices, and each of them was capable of downloading images. And this was just the beginning. The mobile era is starting to gather pace with mobile visitors starting to eclipse desktop. One thing is certain, building and running a website in the mobile era requires an entirely different […]<\/p>\n","protected":false},"author":2508,"featured_media":284299,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"Perfect Image Optimization for Mobile with Optimole","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[17,508],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/03\/optimole-dashboard.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":330693,"url":"https:\/\/css-tricks.com\/optimizing-image-depth\/","url_meta":{"origin":284297,"position":0},"title":"Optimizing Image Depth","date":"December 18, 2020","format":false,"excerpt":"Something I learned (or, I guess, re-learned) this year is how important it is to pay close attention to the bit depth of images. Way back in the day, we used to obsessively choose between 2-, 4-, or 8-bit color depth on our GIFs, because when lots of users were\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/12\/Screen-Shot-2020-12-18-at-7.40.39-AM.png?fit=1200%2C642&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":339936,"url":"https:\/\/css-tricks.com\/what-googles-new-page-experience-update-means-for-images-on-your-website\/","url_meta":{"origin":284297,"position":1},"title":"What Google\u2019s New Page Experience Update Means for Images on Your Website","date":"May 6, 2021","format":false,"excerpt":"It\u2019s easy to forget that, as a search engine, Google doesn\u2019t just compare keywords to generate search results. Google knows that if people don\u2019t enjoy their experience on a web page, they won\u2019t stay on the page long enough to consume the content \u2014 no matter how relevant it is.\u2026","rel":"","context":"In "Sponsored"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/Google-Page-Experience-Update.jpg?fit=1200%2C675&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":296913,"url":"https:\/\/css-tricks.com\/images-are-not-static-content\/","url_meta":{"origin":284297,"position":2},"title":"Images Are Not Static Content","date":"October 10, 2019","format":false,"excerpt":"We constantly hear about the importance of keeping websites lean and fast. A fast-loading website makes users more satisfied, and satisfied users spend more time and money on your website. However, website optimization is a complex task, as there is not one silver bullet to fix all of the issues\u2026","rel":"","context":"In "Sponsored"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/10\/Image-as-Static.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":8419,"url":"https:\/\/css-tricks.com\/lessons-with-media-queries\/","url_meta":{"origin":284297,"position":3},"title":"Lessons with Media Queries","date":"February 1, 2011","format":false,"excerpt":"Sam Collins with a big writeup on his experience using media queries and comparing them against other mobile optimization techniques. There are lots of good practical tips to use inside your media queries like: Remove all CSS and JavaScript animations (and how) Re-declaring @font-face with new method to fix Android\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":335291,"url":"https:\/\/css-tricks.com\/how-to-develop-and-test-a-mobile-first-design-in-2021\/","url_meta":{"origin":284297,"position":4},"title":"How to Develop and Test a Mobile-First Design in 2021","date":"March 4, 2021","format":false,"excerpt":"The internet has connected 4.66 billion people with each other as of October 2020. A total of 59% of the world\u2019s total population. Amazingly, this is not even the surprising part. The stat to look out for is mobile users and their rise in the internet world. Out of 4.66\u2026","rel":"","context":"In "Sponsored"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/Frame-67.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":342257,"url":"https:\/\/css-tricks.com\/start-serving-optimized-images-in-vue\/","url_meta":{"origin":284297,"position":5},"title":"Start Serving Optimized Images in Vue","date":"June 17, 2021","format":false,"excerpt":"Images have become extremely important to the effectiveness of websites. They speak a 1000 words, attract attention, and stimulate emotions. However, web performance is also a growing problem for most websites. And images are at the heart of many web performance issues. According to HTTP Archive, images are at least\u2026","rel":"","context":"In "Sponsored"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/06\/imageengine_host.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/284297"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/2508"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=284297"}],"version-history":[{"count":4,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/284297\/revisions"}],"predecessor-version":[{"id":284568,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/284297\/revisions\/284568"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/284299"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=284297"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=284297"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=284297"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}