Pixel Lava Interactive
  • Home
  • Websites
    • New Websites
    • Website Redesigns
    • Website Portfolio
    • Website Tune Ups
    • Website Updates  🔸
      • Easy Online Payments
  • Marketing
    • Virtual Tours
    • Video & Motion Graphics
    • Logo design and brand identity
    • Business Cards
    • Postcards, flyers, ads and more
    • Illustration & Infographics
  • Training
    • Weebly Training
    • Digital Summer Camp
  • About
    • Blog
    • Client List
    • Good Vibes
    • Review Me
    • Recommendations
    • Adventure Indoor Fitness
    • Remembering Mary
  • Mondo Bop
  • Contact
    • Support

Field Notes Blog

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

Digital Summer Camp 03: 3 Ways to Measure Images

7/25/2018

0 Comments

 
How to measure online images
Say you want to add a photo to your blog as a thumbnail graphic. You snap a cool photo, pop it in and WHOA, it’s gigantic. Plus, it’s taking forever to load. Wouldn’t it be great to know how big to make the photo in the first place? In this 1 minute episode,  I'll show you three easy ways to determine how large an image should be and give you some handy image size examples. 

A post shared by Ame Stanko (@pixellava) on Jul 24, 2018 at 8:39pm PDT

​There are three easy ways to determine how large an image should be:
  1. Use a previous image as a template.
  2. Measure it in pixels.
  3. Look up the size in an app or online source. 

Method 1: Using a previous image

Simply grab an image of the same size, save it to your computer and then open it in an image editor to use it as a blank canvas to size your new image. In Chrome you can click and drag an image right to your desktop. In other browsers you can right click on the image and select "Save Image As ...". 

Method 2: Measure

​Both Macs and PCs have a built-in way to measure the screen and capture screenshots, both of which are handy in getting pixel dimensions.
 
On a Mac:
  1. Simultaneously press the Command Key, Shift Key, and 4 key. You’ll see the cursor change from the usual black arrow to a crosshair.
  2. Position it over the area the top left corner where you want your image to display.
  3. Click and drag to the lower right corner. You’ll see some numbers by the crosshair – these are the dimensions in pixels of the area!
  4. If you let the cursor go you’ll get a screenshot of the selection which you can use as a template for sizing your new image (if you have your sound on you’ll even hear a camera shutter sound telling you that you just took a screenshot).
For more info see: https://support.apple.com/en-us/ht201361
​On a PC:
  1. Go to Start | and find the Snipping Tool.
  2. Chose Rectangular Snip.
  3. Click and drag to select the area you want to measure and capture.
  4. Click Save Snip.
  5. You can then open it in an image editor to view the pixel dimensions. 
For step-by-step instructions, go to: https://support.microsoft.com/en-us/help/13776/windows-use-snipping-tool-to-capture-screenshots

Method 3: Look up

​There are many websites that provide current lists of the dimensions of various social media graphics. Simply do a search on “social media image sizes [year]”. I have found this one by Rebekah Radice to be very useful: https://rebekahradice.com/social-media-image-sizes/ .
There are also lots of image editing apps with default canvases sized to fit social media. On my iPhone I use (and really love) Over.
Sample Sizes in pixels
Sizes vary a lot or we wouldn’t need to talk about sizing! But here are some examples:
Full screen width: 2500 px (the large “hero” images that span from one side of the monitor to the other)
Full page width: 1000 px (hero images that span from one side of the page to the other. A good standard for website page width is 1000 pixels)
Blog image nested with text: 500 px
Blog thumbnail image: 300 px
 
A BIG Caveat
Websites have to look good everywhere from tiny phones to giant monitors. When you look at your site on different devices you can see how it resizes and changes – especially the images. This is called responsive design and it’s a technique that uses both design and technology. When resizing images, be aware that you may need some trial and error to get the best combination of file size and dimensions – especially when working with large images that fill the entire width of the screen.
 
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.
0 Comments

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
    Bop Squad
    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
    Mondo Bop
    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

    November 2023
    February 2023
    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  🔸
      • Easy Online Payments
  • Marketing
    • Virtual Tours
    • Video & Motion Graphics
    • Logo design and brand identity
    • Business Cards
    • Postcards, flyers, ads and more
    • Illustration & Infographics
  • Training
    • Weebly Training
    • Digital Summer Camp
  • About
    • Blog
    • Client List
    • Good Vibes
    • Review Me
    • Recommendations
    • Adventure Indoor Fitness
    • Remembering Mary
  • Mondo Bop
  • Contact
    • Support