Today I’m going to address a question that I get asked a lot by web designers.
“What size does my image need to be?”
Often when editing an existing website there are images that need to be replaced and designers want to make sure the new image is the right size (or aspect ratio) to keep the design intact. I’m going to show you how to use the Chrome Developer Tools to find the size of any object on a web page, but specifically in this example an image.
First you have to open Chrome Developer Tools. You can do this by opening the Chrome menu (three little dots at top right of browser) and selecting “Moor tools” then “Developer tools.” My preferred method of accessing the toolbar is actually just pushing the F12 key on my keyboard because I open and close the developer tools a lot when I am working.
Once you have the Developer Tools open, click the inspector button (top left of developer toolbar) then hover over the element you want to measure.
Keep in mind that responsive elements on a website will change size based on your screen resolution and/or window size. So, if you make your window smaller, you will see the element size change.
If you have you have other questions like this, let me know and I’ll address it in a future post!