Jump to content
Sign in to follow this  
justlukeyou

How to Crompress Image File Size?

Recommended Posts

Hi, I have used a few SEO checking sites and they all advise that I need to compress my images.  I found the Google image advice but it doesn't say how to compress images.  I have looked on YouTube and all it shows it how to make the image smaller.  Is that compressing? 

 

I converted one image from PNG to JPG but the image quality is awful and comes out all grainy.

 

Is there a standard process to use to compress large images?

Share this post


Link to post
Share on other sites

depends  on the image - would help if you posted a link to the site or showed the images

Share this post


Link to post
Share on other sites
5 hours ago, Jo 90 said:

If you're talking about file size in order to speed-up your page, try these: https://compressor.io/ or https://tinypng.com/

Many Jo, I tested testedpng and it reduced a png by 70% but how do they work?  The image it produced looks exactly the same as the PNG 3 times the file size.

Share this post


Link to post
Share on other sites
14 minutes ago, justlukeyou said:

Thanks.  How is it doing this.  Why aren't they made this small in the first place?

No idea, witchcraft! You can compress with PHP but their results are amazing to be honest. Tiny offer an API if you want to factor it in.

Edited by BrowserBugs

Share this post


Link to post
Share on other sites
12 minutes ago, justlukeyou said:

Thanks.  How is it doing this.  Why aren't they made this small in the first place?

It depends on where you use them, for print you don't want any compression but you do on the web.

It's all algorithm based, and it depends on whatever algorithm the service is using and whether the compression is lossless or lossy. Generally, they remove unused metadata from the image, and recognise patterns where they same image information can be re-used. It's clever stuff.

Share this post


Link to post
Share on other sites
5 hours ago, Stephen Chong said:

But you have to suffer with the Quality. I am using Pinta and Photoshop for image resizing and for other editing purposes. 

You don't have to suffer with the quality as others in this thread have stated you can use lossless compression.

Also the image compression in Photoshop isn't great.  You will also want to compress images further with some of the tools suggested earlier.

Share this post


Link to post
Share on other sites
On 10/17/2018 at 11:52 AM, justlukeyou said:

Thanks.  How is it doing this.  Why aren't they made this small in the first place?

 

On 10/17/2018 at 10:34 AM, BrowserBugs said:

I find compressor.io pips tiny for jpg, other way round for png.

tiny.PNG.04a1bd5edb7005eef581c2ea0e27a3b8.PNG

compressor.PNG.e1791b040d3e8d66cc209040c13ca766.PNG

Compressor.

original-compressor.thumb.jpg.5d9523cfec668c0d3f9145e3b3fd93df.jpg

Tiny

original-tiny.thumb.jpg.fbc3f2321a986d83ba2db2a2ab0fd542.jpg

 

Look at these two images carefully, there are subtle differences, most notable is colour saturation, but there other things that it does too.

Share this post


Link to post
Share on other sites
2 hours ago, Fuzzy Logic said:

Look at these two images carefully, there are subtle differences, most notable is colour saturation, but there other things that it does too.

Your eyes must be better than mine 'cos I've just spent 5 minutes comparing the two and I can't see any differences.

Are the difference really going to matter all that much? A lot of people use phones to browse the web - are they going to notice the subtle differences in an image 300px wide?

Share this post


Link to post
Share on other sites

better definition in the first image (middle of the head for example) and better colour saturation  but the second image is fine and especially considering you wouldn't see the two versions together to compare. if it's a critical image that i really want control over then i use http://luci.criosweb.ro/riot/ (win only) 

Share this post


Link to post
Share on other sites
2 hours ago, fisicx said:

Your eyes must be better than mine 'cos I've just spent 5 minutes comparing the two and I can't see any differences.

Are the difference really going to matter all that much? A lot of people use phones to browse the web - are they going to notice the subtle differences in an image 300px wide?

no, the differences are hardly noticeable, but they can make a big difference to the overall feel of a web page sometimes if you sacrifice the even the tiniest saturation etc. 

ultimately, it’s a balance between image quality and size. 

Share this post


Link to post
Share on other sites

Do they really make a big difference?

What you see is never going to be the same as what I see. Our eyes see colours differently, we use different browsers and different devices, the brightness will be different, the ambient light and a zillion other variables.

If I can improve page load speed by using a slightly lower image quality then I will. A long term test I've been running shows people aren't too fussed about high quality images on a standard site. Maybe a photography website needs high quality but your average facebook user doesn't care.

Share this post


Link to post
Share on other sites
18 hours ago, fisicx said:

Do they really make a big difference?

What you see is never going to be the same as what I see. Our eyes see colours differently, we use different browsers and different devices, the brightness will be different, the ambient light and a zillion other variables.

If I can improve page load speed by using a slightly lower image quality then I will. A long term test I've been running shows people aren't too fussed about high quality images on a standard site. Maybe a photography website needs high quality but your average facebook user doesn't care.


What they are getting at is that it all depends on the context.  There are situations where you would not want to sacrifice quality at all.  There are others where it's worth trading some quality for performance - it depends on the context.

Moreover higher quality images are important on phones because most are now using ultra high definition and some also OLED screens.  This coupled with the fact that many users will hold these devices closer to their eyes than they would on a desktop/laptop means that quality degradation in images will be even more apparent.

For images and design in general you have to look at who will be using the website, what is it's intended purpose and let that drive decisions in how it looks; what trade-offs to make and so forth.  Some cases it doesn't require a design to look beautiful as UX is more important, in other cases it is critical for the brand for the website to look better than the competition.

