Pixel Lava Interactive
  • Home
  • Websites
    • New Websites
    • Website Redesigns
    • Website Portfolio
    • Website Tune Ups
    • Website Updates
    • Zoom
  • Graphic Design
    • Logo design and brand identity
    • Business Cards
    • Postcards, flyers, ads and more
    • Illustration & Infographics
  • Marketing
    • Seasonal Website Promos
    • Video Holiday Cards​
    • Video & Motion Graphics
  • Training
    • Online Event Hosting
    • Web Lab Kits
    • Webinars
    • 1-to-1 Trainings
    • Weebly Training
    • Digital Summer Camp
    • Training FAQs
  • About
    • Blog
    • Client List
    • Good Vibes
    • Review Me
    • Recommendations
    • Partner Program  🔸
      • Partner Portal
    • Adventure Indoor Fitness
    • Pixel Lava Unplugged
    • Art Barn Shop
    • Happy Holidays
    • Happy Halloween
    • Remembering Bob
    • Remembering Mary
    • Sample Store
  • Contact
    • Download page
    • Support
    • Make a Payment

Field Notes Blog

News and thoughts on UI/UX, web design, and more.

Digital Summer Camp 04: Resizing Images

8/1/2018

1 Comment

 
Digital Summer Camp #04
Resizing images is an important part of making your website load fast and look great, not to mention ensuring high quality results in printing. But changing the size of an image is only one part of the story, your photos may also have to fit into a particular spot or match the shape or dimensions of existing images. This episode covers three ways of sizing images and will help you avoid some common pitfalls like scrunched photos and cut off edges. Here are my top three approaches to image sizing, in order of how much I use them.

Click the [ ] icon to see a larger version of the video.
Method A: Resize the image to fit the width of the space.
If the shape doesn’t matter you can just resize an image to the dimensions you need. Using an image editor like Photoshop, Paint or free online editors like Pixlr, go to the image size tool and type in the width that your image should be. Be sure to always keep the scale, or aspect ratio, the same so you don’t end up with a scrunched or flattened image. This is a good approach when the shape of the image doesn’t matter that much, like when a photo is placed into a layout and text will wrap around it.
 
Method B: Resize the image to fit the size of the spot.
Using an image editor like Photoshop, Paint or free online editors like Pixlr, open the screenshot you created when you measured the space earlier. This will serve as your canvas.
Create a new layer above the screenshot.
Copy and paste your image into the new layer.
Use the move and resizing tools to resize your image and position it so it looks good.
When finished, flatten the image and save it out to the right format for where it will appear.
 
Method C: Resize the image from within the layout.
In many website editors, you can click and drag images to resize them. This changes only the dimensions, not the file size, so use this only for fine adjustments and always to make images smaller, not larger.
In page layout programs like Word, InDesign and Illustrator, you can click and drag to resize images too but again, be sure not to resize them up. This is great for fine adjustments and in many of these you can do a little fine cropping too.
 
For instructions and best practices, see my website. Link in the bio . That's it for this week’s Digital Summer Camp. Tag a small business owner you know to help them with online marketing! ​

​Best Practices:
Crop first. How you crop a photo can dramatically change what the image communicates. Cropping an image so that the subject is front and center puts all of the visual focus on the subject. Cropping an image so that the subject is to the side can add emotion and tell a larger story.
 
Start big. Begin with the largest file possible and resize the image down (unless it’s a vector file). Pixels are finite so when you make them larger, the individual dots get larger too. This leads to jagged lines and blurriness.
 
Maintain aspect ratio. To avoid scrunched or stretched images, be sure to resize them proportionately. When resizing be sure to select the option (if needed) to maintain the aspect ratio. In many programs like Photoshop you can hold the Shift key while manually clicking and dragging to keep the aspect ratio in check.
 
