# Website Speed Optimization – Image Optimization **URL:** \ **Category:** Tips\ **Created:** [January 24, 2019, 5:51am UTC](https://forum.bubble.io/t/website-speed-optimization-image-optimization/47701 "2019-01-24T05:51:27Z")\ **Posts on this page:** 11\ **Page:** 1
**Author:** ![rafi.itmarkerz](https://avatars.discourse-cdn.com/v4/letter/r/f08c70/32.png) [@rafi.itmarkerz](https://forum.bubble.io/u/rafi.itmarkerz)\ **Post date:** [January 24, 2019, 5:51am UTC](https://forum.bubble.io/t/website-speed-optimization-image-optimization/47701/1 "2019-01-24T05:51:27Z")
Everybody want the search engines to love their website. You can improve your website’s performance by reducing image file sizes. But the problem is that modification always affect their quality, which creates a dislike in the visitors. Some tricks and techniques will help you reduce the image file size without destroying its quality. **Optimizing Images** Your web pages will be slowed down by large-sized images that destroys the user experience. The process of decreasing their file size, using either a plugin or script, which in turn speeds up the load time of the page is known as optimizing images. The two commonly used methods are lossy and lossless compression. **The Need for Compressing Your Images** Images take up a good amount of the total weight of the webpage. So, images should be the first priority when it comes to [optimizing your website. A good image optimization workflow is one of the easiest things to implement. But the truth is that many website owners overlook it. **Benefits of Image Optimization** 1. Improves [page loading speed 2. Improves SEO 3. Quicker to create backups 4. Uses less bandwidth 5. Uses only less storage **How To Optimize Images for Web and Performance?** You can find the balance between the lowest file size and an acceptable quality by formatting your images. You can optimize your images in more than one way. One of the most popular tools ways is to simply compress them before uploading to WordPress. Adobe Photoshop or Affinity Photo can be used to do this. Some plugins also help to do the same. The file format and type of compression you use are the two primary things to consider. You two primary things to consider by choosing the right combination of file format and compression type. You’ll have to experiment with each image or file format to see what works best. ---
**Author:** ![keith](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/keith/32/56020_2.png) [@keith](https://forum.bubble.io/u/keith)\ **Post date:** [January 24, 2019, 6:07am UTC](https://forum.bubble.io/t/website-speed-optimization-image-optimization/47701/2 "2019-01-24T06:07:07Z")
If you’re willing to pay for the storage, Bubble does this automagically for you, BTW. No need to do all of this. When you display an image, Bubble doesn’t serve up the original file, it serves up an optimized version (I believe it uses Imgix for this – certain Imgix functions can be used client-side, but the reason we find that in Bubble is that it’s there for the server side of things). Interesting post though, I guess. ---
**Author:** ![sridharan.s](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/sridharan.s/32/17881_2.png) [@sridharan.s](https://forum.bubble.io/u/sridharan.s)\ **Post date:** [January 24, 2019, 6:11am UTC](https://forum.bubble.io/t/website-speed-optimization-image-optimization/47701/3 "2019-01-24T06:11:09Z")
We optimized our images and it improved page load speeds in Bubble. I know I heard somewhere that Bubble takes care of this, but my experience tells me that at the very least there are instances where there’s a material opportunity to increase page load speed by manually shrinking your images. We use FastStone Photo Resizer and JPEGmini in case that’s helpful for anyone. ---
**Author:** ![keith](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/keith/32/56020_2.png) [@keith](https://forum.bubble.io/u/keith)\ **Post date:** [January 24, 2019, 6:13am UTC](https://forum.bubble.io/t/website-speed-optimization-image-optimization/47701/4 "2019-01-24T06:13:34Z")
Well sure, you can do that. But just try a simple experiment and you’ll see what I’m saying is true. Store a big-ass image in the db. Now present that image as a tiny thumbnail. The big-ass image is not downloaded to the browser, just a tiny thumbnail representation of it. #magic ---
**Author:** ![keith](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/keith/32/56020_2.png) [@keith](https://forum.bubble.io/u/keith)\ **Post date:** [January 24, 2019, 6:39am UTC](https://forum.bubble.io/t/website-speed-optimization-image-optimization/47701/5 "2019-01-24T06:39:29Z")
GEEZ PEOPLE. The original message is spam, OK? But it has a teachable moment within it. I’ll find and kill the original poster later, as time allows. ---
**Author:** ![sridharan.s](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/sridharan.s/32/17881_2.png) [@sridharan.s](https://forum.bubble.io/u/sridharan.s)\ **Post date:** [January 24, 2019, 4:15pm UTC](https://forum.bubble.io/t/website-speed-optimization-image-optimization/47701/6 "2019-01-24T16:15:14Z")
We’ve had trouble with larger background images not being automatically condensed in Bubble. Instead, we’ve shrunk the file size ourselves so the image that’s loaded to the UI is much smaller (some were 5mb+ and now they’re 100kb). So, if Bubble is automatically shrinking the size of all of your images then great - there’s nothing you need to do. If it’s not, then you’ll want to go in and manually condense them yourself. ---
**Author:** ![keith](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/keith/32/56020_2.png) [@keith](https://forum.bubble.io/u/keith)\ **Post date:** [January 24, 2019, 5:09pm UTC](https://forum.bubble.io/t/website-speed-optimization-image-optimization/47701/7 "2019-01-24T17:09:13Z")
It is hard to tell what the breakpoints might be! I could see bg images as perhaps not being delivered in a compressed form. (This is one of those things that would benefit from a bit of documentation, to be sure…) ---
**Author:** ![luke2](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/luke2/32/256674_2.png) [@luke2](https://forum.bubble.io/u/luke2)\ **Post date:** [January 24, 2019, 5:56pm UTC](https://forum.bubble.io/t/website-speed-optimization-image-optimization/47701/8 "2019-01-24T17:56:16Z")
Yeah generally background images I’ll use compression software just to play on the safe side, never done some proper testing and might be a small gain, but even so, when using a full screen background e.g. 2560px wide, I’ll pre-process then upload to Bubble’s AWS which like you’ve pointed out will be using Imgix to reconfig the dimensions and quality within the URL string of the rendered image. I’ve been using Caesium, its free, can batch and the level of optimisation is pretty impressive, hard to tell the difference between an original and 80% compressed version - chopping that kb down. [https://saerasoft.com/caesium/](https://saerasoft.com/caesium/) One thing I have noticed is how damn heavy some custom fonts are on page load, this isn’t something that automatically gets compressed, but I’ll save this for another post 😉 p.s. nice spam topic by the org poster, bit of SEO fishing. ---
**Author:** ![sridharan.s](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/sridharan.s/32/17881_2.png) [@sridharan.s](https://forum.bubble.io/u/sridharan.s)\ **Post date:** [January 24, 2019, 6:06pm UTC](https://forum.bubble.io/t/website-speed-optimization-image-optimization/47701/9 "2019-01-24T18:06:01Z")
I removed the link to the original poster’s site but left the comment. ---
**Author:** ![keith](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/keith/32/56020_2.png) [@keith](https://forum.bubble.io/u/keith)\ **Post date:** [January 24, 2019, 6:13pm UTC](https://forum.bubble.io/t/website-speed-optimization-image-optimization/47701/10 "2019-01-24T18:13:18Z")
Yeah, font management is a whole 'nother issue, right? Subset those fonts! Another thing you might find helpful: Note that you can easily make them deliverable via the same CDN Bubble uses. Not sure if you ever saw this tip from me, but here’s an instant way to add any file you’d like delivered via cloudfront CDN using the plug-in builder: > [@Does Bubble use the unpkg CDN?](http://forum.bubble.io/t/does-bubble-use-the-unpkg-cdn/40729/8): > > A-ha, @copilot. I’d never messed with the “shared assets” section of the plug-in editor. Thanks for the tip. That’s extremely handy! Your comment wins the Internet for me today. So this makes me still wonder a modified version of my question: “For my big custom config file script, should I continue serving that via AWS, or would it be better to upload that to Cloudfront?” I’m guessing the latter might be superior (thinking being that the AWS file bucket probably doesn’t exist in a CDN-like env… ---
**Author:** ![luke2](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/luke2/32/256674_2.png) [@luke2](https://forum.bubble.io/u/luke2)\ **Post date:** [January 24, 2019, 8:42pm UTC](https://forum.bubble.io/t/website-speed-optimization-image-optimization/47701/11 "2019-01-24T20:42:30Z")
Thats interesting, thanks for raising. Something I’ll come back to during my ‘app optimisation’ phase I plan to run shortly after site launch. Might be a bugger to switch the fonts, somewhat losing the relationship with the custom fonts, requiring re-assigning, will need to test, but I believe will worth it (I’m using 3 custom fonts at the moment), details below (not cached): ![image](https://us1.discourse-cdn.com/bubble/original/3X/5/5/559eea8ebe1c985ad2aaed1230d6b4cd476924aa.png) Come to think of it, I’ll do a separate post once I’ve done the switch with the improvement of the load times, so this can bring attention to other users with possibly a similar issue using custom fonts.