{"id":25168,"date":"2021-06-01T19:36:00","date_gmt":"2021-06-01T16:36:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=25168"},"modified":"2021-10-17T20:30:00","modified_gmt":"2021-10-17T17:30:00","slug":"kuinka-optimoida-kuvan-lataaminen-php-ssa","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fi\/kuinka-optimoida-kuvan-lataaminen-php-ssa\/","title":{"rendered":"Kuinka optimoida kuvan lataaminen PHP: ss\u00e4"},"content":{"rendered":"<p>\u00c4skett\u00e4in yksi lukijoista kysyi minulta, kuinka optimoida kuvat ladattavaksi PHP: ss\u00e4. Vastatakseni kysymykseen p\u00e4\u00e4tin kirjoittaa artikkelin, joka n\u00e4ytt\u00e4\u00e4 kuinka voimme pienent\u00e4\u00e4 tai pakata tiedostokokoa sen lataamisen yhteydess\u00e4.<\/p>\n<p>Kehitt\u00e4j\u00e4n\u00e4 tiedostojen lataaminen on s\u00e4\u00e4nn\u00f6llinen teht\u00e4v\u00e4mme. Teemme sen aina perinteisell\u00e4 tavalla. Sis\u00e4\u00e4nrakennetun toiminnon avulla <code>move_uploaded_file<\/code>siirr\u00e4mme kuvat hakemistoon ja j\u00e4t\u00e4mme ne sellaisenaan. Ajattelemme muutamasta kohdasta, kuten mik\u00e4 on l\u00e4hetetyn kuvan koko? Tarvitseeko t\u00e4m\u00e4n kuvan lataaminen verkkosivustolle aikaa? Voinko optimoida kuvan menett\u00e4m\u00e4tt\u00e4 sen laatua?<\/p>\n<p>Kuvilla on t\u00e4rke\u00e4 rooli sivuston nopeudessa. Raskaat kuvat hidastavat sivunopeutta, mik\u00e4 johtaa yleis\u00f6n ja liikenteen menett\u00e4miseen. T\u00e4m\u00e4 tilanne ei ole edullinen. Teemme paljon vaivaa yleis\u00f6n ja liikenteen rakentamiseksi. Joten hyv\u00e4n\u00e4 k\u00e4yt\u00e4nt\u00f6n\u00e4 kannattaa optimoida kuva lataamisen aikana.<\/p>\n<p>T\u00e4ss\u00e4 artikkelissa aion k\u00e4ytt\u00e4\u00e4 <a href=\"https:\/\/tinypng.com\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">TinyPNG-<\/a> palvelua kuvien optimointiin. Kirjoitamme sille koodin hetkess\u00e4. Sill\u00e4 v\u00e4lin alla on tinypng.com-kuvakaappaus alkuper\u00e4isen ja optimoidun kuvan v\u00e4lisen eron visualisoimiseksi.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20382-6081e8cbba932.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20382-6081e8cbba932.png\" alt=\"Kuinka optimoida kuvan lataaminen PHP: ss\u00e4\" ><\/a><\/p>\n<h3>Optimoi kuva ladattaessa TinyPNG: n avulla<\/h3>\n<p>Aloittamiseksi sinun on asennettava TinyPNG-kirjasto. Asenna kirjasto alla olevan komennon avulla.<\/p>\n<pre><code>composer require tinify\/tinify<\/code><\/pre>\n<p>Kun olet asentanut kirjaston, hanki API-avain <a href=\"https:\/\/tinypng.com\/developers\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">TinyPNG-<\/a> verkkosivustolta.<\/p>\n<p><strong>Huomaa<\/strong>: TinyPNG sallii 500 kuvan pakkaamisen ilmaiseksi kuukaudessa. Yli 500 kuvasta sinun on maksettava heille. Jos sinulla on pieni verkkosivusto, t\u00e4m\u00e4 kiinti\u00f6 riitt\u00e4\u00e4.<\/p>\n<p>Kun olet valmis API-avaimen kanssa, aloitetaan koodilla. Luon yksinkertaisen HTML-lomakkeen, joka sis\u00e4lt\u00e4\u00e4 tiedostosy\u00f6t\u00f6n ja l\u00e4hetyspainikkeen.<\/p>\n<pre><code>&lt;form method=\"post\" enctype=\"multipart\/form-data\"&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;p&gt;&lt;input type=\"file\" name=\"myfile\" accept=\"image\/*\" required \/&gt;&lt;\/p&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;button type=\"submit\" name=\"submit\"&gt;Submit&lt;\/button&gt;\n&lt;\/form&gt;<\/code><\/pre>\n<p>Kun k\u00e4ytt\u00e4j\u00e4t lataavat kuvan t\u00e4ll\u00e4 lomakkeella, kehitt\u00e4j\u00e4t kirjoittavat alla olevan tyyppisen koodin siirt\u00e4\u00e4kseen ladattua kuvaa palvelimelle.<\/p>\n<pre><code>if (isset($_POST['submit'])) {\n\u00a0\n\u00a0\u00a0\u00a0\u00a0$allowed_mime_types = array('image\/gif', 'image\/jpg', 'image\/jpeg', 'image\/png');\n\u00a0\n\u00a0\u00a0\u00a0\u00a0if (!in_array($_FILES['myfile']['type'], $allowed_mime_types)) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0echo 'Invalid file format.';\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0exit();\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0if (!file_exists(getcwd().'\/uploads')) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0mkdir(getcwd().'\/uploads', 0777);\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0$src_file_name = $_FILES['myfile']['name'];\n\u00a0\u00a0\u00a0\u00a0move_uploaded_file($_FILES['myfile']['tmp_name'], getcwd().'\/uploads\/'.$src_file_name);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0echo \"File uploaded successfully\";\n}<\/code><\/pre>\n<p>Yll\u00e4 oleva koodi on oikea, eik\u00e4 siin\u00e4 ole ongelmaa paitsi kuvan optimoinnin puuttuva osa. Kuvien optimoimiseksi sinun tarvitsee vain lis\u00e4t\u00e4 2 rivi\u00e4 koodia <code>move_uploaded_file<\/code>lauseen j\u00e4lkeen.<\/p>\n<pre><code>\/\/optimize image using TinyPNG\n$source = TinifyfromFile(getcwd().'\/uploads\/'.$src_file_name);\n$source-&gt;toFile(getcwd().'\/uploads\/'.$src_file_name);<\/code><\/pre>\n<p>Edell\u00e4 olevat 2 rivi\u00e4 ottavat kuvan l\u00e4hdepolulta, optimoivat sen TinyPNG-kirjastolla menett\u00e4m\u00e4tt\u00e4 laatua ja tallentavat sen takaisin samalle l\u00e4hdepolulle. Toisin sanoen se korvaa alkuper\u00e4isen kuvan optimoidulla versiolla.<\/p>\n<p>Lopullinen koodimme on seuraava.<\/p>\n<pre><code>&lt;?php\nrequire_once(\"vendor\/autoload.php\");\n\u00a0\nTinifysetKey(\"TINYPNG_API_KEY\"); \/\/pass your actual API key\n\u00a0\nif (isset($_POST['submit'])) {\n\u00a0\n\u00a0\u00a0\u00a0\u00a0$allowed_mime_types = array('image\/gif', 'image\/jpg', 'image\/jpeg', 'image\/png');\n\u00a0\n\u00a0\u00a0\u00a0\u00a0if (!in_array($_FILES['myfile']['type'], $allowed_mime_types)) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0echo 'Invalid file format.';\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0exit();\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0if (!file_exists(getcwd().'\/uploads')) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0mkdir(getcwd().'\/uploads', 0777);\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0$src_file_name = $_FILES['myfile']['name'];\n\u00a0\u00a0\u00a0\u00a0move_uploaded_file($_FILES['myfile']['tmp_name'], getcwd().'\/uploads\/'.$src_file_name);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\/\/optimize image using TinyPNG\n\u00a0\u00a0\u00a0\u00a0$source = TinifyfromFile(getcwd().'\/uploads\/'.$src_file_name);\n\u00a0\u00a0\u00a0\u00a0$source-&gt;toFile(getcwd().'\/uploads\/'.$src_file_name);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0echo \"File uploaded successfully.\";\n}\n?&gt;\n&lt;form method=\"post\" enctype=\"multipart\/form-data\"&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;p&gt;&lt;input type=\"file\" name=\"myfile\" accept=\"image\/*\" required \/&gt;&lt;\/p&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;button type=\"submit\" name=\"submit\"&gt;Submit&lt;\/button&gt;\n&lt;\/form&gt;<\/code><\/pre>\n<p>Mene eteenp\u00e4in ja kokeile sit\u00e4. Sinun pit\u00e4isi n\u00e4hd\u00e4, ett\u00e4 kuvan optimoitu versio tallennetaan hakemistoon.<\/p>\n<p>Toivon, ett\u00e4 ymm\u00e4rr\u00e4t kuinka optimoida kuva ladattavaksi PHP: ss\u00e4. Haluaisin kuulla ajatuksesi ja ehdotuksesi alla olevassa kommenttiosassa.<\/p>\n<h4>Aiheeseen liittyv\u00e4t artikkelit<\/h4>\n<ul>\n<li><a href=\"https:\/\/themewp.inform.click\/fi\/tinypng-pakkaa-kuvat-php-lla\/\" title=\"TinyPNG Pakkaa kuvat PHP: ll\u00e4\">TinyPNG Pakkaa kuvat PHP: ll\u00e4<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/fi\/lataa-ja-pakkaa-useita-kuvia-php-ssa\/\" title=\"Lataa ja pakkaa useita kuvia PHP: ss\u00e4\">Lataa ja pakkaa useita kuvia PHP: ss\u00e4<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/fi\/kuinka-ladata-ja-pakata-kuvia-laravelissa\/\" title=\"Opas kuvien lataamiseen ja pakkaamiseen Laravelissa\">Opas kuvien lataamiseen ja pakkaamiseen Laravelissa<\/a><\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/artisansweb.net\" class=\"external external_icon\">artisansweb.net<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>T\u00e4ss\u00e4 artikkelissa n\u00e4yt\u00e4n sinulle, kuinka voit optimoida kuvan PHP: ss\u00e4 ladattavaksi k\u00e4ytt\u00e4m\u00e4ll\u00e4 TinyPNG-kirjastoa. Kuvilla on eritt\u00e4in t\u00e4rke\u00e4 rooli verkkosivustolla.<\/p>\n","protected":false},"author":1,"featured_media":21612,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[275],"tags":[843],"class_list":["post-25168","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-php-6","tag-affiai-fi"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/posts\/25168","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/comments?post=25168"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/posts\/25168\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/media\/21612"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/media?parent=25168"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/categories?post=25168"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/tags?post=25168"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}