0

I am looking for an alternative to shrink my images. Until now I shrinked my images with a canvas method like here: Resizing an image in an HTML5 canvas The problem is that this method is not supported by older Browser-versions, so I am looking for a method which shrinks the image (not just scale it) without Canvas. Is there another solution or is it impossible to do this without Canvas?

Community
  • 1
  • 1
Number_987
  • 123
  • 1
  • 9

1 Answers1

0

I just do not set a width on height on an image and inmy css i wil have img {max-width:100%}

Bryan Labuschagne
  • 203
  • 1
  • 8
  • No that just scales it not shrink it, so it does not shrink the file size. – Number_987 May 29 '16 at 19:10
  • What if you use a different image in the media querie? – Bryan Labuschagne May 29 '16 at 19:11
  • How do you mean? Can yu – Number_987 May 29 '16 at 19:13
  • Can you make an example or explain it better? ;) – Number_987 May 29 '16 at 19:14
  • Yeah for example you will have a normal image as a background then in your media querie just google which one to use the in the same css you just call the same backgrouns image but the scaled down smaller version here's a nifty tool https://imageresizer.io/ – Bryan Labuschagne May 29 '16 at 19:18
  • Did I get it right: This Plugin can shrink my images realy, so that the file size would be lower? – Number_987 May 29 '16 at 19:21
  • That is correct so for each media querie you put the same image but a smaller one which will reduce the website speed. – Bryan Labuschagne May 29 '16 at 19:23
  • Ok thanks but you mean that it improve the website speed so it makes it faster right? – Number_987 May 29 '16 at 19:25
  • Yes so its much better to use a smaller image in responsive view will load faster – Bryan Labuschagne May 29 '16 at 19:27
  • Hi sorry. I looked again and saw that this Plugin is not download able, you have to send an url to it but I want to write it into my code. Someone another solution? – Number_987 May 29 '16 at 20:41
  • Until responsive images become part of the standard, html5 canvas is the only element that can actually manipulate image pixels. Alternatively, you can use 3rd party image libraries that read the image file and manipulate the content. **We don't recommend libraries on Stackoverflow**, but you can Google both server-side & client-side image libraries – markE May 29 '16 at 22:49