Jump to content


Photo

optimise photos for web


  • Please log in to reply
14 replies to this topic

#1 portia79

portia79

    Forum Newcomer

  • Members
  • Pip
  • 40 posts

Posted 07 August 2015 - 01:40 PM

Hi there,

 

How do I reduce the size of photos for web. I mean I've cropped one photo (800x600px format: .png) and it's still around 1MB. That's clearly too much.

 

Any advice?

 

Thank you



#2 nfc212

nfc212

    Privileged

  • Privileged
  • PipPipPipPip
  • 784 posts
  • Gender:Male
  • Location:Cardiff, UK
  • Experience:Beginner
  • Area of Expertise:I'm Learning

Posted 07 August 2015 - 01:52 PM

Use an image optimizer.

 

If you have Adobe Photoshop, then happy days it will do the best job of this. There are other programs both downloadable and on-line you can use but most of them are ****e and not worth using. Most of the on-line ones either no longer work or actually make the file size larger.

 

If you use Windows you could try Serif's PhotoPlus which has a half decent image optimiser function.

 

http://www.serif.com/photoplus/

 

It's £80 but the previous version is available for less which is Photoplus X6 currently £20.



#3 portia79

portia79

    Forum Newcomer

  • Members
  • Pip
  • 40 posts

Posted 07 August 2015 - 01:55 PM

Thanks. You mention photoshop. I have recently purchase it but have not had opportunity to play with it yet. How would I do it in Photoshop?



#4 rbrtsmith

rbrtsmith

    Web Guru

  • Privileged
  • PipPipPipPipPip
  • 3,716 posts
  • Gender:Male
  • Location:Manchester, UK
  • Experience:Nothing
  • Area of Expertise:Web Developer

Posted 07 August 2015 - 01:56 PM

to be honest photoshops image optimiser is average at best, this is apparent when you run your photoshop optimised images through something like this https://kraken.io/web-interface where you'll see a further reduction of like 25-50% on the filesize.

 

Or you can have something like Gulp or Grunt automate your image compressions everytime you save an image file to a specificed directory.



#5 portia79

portia79

    Forum Newcomer

  • Members
  • Pip
  • 40 posts

Posted 07 August 2015 - 02:00 PM

Or you can have something like Gulp or Grunt automate your image compressions everytime you save an image file to a specificed directory.

That would be even better - any links to a good tutorial (I usually work on Linux/Windows) so any will do. Thank you



#6 richardmountain

richardmountain

    Advanced Member

  • Members
  • PipPipPip
  • 400 posts
  • Gender:Male
  • Location:Alford
  • Experience:Nothing
  • Area of Expertise:Web Developer

Posted 07 August 2015 - 02:08 PM

I have used this site before, and found it very helpful.

 

http://optimizilla.com/



#7 Fuzzy Logic

Fuzzy Logic

    Web Guru

  • Gold Membership
  • 1,303 posts
  • Gender:Male
  • Location:Kent uk
  • Experience:Advanced
  • Area of Expertise:Designer

Posted 07 August 2015 - 05:38 PM

Use this if you dont have photoshop http://www.imgopt.com


#8 BlueDreamer

BlueDreamer

    Web Guru

  • Moderators
  • PipPipPipPipPipPip
  • 7,385 posts
  • Gender:Male
  • Location:Northampton (where?)
  • Experience:Advanced
  • Area of Expertise:Web Developer

Posted 07 August 2015 - 07:46 PM

If you're on Windows then http://www.xat.com/io/ is a good tool, it's been around for years  - about the same time as when PhotoImpact added the first image optimising tools in an image editor.



#9 NOCK

NOCK

    Chief Troll Hunter

  • Privileged
  • PipPipPipPipPip
  • 1,530 posts
  • Gender:Male
  • Location:Eastbourne, East Sussex
  • Experience:Intermediate
  • Area of Expertise:Web Developer

Posted 07 August 2015 - 09:17 PM

If you're on a Mac you could, 'save for web' in Photoshop and then run it through ImageOptim (which is a free app).


#10 rbrtsmith

rbrtsmith

    Web Guru

  • Privileged
  • PipPipPipPipPip
  • 3,716 posts
  • Gender:Male
  • Location:Manchester, UK
  • Experience:Nothing
  • Area of Expertise:Web Developer

Posted 08 August 2015 - 07:11 AM

That would be even better - any links to a good tutorial (I usually work on Linux/Windows) so any will do. Thank you

 

I haven't really used a tutorial on gulp, I just used the documentation which is pretty good https://github.com/gulpjs/gulp

 

Ideally you want to automate all your repetitive tasks, it saves a lot of time when you add things together for instance I automate

  • Image compression
  • SVG sprite generation & compression
  • Sass compilation, minification and linting,
  • JavaScript linting, (ES6) to ES5 transpilation, concatenation of files, minification
  • Favicon generation
  • Then it puts all static assets into a build folder and reloads the page via live reload.


