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
Improves [page loading speed
Improves SEO
Quicker to create backups
Uses less bandwidth
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.
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).
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.
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
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.
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…)
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/
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.
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:
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):
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.
