Button effort #1.png
4MB, 1739x2304 pixels = this image file is far too large.  Below, you will see smaller versions of the same image, in different sizes…

4MB, 1739x2304 pixels = this image file is far too large. Below, you will see smaller versions of the same image, in different sizes…

Unlike a printed image, a digital image has no inherent resolution, and image resolution has nothing to do with how an image appears on a screen.  The main thing to remember with image resolution, is that it is like ‘weight’ – higher resolution images ‘weigh’ more, taking longer to up/download and using more resources.  An interesting factoid – the original printing standard of 72 dpi was established by Mac, and their printers printed out images that were identical to what was ‘built’ on the screen.  As different manufacturers came along and technology improved, that no longer applied for most users, and now, it’s just a good example of how these things change, and how the industry leaders call the shots…

896KB - 500x662 pixels (PNG)

896KB - 500x662 pixels (PNG)

I am only addressing the issue of print images/ads, at this point, because who knew there was so much to know?!! Something else that we should consider is that, depending on the platform, 50-70% of users are now running at least one type of ad-blocking software, meaning that the ‘fancy’ ads, such as flash or video ads, may not be seen.  Currently, our ads are just images, either hyperlinked or set to expand in a lightbox screen, and they are indistinguishable from images that are tied to the articles.  We are able to install a plugin for video ads, but with your permission,  I would like to hold off on that option until everything else has settled a bit.

 

The main factors to consider in sizing an image are:

  1. operating systems (mobile/Mac/Windows/etc.)

  2. browser compatibility  (Top 3 browsers: Chrome/66%, Safari/17%, Firefox/6%)

  3. Screen Resolution

  4. Screen size

223kb, 500x662 pixels

223kb, 500x662 pixels

You understand the first two, so I will focus on #3 & #4, and on the images themselves.

This is all spelled out, because I had to take notes to figure it out myself, and putting it into this format helps me to understand the ‘why’ of it all.  If you prefer to just jump to the numbers, scroll down....  please make sure, however, to check out the images and their captions, which spell out the sizes and ‘weight’ of each of the images. For convenience, I have placed them all as the same size, and following one another, largest to smallest size/weight.

As you saw earlier, I am able to stretch/shrink any image on either site, and I am able to resize DOWN any image (it currently is impossible to really increase resolution on images, so poor quality images can be improved, but only in a minor way, through image editing programs).

At any rate, to skip my ‘learnin’, go down to:

“Now, for the numbers... Now for the numbers…”

 

151KB, 226x300 pixels (PNG)

151KB, 226x300 pixels (PNG)

Screen resolution is how many pixels a given screen displays horizontally and vertically.  Pixel dimensions, (the width and height of an image in pixels) are all a screen cares about. ... In order for the UI (User Interface) and images to be readable and clear, they must be an appropriate physical size, including their weight.  PPI is the size, and the image resolution is the ‘weight’. Every screen has a certain number of pixels from left to right, and from top to bottom.  Screen resolution is measured in pixels per inch, or PPI, which is how many pixels are in a 1inch line on a display screen.  Pixels do NOT have a uniform size, so the PPI value, calculated by dividing the length of the diagonal in pixels by the length of the diagonal in inches, becomes the measurement standard.  A screen which is 1280 pixels wide has a maximum of 1280 different color dots that can be shown (widthwise). A 1280 pixel screen/21 inch screen (1280 divided by 21) means that approximately 61 color dots fit in one inch of the screen, or, 61 PPI.

 

31.2KB, 226x300 pixels

31.2KB, 226x300 pixels

When computers became popular, they were pretty basic, and when the internet first came along, web development was, too; websites were designed only for desktop computers, which had a standard screen resolution of 800x600 pixels.  This is why 'old' websites are no longer compatible; they were designed around one specific screen size, and the position and size of all the UI components (words, images, buttons, etc.) were hard-coded (think nailed to the wall, rather than hung with a tack, so they could ‘move’ when they needed, for a different size wall).  Once new (larger AND smaller) screens came into the picture, the hard-coded sites can only stretch or shrink; new sites allow text to shift, and images to stretch or shrink, while allowing for the intended order of the site, and keeping relative sizes the same, regardless of the size of screen being used.

 

