Image editing for uploads

Design help General
1

While this isn’t Webflow specific, I do need a bit of help in understanding images.

I have some large images (3312X2200), they are 6.67MB in size. How do I lower the size of the file without reducing the size of the image using GIMP?

I saw in this video that the image is still rather large but only 223K.

I could guess at some term called ‘bit-depth’ but that’s an utterly random guess from some past readings online quite some time ago.

2

Hey @DragonDon

Why are you using such a large image? Are you trying to cater for hi-res screens?

Couple of things you can do:

  1. File format: I presume that it’s currently a PNG or GIF based on the file size. If its a photograph you’re best switching to JPEG to gain some file size reduction.
  2. Image compression: if you’re saving to JPEG you can specify the image quality when exporting in GIMP (quick tutorial here: 4.4. Compressing Images). You’ll be surprised how far you can lower the quality before it degrades the image…and the more you lower the quality the small the file size :smile:
    3.Is the image CMYK or RGB? If its a CMYK then convert it to RGB as this will also reduce the file size

One Final Point:
It’s also worth creating smaller images to serve mobile devices…otherwise the load time on mobile will be huge.
For example, the Tablet breakpoint on Webflow is 991px, so you can save a tablet version of your background image that is only 991px wide (so significantly smaller than your desktop image) and you can then just switch to tablet view in the Webflow design screen and change the background image for the element.
Do the same for all mobile breakpoints & it will help to improve load times across devices :slight_smile:

3

Hey @EvanJones,

Thanks for the reply. The images are from iStock. I just had to learn how to reduce them, did a bit of looking around and figured it out. Now they are much more manageable. It’s a subtle thing that I’ve not done a lot of but nice skill to add for obvious efficiency reasons.

First thing I did was reduce the size down to 2000px wide, then exported with a reduced quality and that turned out perfectly.

The images are for full-size sliders.

4

Glad to hear it - have fun :smile:

5

Hi @DragonDon,
You also can try https://tinypng.com, it helps me when I have no time for using Gimp, works with png and jpg files. Some files it “shrink” on 90%.

Cheers,
Anna

2 Likes
6

Thanks, a nice a quickie tool!

7

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.