Downsize before uploading. To get your online image file size down for fast loading, resize the images before you upload them. A typical smartphone photo can be 4000 pixels wide and 8 mbs but a blog image only needs to be 600 pixels wide and 800k. The difference between downloading 8 mbs and 800k is a lot of time, especially on mobile and especially when you have multiple images on a page.
That's it for this week’s Digital Summer Camp. To get a FREE, frosty new episode delivered straight to your In Box next week, join my mailing list.
1 Comment
Amber
8/1/2018 09:25:18 am

Another great tutorial Ame! Woot!! Thank you : )

Reply

Your comment will be posted after it is approved.


Leave a Reply.

    Blog

    Ame Stanko, San Diego Web Designer

    About the author

    As the owner of Pixel Lava Interactive I've helped hundreds of small businesses and nonprofits with websites, graphic design and more. I hope you'll find this blog full of useful information.
    ~ Ame Stanko
    Mailing List Sign Up
    Subscribe

    RSS Feed

    Categories

    All
    Announcements
    Community
    Digital Summer Camp
    DIY
    DIY Marketing
    Email Marketing
    Featured Projects
    For Nonprofits
    Fun Stuff
    Happy Holidays
    How Tos
    HTML Is Not So Scary
    Industry Musings
    Interwebs 101
    LGBT Business
    Marketing Ideas
    Monday Motivation
    New Products
    Newsletters
    Nonprofit Marketing
    Online Marketing
    Partner Program
    Pixel Lava Unplugged
    Product Updates
    Promo Ideas
    Reviews
    Scam Alerts
    Small Business Inspiration
    Small Business Marketing
    Social Media Marketing
    Tips & Tricks
    Training
    UI/UX
    Webinars
    Web Labs
    Website Workshops

    Archives

    June 2021
    September 2020
    August 2020
    December 2019
    March 2019
    December 2018
    November 2018
    October 2018
    September 2018
    August 2018
    July 2018
    June 2018
    May 2018
    April 2018
    March 2018
    February 2018
    January 2018
    December 2017
    November 2017
    October 2017
    September 2017
    August 2017
    June 2017
    May 2017
    January 2017
    December 2016
    November 2016
    August 2016
    June 2016
    April 2016
    March 2016
    February 2016
    January 2016
    December 2015
    November 2015
    June 2015
    May 2015
    April 2015
    March 2015
    February 2015
    January 2015
    December 2014
    October 2014
    April 2014
    January 2014
    December 2013
    November 2013
    October 2013
    July 2013
    January 2013
    December 2012
    September 2012
    April 2012
    March 2012
    February 2012
    January 2012
    December 2011
    October 2011
    February 2011
    December 2010
    October 2010
    December 2009
    October 2009
    February 2009
    December 2008
    December 2007
    December 2006
    December 2005

Home  |  Websites  |  Graphic Design  |  Marketing  |  Training  |  About  |  Shop  |  Contact

©2005-2019 Pixel Lava Interactive. All rights reserved. 🚀

  • Home
  • Websites
    • New Websites
    • Website Redesigns
    • Website Portfolio
    • Website Tune Ups
    • Website Updates
    • Zoom
  • Graphic Design
    • Logo design and brand identity
    • Business Cards
    • Postcards, flyers, ads and more
    • Illustration & Infographics
  • Marketing
    • Seasonal Website Promos
    • Video Holiday Cards​
    • Video & Motion Graphics
  • Training
    • Online Event Hosting
    • Web Lab Kits
    • Webinars
    • 1-to-1 Trainings
    • Weebly Training
    • Digital Summer Camp
    • Training FAQs
  • About
    • Blog
    • Client List
    • Good Vibes
    • Review Me
    • Recommendations
    • Partner Program  🔸
      • Partner Portal
    • Adventure Indoor Fitness
    • Pixel Lava Unplugged
    • Art Barn Shop
    • Happy Holidays
    • Happy Halloween
    • Remembering Bob
    • Remembering Mary
    • Sample Store
  • Contact
    • Download page
    • Support
    • Make a Payment