When smaller screens (phones) came on the scene, they, too, were easy to design for - The original iPhone screen was 3.5 inches in diagonal screen size and had 320x480 pixels, with a PPI of 163. However, as technology improved, the next generation of  screens came out — with smaller size pixels — and just like with computers, screens now had the ability to show higher quality content, but it was not available;  Apple’s Retina screen has a minimum PPI of 326, double the original PPI of 163.

As you can see, display size and screen size have very little to do with the PPI measurement, and the number of pixels available are calculated by increasing the screen size by the appropriate multiplier factor (see below), which is currently a factor of two or three (this will eventually change).

As you can see, display size and screen size have very little to do with the PPI measurement, and the number of pixels available are calculated by increasing the screen size by the appropriate multiplier factor (see below), which is currently a factor of two or three (this will eventually change).

 

If you designed a website (or any image for that matter) to display on the iPhone 3, your maximum image width only needed to be 320 pixels (full width of the screen). On the new screens an image 320 wide will only be half width of the screen, and if it stretches, it becomes ‘jaggy’, or pixellated. That’s not good for images, and it’s especially bad for a UI such as a link or button, which would become too small to be usable.

So, Apple borrowed the term ‘Points’ from the world of printing, and taking 163 PPI (original iPhone PPI) as their benchmark, they assigned all future screens a multiplier ratio, so the photos/graphics took up the same physical space regardless of the screen density.  Points are related to the physical size of the image, and a better descriptor than pixels – Industry standards are leaning towards points, rather than pixels, although pixels are still used.  One pixel = 0.75 points/1 point = 1.33333333 pixels.

To the right, the red box represents the original iPhone pixel.  In the next box, the blue line is the size of the Apple Point (pt), and Android devices call this the Density Independent Pixel (dp). As long you apply the correct multiplier factor, the pt/dp remains the same physical size. So, the pixels and resolution increase, but the footprint remains the same.

The most common screen sizes to date, and the percentage of users for each screen.

The most common screen sizes to date, and the percentage of users for each screen.

Screen size is also an important factor to consider, there are literally hundreds of different screen sizes and resolutions, and Apple/Android devices both have their own requirements with a huge selection of different devices.  Different size screens can have the same screen resolution, same size screens can have different resolutions, and a screen with more pixels produces a sharper image.  However, the higher resolution also means that elements on the screen - like icons and text - will look smaller.  To a certain extent, this concern is eliminated by the ability to 'stretch'/resize the image on the screen (touchscreens, etc.).  Currently, screen widths vary from 750 pixels to 4,000 pixels (standard laptops are 1,500-2,500 pixels wide.)

The latest internet data shows that internet users increase at a rate of more than 11 new users per second, roughly one million new users each day.  It’s possible that some of this number is a result of more up-to-date reporting of user numbers, but most is simply growth.  As of December 2018, there are 4.1 billion Internet users in the world, up .4 billion from the end of 2017.  Since 2017, mobile devices (phones and tablets) have held at least 50% of the market, and most recent stats place them at 52% - if trends continue, estimates place mobile device usage at 72% by 2025. 

I did not make this link live - it is 300x201px

I did not make this link live - it is 300x201px

The reason I spelled this all out is because all of it is a factor.  Even if technology were not changing by the minute, there is no one ‘ideal’ size for images, and the best bet is to try and hit the highest ranking devices, platforms and browsers, all at the same time. Both SS and WP automatically resize every uploaded image and retain versions in 7 sizes ranging from 100 to 2500 pixels wide, to accommodate the large variance in UI/screens, and allowing the ‘ideal’ image to appear on most devices.  The website programs (SS/WP) read the ‘user’/analyze the tech involved, and do their best to automatically optimize the experience for each one, but not all images will interact smoothly on all platforms/devices.  It is strongly recommended that we ask our users to let us know if they are experiencing problems and/or include a disclaimer if we ‘know’ our site is not compatible/optimized on a specific device.

