Resize uploaded image to multiple dimensions

Question

I'm building my own simple CMS. Here is a problem with images. Loading large size images slow down the website. I'm here to ask how to resize an image to multiple dimensions for example: image.jpg orginal size is 1280x720pixels; for thumbnail to create image250x250.jpg; inside post usage image500x350.jpg and so on. Currently using the same image for thumbnails, posts and so on. I'm just styling with CSS.

Thanks and best regards!

@sburke0708 base-64 encoding images *increases* the amount of data that must be transfered. See http://stackoverflow.com/questions/11402329/base64-encoded-image-size — Nate, Jan 06 '16 at 00:15
can you create a div and set the background-image size and width in your css? — Stephen Burke, Jan 06 '16 at 00:17

score 0 · Answer 1 · answered Jan 06 '16 at 00:27

After a user uploads an image, you'll need to create and retain multiple copies of that image on your server (one copy per desired size). The ImageMagick software is commonly used for such tasks.

There are many explanations online that will go into more detail, but in general you'll want to install ImageMagick on your server, then enable the ImageMagick PHP extension.

After creating a few copies of the uploaded image, you can use the Imagick::resizeImage function to independently modify the size of each one.

If you're unable to install the PHP extension, then you can instead invoke ImageMagick's convert command line utility via PHP's exec() function.

Resize uploaded image to multiple dimensions

1 Answers1