*Background Image overlay- or gradient loading faster than image in slider. *
I used a background image(s) as slider because my client wanted to have the nav bar transparent to the images below. This may be part of my issue- but I’m not sure. (any guidance on this topic will appreciated too)
My homepage slider Image #1 seems to be loading slow even after downsizing the image to 368.4kb. The actual image size is large, and I’ve saved for web in photoshop at a lower quality (50%). I’ve attached screen shots of my photoshop file size. I’ve read articles saying that saving at a lower % quality is better for resolution, so that’s what I’ve done. (another topic that guidance is appreciated)
I am thinking this may be an issue with the size of the photo slowing down the loading?
Or does it have to do with my slider settings or gradient?
** I’m new to this so please give me the “webflow for dummies” version if possible. Or even the “web design for dummies” version if that applies! Thanks!
I typically recommend resizing your hero images to about a max-width of 1280px when possible. You can usually do this while you’re in the Save for Web Legacy export feature within Photoshop.
There are many resources out there which you can use to resize your images other than image optimizing/editing tools like Photoshop or Lightroom.
Here are a few free image optimizing tools for anyone that doesn’t have access to an image editing software:
Your site is looking excellent! A few tweaks to image sizes will help speed up your site in no time. A good rule of thumb to use for smaller images is to just save them out at 2x the final size they’ll display at (many designers call this the “Retina Version” of an image), so if the max size an image will display at is 400px wide, just upload an optimized 800px wide version of the image and it should look great regardless of the device you view it on.
I highly recommend reading through our Web Design 101 course as many of my friends and other Webflow customers have found it very helpful: Web design 101 | A free Webflow ebook
You can usually do this while you’re in the Save for Web Legacy export feature within Photoshop.