EverWeb Widgets HTML5

Optimize & Insert Images

Website Images

Web pages need to download in less than three seconds on broadband connection - particularly if it is the home page. The main cause of slow download speeds is the use of too many image files that are larger than necessary.
Inserting images into a web page requires a compromise between image quality and file size. The larger the file size, the greater the quality and the slower the page download speed in the browser.
For normal (non retina) screens, the images should be optimized to the actual size that they will appear on the webpage before importing into EverWeb. The maximum number of images per page should be about 12 and this includes the images in any slideshow.
EverWeb uses shape images to create shapes and shadows. Shape images should be avoided and never used on the mobile version of a website. Use widgets to create shapes based on HTML and CSS.

Retina @2x Images and more...

Creating retina @2x images is not as simple as it sounds. It’s not just a case of adding an alternative version of the image at twice the resolution - even if the original 1x is at the optimum size. If the original image has not been correctly optimized, adding a 2x version is going to badly compromise the page download speed in the browser.
Take the example of an image that is 800px wide by 600px high.
The image originates from a camera at 2400 x 1800
The image is reduced to 800 x 600 and imported into EverWeb.
When the image is inserted into a web page which is 1054px wide, it will be 800px wide and the image is shown at 1x.
If the same page is loaded onto an iPad in portrait mode, the 1054px page will be squashed down in size to fit a screen width of 768px so the resolution of the image will be increased by about 50% or 1.5x.
Although this resolution is too high for a non retina iPad, and not high enough for the retina version, it is a reasonable compromise between image quality and file size (download speed).
The situation becomes even more complicated on the iPhone.
The 800px wide image is far too large for the 320px wide non retina iPhone screen, is adequate for the retina screen of the iPhone 6 and too small for the iPhone 6 Plus.
Get and illustrated guide to all this iPhone stuff.

Practical Solution

The most sensible approach for most of us if the "suck and see" method. Insert the image into a test page, publish it to a local folder and then launch it in the iOS Simulator.
View the page on every device type and then decide whether the image resolution needs to be increased/decreased.
Every image is different and the amount of detail required varies depending on the the image subject. An the image that is required to show every crack and crevice on a rock face in Yosemite obviously needs to be inserted at a much higher quality than a screenshot in a "how to" article.
Use common sense and the old adage - if it looks right, it is right.

Insert Images

On the assumption that an image is relevant to the rest of the web page content, there’s no point in dragging it onto the design canvas. An image inserted like this is invisible to the search engines - even it if does have the convenience of allowing the addition of an @2x version.
At the very least, an image should be inserted using the <img> tag - whether it be by code injection or using a widget. Using an HTML5 <figure> element is far better in terms of SEO and the way in which the image is presented to the human visitors.

Retina@2x

Anyone who is still under the illusion that they are being “cutting edge” by inserting an @2x version of each image should use the jQuery Retina plugin.
Those who are actually "cutting edge" will be using SRCset to insert 1x, 2x and 3x versions of each image.
The rest of us, who need to push out web pages into the real world, will use our common sense and experience to choose the resolution for each image based on its content and the number of other images on the page or in a slideshow.