Images get brighter, higher saturation after it gets uploaded? Why is that?

I liked the original image I had on the right that had good contrast between text and the background. After uploading it the image changed and now makes the text difficult to see. I have never experienced this before does anyone have an idea to why that is?

i think the devil is in the details here. it depends a lot on which page is doing the publishing and what the details are.

There are ways to publish untouched images in Stacks. Or use warehoused images (where you upload to a “warehouse” site and your pages refer to them).

Many types of images in RapidWeaver are modified before publishing. Either to reduce the size (there’s a setting in the RW preferences) or to convert images that are unsuitable for the web into web-friendly file formats.

Raw images, photoshop images, and TIFF images can display many more colors than are available in web-formats. This can cause some color shifting or banding of gradients sometimes.

There are other more subtle details too: some browsers support JPEG images with built-in color profiles, other browsers don’t. This can cause the same image to look one way in Safari and a bit different in Chrome.

JPEG compression can sometimes alter the colors a bit. The more compression the more colors might be altered. However this tends to show up as compression artifacts before color shifting.

The best way to be sure your image will look exactly like you expect it to is:

  1. Scale it first. Use whatever tool you created the image in or photoshop or pixelmator or your favorite image editor. Scale the image to the size that it will be used on the web. If you’re starting from an iPhone image that’s native 3000+ pixels wide this will cut the image down drastically. Doing this first in a photo editor will make sure that the scaling is done well and the result will look exactly like you think it should.

  2. Use compression software. The photoshop web export is great, but there are ways to auto-compress many images using a tool like Squash. There are lots of posts on this forum about favorite tools, pros and cons. These tools will also make sure the file is saved in a web friendly format that won’t vary from browser to browser.

  3. Warehouse the image if you can. This will ensure that neither Stacks nor RapidWeaver will get a chance to modify the image and further compress/scale/whatever.

  4. If you can’t warehouse the image then make sure that Stacks and RapidWeaver aren’t scaling or compressing it further.

  5. Remember to consider different devices like phones and large screens, retina screens, and a low-bandwidth variant for very large images.

Is the image cmyk? save as rgb and try it.

@isaiah Sorry I didn’t notice someone replied to this thread I started. Since I made the initial post I got the idea to try exporting as gif and I liked how the color came out much better with that setting instead. It means that the size is a lot larger, in part because Squash doesn’t work on gif, but at least I am making progress on this page. You can see the current load time I have here. I haven’t heard the term warehouse or warehouse sites before but it sounds useful in many instances.

Generally for image size I have been going between 1200 (which someone pointed out RW recommend) up to at time 2000. I found when I reduced this image down to 1200 the text came out pretty fuzzy. Right now I went with a balance of 1600 so that the quality didn’t vanish while hopefully getting to a more reasonable load time.

@artista It was sRGB when I checked in Affinity Photo. I wondering if it just makes sense to do all the web image editing in a program like Sketch that doesn’t do print so that I don’t have the potential problem of accidentally setting the wrong image settings for print so easily. I can see how it wouldn’t be hard for that to happen.

for photos, you should almost always choose JPEG.

I’ve made a tiny website (using Stacks of course!) to show the different image formats and compression amounts and how it affects a very large photograph.

Warning: There are several large uncompressed images on this page so only view if you have a fast internet connection.

A Tiny Site About Images

The images are very very big – so try Ctrl-Clicking and choosing Open Image In new Window – the click the image to zoom in. Even on the most compressed JPEG, the differences are only evident in the fine details like the eyelashes.

These fine details will not be visible on a standard definition display – but with a newer model iPhone with @2x or @3x HiDPI (Retina) display these fine can actually be displayed.

GIF

GIF is almost always the wrong choice for photos. It’s compression is very trivial, and the format itself is very lossy, so you’ll probably see some really strange artifacts. But it will make often make your images much smaller.
GIF only has 8-bits for color – that means your image will be smashed down to 256 colors, which usually makes photos look pretty bad. But it really depends on the photo – sometimes you get lucky and it’s not too bad.

GIF does have real uses: for illustrations with flat regions of color it’s compression works great. And it supports animations which is completely…

awesome

JPEG

JPEG gives you very powerful image compression and allows you to choose how much to allow the image to be degraded to compress it further. If you choose 80% image quality the changes to the image will usually be imperceptible.

PNG

PNG is the other standard web format. It’s completely lossless compression, so every pixel will be kept at exactly the correct color. since PNG images are often much larger they should only be used when color accuracy is paramount.

Image processing is a science all to itself. As such there are a zillion tools designed for really specific image manipulation purposes. You’ll always get the best results by using the exact tools that are designed for the exact purpose.

RapidWeaver and Stacks can help you organize and do basic image manipulations – but you’ll probably get better results, with fewer headaches by using Sketch (or another illustration/image-processing app).

So if you have those tools, definitely use them!

Very helpful website! That is cool how it not only shows large photos but really large photos. I have also found that jpgs usually work best for images not gif. With this image is seems to be the other way around both in massive shifts in brightness/saturation and with banding in the shadow area that the jpg produces.

As far as image editing tools I have bought a ton of them. Now that that think of it I was using Affinity because it just added support for preset sizes for social media which was were most of these images were originally posted. But Sketch has support for that as well so I might as well use that.

Launch Adobe Photoshop and open the image you want to fix. Once the image is in your Photoshop program select File > Save for Web, in the menu located at the top of your screen.

Note: Minor changes were made to Adobe Photoshop coin master in the last couple of years. This includes the “Save for Web” function. Save for Web is built on the former best free spins ImageReady product, which is now discontinued.

That being said, “Save for Web” has not been removed, but it has been moved a little in the menu and the term “Legacy” has been added. To access this you select File > Export > Save For Web (Legacy).

You can also skip the menu entirely by using the existing Photoshop keyboard shortcut: ctrl + alt + shift + s (for Windows) or cmd + opt + shift + s (for Mac).

You can also customize the shortcut by selecting Keyboard Shortcuts from the Edit menu.

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