Images, of course, come in all sorts of different sizes, and using a larger image than what is needed does not improve the resulting image quality, but does slow things down.  Fortunately, there are ways to resize images, reducing PPI/resolution with little to no impact on image quality – on both the Squarespace and Wordpress sites, I am able to drag/size images.  If you note the sizes in the captions below the images, you will see how the highest (top) image resolution makes no real difference, but by reducing the PPI, the resolution drops, so your website is carrying the equivalent of a poster of the original handwoven wall tapestry – in real life (printed out), you could tell a difference, but on a screen, not so much.

Wordpress allows for uploaded images to be maximum 256 MB, and Squarespace for 20 MB, but there is no need to go anywhere near even the 20 MB, on most images.  Each megabyte is 1024 kilobytes, because computers are based on the binary system, and ideally, for both sites, large high quality images should be kept between 60K and 100K. Smaller images should be closer to 30K and lower.  Again, for the most part, I am able to easily resize images before uploading, so even if someone sends something huge, it can be adapted before being added.

The ideal large WP size is 1920x1200 pixels, and SS recommends using images that are 1500-2500 pixels wide.  Here is a list of ‘recommended’ ad sizes, on the left, and on the right gives an idea of what each type of ad looks like - according to Google (as you recall, they own something like 97% of the market for ‘our’ users), the numbers 1-5 are the most effective ad sizes. Clearly, what we call a banner, and what the industry considers a banner are two different things, since our banner is their leaderboard, and our rectangular/page ad is what they call a half page banner - I would really prefer not to get caught up with all that…

 

digital display ad sizes.jpg

1.      Leaderboard (728 x 90 pixels)

2.      Large Rectangle (336 x 280)

3.      Half Page Banner (300 x 600)

4.      Medium Banner (300 x 250)

5.      Large Mobile Banner (320 x 100)

6.      Full Banner (468 x 60)

7.      Half Banner (234 x 60)

8.      Vertical Banner (120 x 240)

9.      Wide Skyscraper (160 x 600)

10.   Skyscraper (120 x 90)

11.   Button 1 (120 x 90)

12.   Button 2 (120 x 60)

13.   Microbar (88 x 21)

14.   Square Button (125 x 125)

15.   Vertical Rectangle (200 x 400)

16.   Rectangle (180 x 150)

17.   3:1 Rectangle (300 x 100)

18.   Square Pop Up (250 x 250)


 Now, for the numbers... Now, for the numbers... Now, for the numbers... Now, for the numbers...


So, I would say:

A question for you: It is not necessary to do so, but are we going to lock them into a specific shape? We can do rectangles (tall or wide), squares from thumbnail all the way up to full screen, and (what we call) banners, all of them sized to whatever placement is desired, assuming high enough quality to start with. As you can see in the image and list just above, there are 18 ‘standard’ ad size/shapes currently. It may be preferable to give the advertiser a minimum quality requirement, and a ‘Small’, ‘Medium’, ‘Large’ and ‘banner’ option. Calling out sizes, the way we do for the magazine, is pointless, because every screen will simply display the ad in the best format for the screen size and resolution, and we cannot account for that.

The largest images (ads) could be between 1,500-2,500 pixels wide, and, ideally, a max resolution of 100kb (we can always ‘shrink’ them) - smaller ads can be as small as 30 kb, and only a few hundred pixels wide. Fewer pixels (as you can see from the images above) work just fine, especially for smaller placements.

So, there you have it - a whole bunch of words, and still not a firm recommendation. If you want ‘set’ sizes, let me know the shapes you want to offer, and I will get you the numbers (which also can be pulled from the pink box image, above). Otherwise, my recommendation, based on current technology considerations, is that we give them options for: 1) full-screen width/Large, 2) half-screen width/Medium, 3) quarter or third-screen width Small, and 4) Banner.

Of course, pricing would then need to encompass issues such as length of ad, number of times placed, and possibly location, depending on whether they wanted homepage, blog or article placement. At this point, we are (if I am not mistaken) switching out homepage ads on a schedule, but blog and article placements will be more permanent. Clearly, whether or not I am mistaken, this policy is changeable, and although it will take time, it is definitely possible to remove ads from articles and blog postings. It would just be a matter of setting a schedule, and then going through and removing the images/ads in question.

Joy