{"id":2262,"date":"2020-08-08T16:06:02","date_gmt":"2020-08-08T16:06:02","guid":{"rendered":"http:\/\/www.revolutionsincommunication.com\/viscomm\/?page_id=2262"},"modified":"2025-09-04T11:52:43","modified_gmt":"2025-09-04T11:52:43","slug":"image-uploads","status":"publish","type":"page","link":"https:\/\/revolutionsincommunication.com\/viscomm\/image-uploads\/","title":{"rendered":""},"content":{"rendered":"

How to Format & Upload an image<\/span><\/h3>\n

Now that you have some background information,<\/strong> we’re going to put your image on the WordPress site.<\/p>\n

There are three parts to the process:<\/p>\n

    \n
  1. “Optimize” or manage the file size\n
      \n
    1. change the “scale” of the photo and<\/li>\n
    2. change the pixel depth to 72 ppi<\/li>\n
    3. make sure it’s around 500 kilobytes (half a megabyte) for optimal web display.<\/li>\n<\/ol>\n<\/li>\n
    4. Save in the right format. (usually .jpg or .png)<\/li>\n
    5. Upload to a post or a page in your WordPress site.<\/li>\n<\/ol>\n

      \u00a01. Optimize the File Size\u00a0<\/strong><\/span><\/h4>\n
      \"\"<\/a>

      Image after adjustment<\/p><\/div>\n

      \"\"<\/a>

      Image too large<\/p><\/div>\n

      In Photoshop,<\/strong> file sizes are controlled through a box called “Image Size” under the top file menu “Image.”\u00a0 In this example, you’ll see a “file size” of 12 M\u00a0 (12 megabytes) with dimensions of about 4 x 4\u00a0 inches and a resolution of 1,000 pixels\/inch.\u00a0 \u00a0 This is all wrong for display in web browsers. What you need is a file size less than 400 K and resolution of only 72 pixels\/inch.\u00a0 When you type in 72 in the box where it says 1000, you get dimensions that are now rather small, so we adjusted the dimensions back up to about 6 x 6.<\/p>\n

      \n
      \"\"<\/a>

      Changing the scale in Gimp<\/p><\/div>\n

      It’s about the same in Gimp.<\/strong>\u00a0 The dialogue box looks like this and you just make sure you have a 72 ppi resolution and then take the size down to where it’s manageable. Again, you want to be more or less under 400 K.<\/p>\n

       <\/p>\n

      \n

      2. Use the right format\u00a0<\/strong><\/span><\/h4>\n
      \"\"<\/a>

      Photoshop format dialogue box. Its pretty much the same in Gimp except instead of “save as” you use “export.”<\/p><\/div>\n

      The\u00a0 process \u00a0is\u00a0 pretty\u00a0 much\u00a0 the\u00a0 \u00a0same\u00a0 \u00a0in Gimp\u00a0 and Photoshop.<\/p>\n

        \n
      1. Pull down the “File” menu from the top<\/li>\n
      2. \u00a0Then release on\u00a0 \u00a0“Save As”<\/strong> or\u00a0 “Export”<\/strong> in Gimp.<\/li>\n
      3. \u00a0A dialogue box like this one appears.<\/li>\n
      4. \u00a0Pull the format bar down (or up) until you find your image format (here is Example1.jpg). Find .jpg or .png for photos, .gif for simple color display.<\/li>\n
      5. \u00a0Then decide where to save it. (“Desktop” is always handy)<\/li>\n
      6. Then hit the save button at the bottom left.<\/li>\n
      7. Next, decide what quality you need.\u00a0 Remember, the higher the quality, the larger the file size.<\/li>\n
      8. You now have two files — your original (.xcf or .psd) file and your .jpg or .png file that was edited for the web.\u00a0 This is the right strategy, since your original file psd or xcf\u00a0 file will save layers and other features that won’t be saved with an exported jpg or png.<\/li>\n<\/ol>\n
        \n

        3. Upload to a WordPress page or post <\/span>\"\"<\/a><\/strong><\/h4>\n

        Almost everything you see on a WordPress portfolio site is placed on a page or a post. In COMS 226, where we want to display assignments on your portfolio site, you create a new page or post and then add images or other items.<\/p>\n

        When you create a new page or post in WordPress, you’ll see a toolbar with the image icon.\u00a0 Sometimes the toolbar is \u00a0at the top of the editing area.\u00a0 Open it and a menu opens.\u00a0 It\u00a0 lets you insert all kinds of items, including photos.\u00a0 So\u00a0 click on \u201cimage\u201d and it will take you to your media library, or an upload browser.\u00a0 Find the image, click on it, and upload it to your media library. Then insert it on your page or post, and then be sure to save your page or post.<\/p>\n","protected":false},"excerpt":{"rendered":"

        How to Format & Upload an image Now that you have some background information, we’re going to put your image on the WordPress site. There are three parts to the process: “Optimize” or manage the file size change the “scale” … Continue reading →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"full-width-page.php","meta":{"nf_dc_page":"","footnotes":""},"class_list":["post-2262","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/revolutionsincommunication.com\/viscomm\/wp-json\/wp\/v2\/pages\/2262","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/revolutionsincommunication.com\/viscomm\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/revolutionsincommunication.com\/viscomm\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/revolutionsincommunication.com\/viscomm\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/revolutionsincommunication.com\/viscomm\/wp-json\/wp\/v2\/comments?post=2262"}],"version-history":[{"count":6,"href":"https:\/\/revolutionsincommunication.com\/viscomm\/wp-json\/wp\/v2\/pages\/2262\/revisions"}],"predecessor-version":[{"id":4140,"href":"https:\/\/revolutionsincommunication.com\/viscomm\/wp-json\/wp\/v2\/pages\/2262\/revisions\/4140"}],"wp:attachment":[{"href":"https:\/\/revolutionsincommunication.com\/viscomm\/wp-json\/wp\/v2\/media?parent=2262"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}