Problem: Images load too slowly

Question

I used Html, Css, Js, and Php to create a website similar to craiglist. When the user clicks to upload an image larger than 1mb, the page becomes very slow or fails (503 error). There is no problem with images smaller than 100kb.

1. There is a form with a type=file input tag and a preview img tag on a php page. > No problem here.
2. When the user clicks the submit button, the form passes the value of the input tag to another php page, which contains the upload code.

Question: What is the best way to scale an image before uploading to the server? Compared to Craigslist, my site is very slow or fails to upload images. How to make uploads faster?

https://www.mimarketa.com/mmMain/mmEnglish/mmPostAd.php?country=US&county=Lewis&state=WA&adCity=All_Cities& ;category=ALL

I tried searching here and on Google for answers.

PHP Page 1: Enter the file tag and image preview tag. JS scales via draw methods.

Code of PHP page 2:

$upload_dir = "mmAdPics/";
    $file1 = $upload_dir . rand() . ".png";
    $picUrl1='https://www.mimarketa.com/mmMain/mmEnglish/'.$file1;
    $img1 = $_POST['hidden_data1'];
    $img1 = str_replace('data:image/png;base64,', '', $img1);
    $img1 = str_replace(' ', ' ', $img1);
    $data1 = base64_decode($img1);
    $success = file_put_contents($file1, $data1);
    print $success ? $file1 : 'Unable to save file 1. ';

Answer 1

Please check: https://www.php.net/manual/en/book.imagick.php

Specifically, resize the image. Additionally, the 503 error is most likely due to server timeout. You can increase the timeout on the server side, or limit the size of uploaded files on the client side.