{"id":488,"date":"2017-03-23T16:16:11","date_gmt":"2017-03-23T16:16:11","guid":{"rendered":"http:\/\/www.revolutionsincommunication.com\/viscomm\/?page_id=488"},"modified":"2025-09-05T18:22:42","modified_gmt":"2025-09-05T18:22:42","slug":"optimize","status":"publish","type":"page","link":"https:\/\/revolutionsincommunication.com\/viscomm\/optimize\/","title":{"rendered":"2.1 Optimize your image"},"content":{"rendered":"<div id=\"attachment_1854\" style=\"width: 267px\" class=\"wp-caption alignright\"><a href=\"http:\/\/loc.gov\/pictures\/resource\/ppmsca.51815\/\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-1854\" class=\"wp-image-1854\" src=\"https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2020\/01\/DonkeyCart-300x265.jpg\" alt=\"\" width=\"257\" height=\"227\" srcset=\"https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2020\/01\/DonkeyCart-300x265.jpg 300w, https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2020\/01\/DonkeyCart.jpg 576w\" sizes=\"auto, (max-width: 257px) 100vw, 257px\" \/><\/a><p id=\"caption-attachment-1854\" class=\"wp-caption-text\">https:\/\/hdl.loc.gov\/loc.pnp\/ppmsca.51815<\/p><\/div>\n<p><strong>This exercise<\/strong> walks you through the way we\u00a0 optimize the size and resolution of existing images.\u00a0 We&#8217;ll download\u00a0 a public domain photo from the Library of Congress,\u00a0 open it, and then:<\/p>\n<ol>\n<li>Reduce the size<\/li>\n<li>Adjust contrast and brightness levels<\/li>\n<li>Save as a jpg or png using file compression to further reduce the file size.<\/li>\n<\/ol>\n<p>Then we upload it to your portfolio page.<\/p>\n<p>You can use any of the millions of public domain images at the\u00a0 \u00a0Library of Congress web site. Maybe take a minute and browse <a href=\"https:\/\/www.loc.gov\/photos\/collections\/\">the special collection galleries<\/a>.\u00a0 Not mentioned on that page but also worth a search: the Lewis Hine child labor collection and the Farm Security Administration collection.<\/p>\n<p>The reason we need to do this is that very large files (20 &#8211; 100 megabytes) take too long to send via the web. We need much smaller files, around 400 to 800 kilobytes.\u00a0 We also need to be sure that we are saving in a web-friendly format, such as jpg or png.\u00a0 \u00a0So &#8230;<\/p>\n<p>First, Download any public domain photo, such as this <a href=\"https:\/\/www.loc.gov\/item\/2004664346\/\">1851 Daguerrotype photo<\/a> from the Library of Congress.\u00a0 \u00a0There are download options on the bar at the lower left of the photo.\u00a0 Pull the option bar down to TIFF 38.4 mb. Click on &#8220;Go&#8221; to download to your desktop or download folder.<\/p>\n<p>Then open your photo in Gimp or in Photoshop.\u00a0 You&#8217;ll want to use\u00a0 the tool bar and the layers pallet.<\/p>\n<p><strong>1 Resize &#8211;\u00a0 <\/strong>&#8211; Open &#8220;Transform \/ Scale&#8221; in Gimp or &#8220;Image Size&#8221; in Photoshop.<\/p>\n<div id=\"attachment_2273\" style=\"width: 160px\" class=\"wp-caption alignright\"><a href=\"https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2020\/08\/ImgSize.160.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-2273\" class=\"wp-image-2273 size-thumbnail\" src=\"https:\/\/www.revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2020\/08\/ImgSize.160-150x150.png\" alt=\"\" width=\"150\" height=\"150\" \/><\/a><p id=\"caption-attachment-2273\" class=\"wp-caption-text\">Photoshop &#8220;Image Size&#8221; box<\/p><\/div>\n<p style=\"padding-left: 40px;\"><strong>In Photoshop,<\/strong> pull down from top menu Image \/ Image\u00a0 Size\u00a0 and change Image Resolution\u00a0 to 72 pixels\/inch.\u00a0 Also change your dimensions to about 7 by 6 inches. Your overall file size should now be around 300 kb\u00a0 instead of 38 mb.<\/p>\n<div id=\"attachment_2171\" style=\"width: 209px\" class=\"wp-caption alignright\"><a href=\"https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2020\/04\/Screen-Shot-2020-04-09-at-8.03.20-AM.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-2171\" class=\"wp-image-2171\" src=\"https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2020\/04\/Screen-Shot-2020-04-09-at-8.03.20-AM-300x241.png\" alt=\"\" width=\"199\" height=\"160\" srcset=\"https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2020\/04\/Screen-Shot-2020-04-09-at-8.03.20-AM-300x241.png 300w, https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2020\/04\/Screen-Shot-2020-04-09-at-8.03.20-AM-768x616.png 768w, https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2020\/04\/Screen-Shot-2020-04-09-at-8.03.20-AM.png 770w\" sizes=\"auto, (max-width: 199px) 100vw, 199px\" \/><\/a><p id=\"caption-attachment-2171\" class=\"wp-caption-text\">Gimp &#8220;Scale Image&#8221; dialogue box<\/p><\/div>\n<p style=\"padding-left: 40px;\"><strong>In Gimp<\/strong>, pull down from top menu Image \/ Scale Image and change resolution to 72 pixels \/ inch and dimensions to 7 or 6 wide. Your overall file size should now be around 300 kb\u00a0 instead of 38 mb.<\/p>\n<p><strong>2. Level adjust brightness and contrast.\u00a0<\/strong><\/p>\n<p style=\"padding-left: 80px;\"><strong>Photoshop<\/strong> &#8211; Top menu &#8220;Image&#8221; -&gt; Adjustments -&gt; Levels will bring up the dialogue box.<\/p>\n<p style=\"padding-left: 80px;\"><strong>Gimp &#8211; Top menu <\/strong>&#8220;Colors&#8221; -&gt; &#8220;Levels&#8221; and adjust using dialogue box.<\/p>\n<p><strong>3. Export &#8211; In both Gimp and Photoshop,<\/strong> you&#8217;ll <span style=\"color: #993300;\"><strong>export<\/strong><\/span> to a file format that can be used on a web site &#8212;\u00a0 jpg and png are best. Then post it on your portfolio site as 2.1.<\/p>\n<p><strong>Troubleshooting &#8212;\u00a0\u00a0<\/strong><\/p>\n<ul>\n<li>If Gimp or Photoshop seems frozen or hung up, be sure you don&#8217;t have a selection or a process going on. Those little process windows pop up independently of the main screen and get lost on modern desktops. The solution is to go to Select on the top menu and pull down to Deselect.<\/li>\n<li>If your color selections seem to be stuck on black and white, check to see that your <strong>Mode<\/strong> is not on <strong>Greyscale<\/strong>.\u00a0 If it is, change it to<strong> RGB<\/strong> (Red-Green-Blue).<\/li>\n<li>You&#8217;ll notice that this file is too dark and hard to see.\u00a0 In our next exercise we&#8217;ll use the Level Adjust command to ensure that the image levels are OK.<\/li>\n<\/ul>\n<p><strong>How to upload a jpg or gif to your portfolio site: \u00a0 \u00a0\u00a0<\/strong><\/p>\n<div id=\"attachment_489\" style=\"width: 310px\" class=\"wp-caption alignright\"><a href=\"https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2016\/12\/InsertMedia.CMS_.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-489\" class=\"wp-image-489 size-medium\" src=\"https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2016\/12\/InsertMedia.CMS_-300x228.jpg\" alt=\"\" width=\"300\" height=\"228\" border=\"1\" srcset=\"https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2016\/12\/InsertMedia.CMS_-300x228.jpg 300w, https:\/\/revolutionsincommunication.com\/viscomm\/wp-content\/uploads\/2016\/12\/InsertMedia.CMS_.jpg 678w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><p id=\"caption-attachment-489\" class=\"wp-caption-text\">Insert media dialogue box, WordPress Content Management System<\/p><\/div>\n<p>In a WordPress system, you have to create a page or a post \u00a0before you can place a photo.\u00a0 (You already did this in A1.2.)\u00a0 So, open or create a page or post\u00a0 in WordPress.<\/p>\n<p>Look for a the \u00a0&#8220;add media&#8221; button in the upper left. Sometimes it will be inside a circle with a cross.\u00a0 Once you click on the button \u00a0you will see a dialogue box for &#8220;insert media.&#8221;<\/p>\n<p>There are several ways to add the media:<\/p>\n<ol>\n<li><strong>Upload something<\/strong> to your library &#8212; This is the usual thing you need to do with a new web site. Click on the &#8220;Select Files&#8221; button in the middle of the box, which then brings up a browsing box that lets you find the file to upload. \u00a0Then the file is added to your Library and you can use it once or many times.<\/li>\n<li><strong>Add something<\/strong> that is already in your library (Select &#8220;Media Library&#8221; on the tab)<\/li>\n<li>\u00a0<strong>Link via URL\u00a0<\/strong> reference to a photo already on the web. \u00a0<em>Be careful with Wikimedia URLs<\/em>, by the way. Click through to the final image before copying the URL.<\/li>\n<\/ol>\n<p hidden=\"\">Exercise 2.2<br \/>\nhttps:\/\/www.youtube.com\/watch?v=c2e1gp1IjtA<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This exercise walks you through the way we\u00a0 optimize the size and resolution of existing images.\u00a0 We&#8217;ll download\u00a0 a public domain photo from the Library of Congress,\u00a0 open it, and then: Reduce the size Adjust contrast and brightness levels Save &hellip; <a href=\"https:\/\/revolutionsincommunication.com\/viscomm\/optimize\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/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-488","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/revolutionsincommunication.com\/viscomm\/wp-json\/wp\/v2\/pages\/488","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=488"}],"version-history":[{"count":5,"href":"https:\/\/revolutionsincommunication.com\/viscomm\/wp-json\/wp\/v2\/pages\/488\/revisions"}],"predecessor-version":[{"id":4152,"href":"https:\/\/revolutionsincommunication.com\/viscomm\/wp-json\/wp\/v2\/pages\/488\/revisions\/4152"}],"wp:attachment":[{"href":"https:\/\/revolutionsincommunication.com\/viscomm\/wp-json\/wp\/v2\/media?parent=488"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}