ThemeKit Image Hero 50

ThemeKit Images

by EverWeb Widgets

Professional Class Widgets
Better by Design and Construction

Image Insert

Responsive Website Images

Images make up a large percentage of a website's content so they need to correctly sized and optimised and inserted properly in responsive pages.
Image Prep
All the images used in a website should be resized before importing into EverWeb. There is no point in using an image with a 2000px width and a huge file file size if it going to be displayed at 800px wide on the page.
* Oversized images are the main reason why web pages don't download fast enough. *
To reduce the size of an image file …

  • Double click the file to launch it in Preview.app
  • Click on the "Tools" dropdown and choose "Adjust Size …"
  • Make sure that the unit selector is set to "pixels"
  • Enter the new width or height and close the Preview window

Optimising Images

Running JPEG images through an optimiser process will reduce their file size by up to 25%. PNG savings can be over 50%.
Follow the link below to get a copy of a good freeware app for optimising images - fast and easy.
To find out the benefits of resizing and optimising and using a well designed widget test a page before and after to find out its Google's Page Insights score.

Inserting Images

Images should be inserted using a widget that allows the file to be inserted in at least two sizes for computer and mobile.
Lazy loading should be used if the image is not in the viewport on page load.
Avoid using images inserted in the background of an item since it cannot have alt text for the search engines and screen readers.
The hero image is the mainstay of modern web design - particularly on the home page.
Hero image insert essentials …

  • Resize and optimise the images
  • Insert the image in three sizes for computer, tablet and phone portrait
  • Keep the size of the large image under 200KB
  • Sacrifice quality for fast download speed

Retina Images

Don't be tempted to use retina @2x images. The increased quality for some visitors using retina devices is not worth the sacrifice in download speed.
Phone Images
The phone version of an image can look a little lack lustre. Open it in preview, open the "Adjust Color" window and increase th value ofe Saturation and Sharpness sliders a little.
Then it will look just as good as a download speed sucking retina @2x image.

Menu