Hey everyone,
I’ll make this really quick. On my portfolio site, I’m doing my best to reduce the file size for all images. So far, I’m aiming to keep each image file under 300kb while retaining good visual quality. The goal is to make my website run smoothly. Will this make a difference? Also, what is the difference between storing images in an optionset or upload as static image? And which one should I choose to make my site run faster?
For the first question: This depend on how many image you have. But yes it can make a difference because less data need to be loaded.
For the second question, I don’t think there will be a difference because Bubble store the url of the image, not the image itself. But try to reuse the same url instead of uploading a new image every time when you use the same image.
Hey Joe!
I’d recommend converting your images to SVG then embedding it via an HTML element. It’s what I do with images all the time. Plus the image quality of an SVG is unmatched 
Can you tell me more about what you said “Bubble store the URL of the image, not the image itself”? I don’t quite get what you mean when you said that and I would really like to learn more.
Can you show me how you do this in Bubble? Also, does this work with every image?
Your image is stored on AWS. The DB only contain the url of the file in AWS.
So when you “upload an image” anywhere in your Bubble app (static image or dynamic from DB), the element refer to image field that is the url of the image on AWS. And yes this work for every image. The difference with Dynamic image is that you need to load a DB thing that is not requested with static value.
Ok, I think I got it. Thanks for the explanation!
Best option is WEBP which is the Google image standard. They recommend this for SEO. Half the size of jpeg and better quality.
Convert your images here - https://convertio.co/
Thanks but I don’t have Adobe Illustrator.
Hey Greg, thanks for the recommendation and website link. Right now, I’m using a mix of small jpg and png files that are less than 300 or 200 kb in file size. Is there a default file size that you recommend to aim for? Also, should I just convert every image to WEBP for my website?
I’d convert all images to WEBP but keep your logo and illustrations as svg.
You don’t want any png files on your app. They kill performance. WEBP supports transparency which is the only reason to use png.
Thanks, Greg for the advice. I’m already making the changes 
. I wanted to ask one last thing. I ran a website performance test on my homepage. I used webpagetest.org and so far I received a 100% on all of my performances except for Cache Static. There were several warning errors and crosses in that category. I’m not sure what Cache Static even means and was wondering if you ever seen or heard of this before when you tested your website for performances.
If you want to learn more about how to optimize your images, check out this resource:
You can read WebPageTest’s documentation for any terminology you’re not familiar with. Here’s the link for Cache Static Content:
https://docs.webpagetest.org/getting-started/#cache-static-content%3A
If the warnings and errors are for content you don’t control (i.e. Google Fonts, Google Analytics, FB scripts, ad scripts, etc.), you can’t really do anything about it since you don’t control their web servers. If you had control of the web servers, then you can enable caching. You can read more about that here:
Thanks but this is mainly for coders as they talk about NPM, CSS, and other code terminology.
Thanks for the link. The only problem is that it still doesn’t tell me what to do or how to resolve the errors.
Depending on what’s listed in your WebPageTest results for Cached Static, you might NOT be able to resolve the issues because you don’t control the web servers the assets are hosted on.
Using Bubble.io as an example, here’s their WebPageTest results’ “Leverage browser caching of static assets” section under Details:
WebPageTest Test - WebPageTest Optimization Check Results
All the way down under the Glossary section, it states this for Cache Static:
Applicable Objects - Any non-html object with a mime type of “text/", “javascript” or "image/” that does not explicitly have an Expires header of 0 or -1, a cache-control header of “private”, “no-store” or “no-cache” or a pragma header of “no-cache”
What is checked - An “Expires” header is present (and is not 0 or -1) or a “cache-control: max-age” directive is present and set for an hour or greater. If the expiration is set for less 7 days you will get a warning. If the expiration is set for less than 1 hour you will get a failure. This only applies to max-age currently.
From the Bubble.io WebPageTest result, one of the Cache Static “FAILED” assets was this:
FAILED - (No max-age or expires) - https://api.segment.io/v1/p
So that “FAILED” because there is no expires header or max-age present for that Segment.io script. This means that the user’s browser won’t be able to cache that script in the browser cache. Since that script is on Segment.io and NOT on Bubble.io’s web servers, Bubble.io can’t do anything about this. Bubble.io doesn’t control that web server.
This topic was automatically closed after 70 days. New replies are no longer allowed.
