3 Replies - 240 Views - Last Post: 04 November 2017 - 03:59 AM

#1 rneild  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 25
  • Joined: 05-October 12

How can we use jQuery to reduce the height and width of a jpeg image

Posted 30 August 2017 - 05:40 AM

How can we use jQuery to reduce the height and width of a jpeg image?
I would like to shrink the following image to about 75% of its original size so it looks like a thumbnail,
https://image.tmdb.o...kX5ZZJcme5U.jpg
Is This A Good Question/Topic? 0
  • +

Replies To: How can we use jQuery to reduce the height and width of a jpeg image

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 4138
  • View blog
  • Posts: 13,073
  • Joined: 08-June 10

Re: How can we use jQuery to reduce the height and width of a jpeg image

Posted 30 August 2017 - 05:49 AM

Quote

How can we use jQuery to reduce the height and width of a jpeg image?

Not at all.

The only image processing you can do in JS is via the <canvas> element, for which jQuery has no methods.

Well, you could alter the <img>'s width & height attributes, but that's just a display effect and not real scaling.

Probably the most bandwidth-friendly way is to (dynamically) create the thumbnail on the server.
Was This Post Helpful? 0
  • +
  • -

#3 Atli  Icon User is offline

  • Enhance Your Calm
  • member icon

Reputation: 4238
  • View blog
  • Posts: 7,216
  • Joined: 08-June 10

Re: How can we use jQuery to reduce the height and width of a jpeg image

Posted 30 August 2017 - 05:49 AM

It's generally better to do image manipulation on the server-side than on the client-side. There you can cache the results, and avoid having to do the work repeatedly. Doing heavy processing on the client-side is also likely to create UI lag, especially on mobile devices.

You can technically shrink down full-sized images using simple CSS or HTML attributes, but that's not a good idea either, as it requires you to download the full-sized image anyway, which is a waste of bandwidth. - Which, again, is particularly bad on mobile devices, where data should be considered a precious resource.
Was This Post Helpful? 0
  • +
  • -

#4 JackL11  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 04-November 17

Re: How can we use jQuery to reduce the height and width of a jpeg image

Posted 04 November 2017 - 03:59 AM

Yes you can use the .css method to reduce the width and height like this:
$("img").css("width","200px");
$("img").css("height","300px");


Was This Post Helpful? 0
  • +
  • -

Page 1 of 1