ThemeKit Images
by EverWeb WidgetsProfessional Class Widgets
Better by Design and Construction
Professional Class Widgets
Better by Design and Construction
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 …
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.
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 …
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