How do I optimize my images for web viewing?

  • 1
  • Question
  • Updated 4 years ago
  • Answered
  • (Edited)
Hi everyone, I am an artist and I am trying to upload my latest paintings to my website. However, once uploaded they appear much darker and as if they have a grey film over them. They are edited in Photoshop and aren't too large. I have tried many combinations when saving them but the same thing still happens. Can anybody help me with this problem? I would love to introduce them to the public!
Photo of Rosie Philpott

Rosie Philpott

  • 8 Posts
  • 0 Reply Likes
  • Frustrated

Posted 4 years ago

  • 1
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hello Rosie,

Can you make sure that the automatic image optimisation is turned off.

If you don't know if this has been turned on then you can look at your image filenames used on your site. They will have appended names.
Photo of Rosie Philpott

Rosie Philpott

  • 8 Posts
  • 0 Reply Likes

Hi, thanks for your reply.

Could you give me an example? Sorry, I am not very good at this. Is this something that I do once uploaded or something I do on my computer before uploading to the site?

I am also experiencing similar problems with other images too. This time however, they are coming up as sepia like with hardly any colour left in them compared to the darkness of the other.

If you wish to see what  mean the link is:

http://www.rosiephilpott.co.uk/local-views.php

It is the last three images - note that the colours in the thumbnails are perfect.

Thanks!



Photo of Rosie Philpott

Rosie Philpott

  • 8 Posts
  • 0 Reply Likes

The file names are as follows:

Wonky Wonders_web.jpg
RPhilpott_WonkyFriarStreet_web.jpg
Seven View, Worcester_web.jpg

Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Those filenames are straight forward which means they haven't gone through an optimisation beyond your photoshop manipulation process.

The images I have looked at take approximately 2 minutes to load when clicked on. may I ask the file sizes of these images in kilobytes?
(Edited)
Photo of Rosie Philpott

Rosie Philpott

  • 8 Posts
  • 0 Reply Likes

They are about 4MB

Photo of Rosie Philpott

Rosie Philpott

  • 8 Posts
  • 0 Reply Likes
How can I reduce the size further using Photoshop?
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
I will give you the specific instructions. Just looking up the dialogue now
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
On your file menu you have 2 relevant options among the many:
1 Save for web
2. Save as...

Option 2 displays a file size manipulation facility as a sliding control. Moving this left reduces the file size.
Photo of Rosie Philpott

Rosie Philpott

  • 8 Posts
  • 0 Reply Likes

That is what I have done and it only reduces it to 4MB.

Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Then suggest use the 4Mb image and reduce it as a second copy. See how that goes.(?) There isn't any advantage in displaying a large file size image and the software inbuilt in the display lightbox may be the reason for the dark etched appearance which may also be dependant on browser type. 

You are welcome to send me one of those images to see what I can do with it if it still doesn't resolve? (as an attachment not as an inline image) gop@great-sillage.info
(Edited)
Photo of Rosie Philpott

Rosie Philpott

  • 8 Posts
  • 0 Reply Likes

They are saved on 'low quality' in Photoshop to reduce the file size from the original 38MB!

Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
I understand. Reduce them further and see what happens. I can see a different quality of image wrt darkness comparing FireFox and Chrome. Chrome is more etched and darker in ambience than FireFox.
(Edited)
Photo of Rosie Philpott

Rosie Philpott

  • 8 Posts
  • 0 Reply Likes

Yes. I have found that Internet Explorer shows them beautifully but not on my parent's laptop! Very odd.


Photo of Laura Thomas

Laura Thomas, Social Media Coordinator

  • 4536 Posts
  • 211 Reply Likes
Hi Rosie,

Gop has been providing accurate and helpful information thus far but I thought I would also point you to this tutorial regarding optimizing your images for the web.

At this point it's really just a summary of what you've already learned from Gop but you may find it handy as a reference for ongoing image uploads.