#11 Nillervision

Nillervision

    All-rounder

  • Privileged
  • PipPipPipPipPip
  • 1,573 posts
  • Gender:Male
  • Location:Copenhagen, Denmark
  • Experience:Advanced
  • Area of Expertise:Web Designer

Posted 08 August 2015 - 11:41 AM

For good image optimization it is important to analyse the image itself.

First of all you need to figure out how many colours the image contain and how soft the transitions between the colours are.

 

For images with few colours and no colour transitions (gradients) you can get very good results with 8-bit formats.

8-bit formats for web are PNG-8 and GIF. The formats can contain 128 shades and two values for alpha (opaque or full transparency)

PNG-8 can be saved with lossless compression and will reduce the file size considerably. The only reason to choose GIF over PNG-8 is if your image is animated.

 

For images with more than 128 colours and with colour transitions, you must use true colour formats like JPEG or PNG-24/32.

JPEG is designed to compress photographs and produces very good results with very small file sizes. This compression is not lossless and ou will see artifacts if you compress the images too much. PNG-24/32 is lossless and (32) also has an 8-bit channel for alpha (128 values of transparency) but the files with this format are usually quite large compared to JPEG and should only be used if you need the alpha channel.

 

In general you should go with PNG-8 for graphics. Unless you have a vector version in which case you could use SVG. For colour photos use JPEG.

 

It can be difficult to choose the right format for B/W photos (or more accurate described as greyscale photos)

Both the 8-bit and 24 bit formats will assign 8-bit to the greyscale. In other words 128 shades of grey ;) The remaining bits on a 24 bit format are assigned to RGB and will simply not be used. However when it comes to compression JPEG still handles greyscale gradients very well so in general you should choose JPEG for greyscale images especially if they have very soft transitions.

 

As pointed out by others the build in PNG and JPEG compression algorithms in PhotoShop and GIMP are not the best for web. Personally I like the results of:

https://tinypng.com/ (for PNG, allows you to combine 8-bit colour with 8 bit alpha)

and https://tinyjpg.com/ (for JPEG heavy compression with reduced artifacts)


Edited by Nillervision, 08 August 2015 - 11:50 AM.


#12 BlueDreamer

BlueDreamer

    Web Guru

  • Moderators
  • PipPipPipPipPipPip
  • 7,385 posts
  • Gender:Male
  • Location:Northampton (where?)
  • Experience:Advanced
  • Area of Expertise:Web Developer

Posted 08 August 2015 - 04:04 PM

For good image optimization it is important to analyse the image itself.

 

That's why I used an image optimiser that has a lot of options to choose from, even down to optimising certain regions of an image while keeping the main subject in the highest quality. Bulk processing is easy but if you want to get the best possible file sizes then analysing each image separately is the only way to go :)



#13 portia79

portia79

    Forum Newcomer

  • Members
  • Pip
  • 40 posts

Posted 08 August 2015 - 04:48 PM

Thank you all for very informative replies.



#14 rbrtsmith

rbrtsmith

    Web Guru

  • Privileged
  • PipPipPipPipPip
  • 3,716 posts
  • Gender:Male
  • Location:Manchester, UK
  • Experience:Nothing
  • Area of Expertise:Web Developer

Posted 08 August 2015 - 06:11 PM

 

That's why I used an image optimiser that has a lot of options to choose from, even down to optimising certain regions of an image while keeping the main subject in the highest quality. Bulk processing is easy but if you want to get the best possible file sizes then analysing each image separately is the only way to go :)

 

I agree, if you're building something really significant - i.e. huge amounts of traffic and have the time to do this it's definitely the way forward.  On the majority of sites, which are pretty small I imagine the time taken to do this could be better spent elsewhere.

Perhaps even on smaller sites though it's sensible to do this on common assets such as a homepage banner image but not for images that are rarely downloaded - which could be bulk processed.

Both are good options, for bulk processing one should always use automated build tools, I couldn't imagine manually doing that stuff + minification of other assets manually.


Edited by rbrtsmith, 08 August 2015 - 06:13 PM.


#15 Kathy89

Kathy89

    Forum Newcomer

  • Members
  • Pip
  • 10 posts

Posted 03 December 2015 - 03:52 PM

Use an image optimizer.

 

If you have Adobe Photoshop, then happy days it will do the best job of this. There are other programs both downloadable and on-line you can use but most of them are ****e and not worth using. Most of the on-line ones either no longer work or actually make the file size larger.

 

If you use Windows you could try Serif's PhotoPlus which has a half decent image optimiser function.

 

http://www.serif.com/photoplus/

 

It's £80 but the previous version is available for less which is Photoplus X6 currently £20.

 

thanks! great solution!






0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users