How to figure out right sizing of image on website?

6 methods:

  1. Finds the slot, quick, but is not exactly accurate unless your mouse is 100% on the right pixel
  2. Works only if the element is selectable
  3. Find the approx slot size
  4. Finds the original image dimension, not the slot dimension
  5. Uses MS paint. Good idea, if you dont have greenshot installed and don’t know how to use dev tools.
  6. Other – full width slider is usually always 1920px width. Then use method 1 to find the height.

 

1.  Not exact, but gets the job done

  • Download program called greenshot at http://ninite.com/
  • Do the “capture region” option
  • Select the image box. The #s will tell you the sizing

2. Exact. Great if element is selectable

If it is an img element, just do inspect element on chrome. Put the mouse over the image, it will show you the correct dimensions.

3.  Find the approx slot by using inspect element. Highlight the element which will contain the image to get the slot size

4. Exact, if image is not selectable. This gets original image size, NOT the slot size

  • Right click, Inspect Element
  • Click on the Network tab

  • Sort by type. Images are either JPG, PNG most of the time (or wepb)
  • Try to find the image

  • You may find the image through preview. But if image file is too big , i wont’ show

In that case, just right click open in new tab

Save file as

Right click, property, details

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>