Share this post


Link to post
Share on other sites
1 hour ago, rbrtsmith said:

Moreover higher quality images are important on phones because most are now using ultra high definition and some also OLED screens.  This coupled with the fact that many users will hold these devices closer to their eyes than they would on a desktop/laptop means that quality degradation in images will be even more apparent.

Are they important? I test by lowering the quality until it affects user behavior. It's quite surprising how low you can go before people take notice. And this was on a site where images were crucial to success.

But I do agree, it's all about context. In the comparison above I doubt using the lower quality image would make any difference at all to the UX.

Share this post


Link to post
Share on other sites
14 hours ago, fisicx said:

Are they important? I test by lowering the quality until it affects user behavior. It's quite surprising how low you can go before people take notice. And this was on a site where images were crucial to success.

But I do agree, it's all about context. In the comparison above I doubt using the lower quality image would make any difference at all to the UX.

Yes it can be important, and like you agree it's down to context.  Say your client is selling high end watches.  You are going to want the images of those watches to be of the highest quality - you also want the design of the website to give the feeling of luxury, the brand and everything has to give off that impression.

You look at any big luxury brand and every one of them I guarantee will have really high quality images, they will do far more extensive user testing than any of us on here will individually do, brands like Rolex, Omega have teams of very highly experienced marketing experts who use that data to help drive design.

Imagine a lawyer turning up at your door to represent you on a big case, his car and his suit are scruffy - it's not going to give you a good first impression is it?  Your perception would be that this lawyer is substandard.   Websites or brands can be the same, it's critically important to create a good first impression.

Of course you could create a bad first impression by having a slow website.  Done right you can combine good performance with high quality images, you can do things like inline a base-64 of a hugely compressed version of the image, only to lazy-load the real one in as it scrolls into view (Medium does this).  You don't always have to sacrifice on quality.

It's all about getting the right balance for the context and I get frustrated when people approach these things with black and white ideas, there is no universal right/wrong way to go about it.

Share this post


Link to post
Share on other sites

I totally agree with you. It was just that fuzzy said:

On 12/3/2018 at 8:51 PM, Fuzzy Logic said:

no, the differences are hardly noticeable, but they can make a big difference to the overall feel of a web page sometimes if you sacrifice the even the tiniest saturation etc.

And I'm not so sure it makes a big difference.

Share this post


Link to post
Share on other sites
3 hours ago, rbrtsmith said:

It's all about getting the right balance for the context and I get frustrated when people approach these things with black and white ideas, there is no universal right/wrong way to go about it.

Agreed. I find that often using a compressed thumb with a less compressed enlarge works quite well. If a visitor wanted a bigger picture then they'll want more clarity, and since the full size is not in the flow you can let rip a bit :) 

Share this post


Link to post
Share on other sites
8 hours ago, fisicx said:

I totally agree with you. It was just that fuzzy said:

And I'm not so sure it makes a big difference.

In order to make an argument towards that claim, you would first have to define what you mean by "big difference" and secondly at what point does an image become so poor that it affects the goals of the website. To answer the first and second question, I would say that they both need to be contextualised into specific circumstances, for example, on a personal blog, you would get away with some poor quality images as the text is the focus and they are usually personal sites. However, on a commercial website with a luxury brand, an image that shows even a tiny blotching or blurring can make a big difference to the sales, imagine if Apple, for example, decided to take your advice and start posting images that concentrated on reducing image size at expense of showing its products just a little blurry?

I find you quite often dismiss design and how important it really is and what it can do, its importance is not to take away from the content, it is there to enhance the content, anything other than this and it is simply bad design. It is there to convince, direct and feed a positive message about the values of the business, not to simply  'look nice' and is most the time something that enables the decision as to whether to buy or not since it includes aspects like navigation for example, if this was badly designed, or the shopping card too complicated, they simply won't but no matter how good the product being sold.

Share this post


Link to post
Share on other sites

I agree with you (as have others). It all depends on what the image is being used for.

And I don't dismiss design - what I question is the impact of design as UX in many cases is far more important to success than the details in design (which is what I think you alluded to in your post).

I suppose it also depends on what you define as design. I'd define the checkout process as workflow, usability or UX. Others may consider this to be design.

 

Share this post


Link to post
Share on other sites
18 minutes ago, fisicx said:

I agree with you (as have others). It all depends on what the image is being used for.

And I don't dismiss design - what I question is the impact of design as UX in many cases is far more important to success than the details in design (which is what I think you alluded to in your post).

I suppose it also depends on what you define as design. I'd define the checkout process as workflow, usability or UX. Others may consider this to be design.

 

Design is the umbrella term (it is actually defined as "To create through planning") , it is not very often you create a design that does not take UI/UX into account and to be more specific regarding things like branding, that could be argued as an integral part of UX even in subset situations like the backend system of a CMS or CRM.

There is really no getting around the fact that the requirements for design are quite often the requirements for UX/UI, that is audience research and although UX/UI usually requires more audience research than branding, that does not mean that you could not do as much research for branding, they are complementary and neither could be used without the other so to dismiss parts of 'design' in favour of others is situational, not a constant.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing

    No registered users viewing this page.

  • Member Statistics

    • Total Members
      59,167
    • Most Online
      4,970

    Newest Member
    pj321
    Joined
  • Forum Statistics

    • Total Topics
      65,992
    • Total Posts
      454,505
×