Find out why you should take advantage and how to empower your content
Eye-catchy images transmit so much feeling and show a story that can be difficult to tell regardless of how many words you use. They demonstrate the excellence of your items or pass on your cheerful disposition from an occasion.
Well-picked pictures are the best approach to pass on a considerably more grounded message to your viewers from your page.
We will show you the easiest tips to how you can make your page truly sparkle using pictures.
1. Visual Impact
We’ll begin with the most essential tip:
Start the design with a “wow” effect picture. From the first visual-interaction, your image must do a good impression.
Your page visitors will want to see more.
2. Content Readability
Break your content in short, easy to read sections. Using images along with textual content has been proven to boost the visitor’s interaction.
Right side image position. Known fact, most visitors “scan” the page content for images or visually enhanced call to action content.
Banners, buttons, call to action are usually integrated naturally into main content.
For best exposure we recommend the right side of the text-based content.
3. What type of images should you use.
First of all learn the difference between graphic elements which are used for visual aspect and images to empower section’s content
You should know how to use different type of images in order to boost interaction or simply to look good.
– Animated Banners – best use with call to action
– Non animated images – used as background or empowering the context
4. Optimized images – always mobile users first.
If the platform allows, try and use high quality images optimized for fast page upload and mobile responsiveness
How to optimize images and how to use markup language in order to make them responsive?
Everything starts from the your pc/laptop or mobile device.
Choose the right type of image for your project.
Size does matter. Our recommendation is as follows
– use high resolution images for big headers.
We want to achieve the “wow” effect and make the visitor interested from the first 3 seconds from their arrival on your page
– smaller graphics can be used successfully and effortlessly without slowing down the page load
The common mistake among our collaborators is misinterpreting the term of high resolution term with image size (defined by width and height of the picture).
High resolution is defined by DPI (dots per inch) – higher the better.
72 DPI has a good clarity, 300 DPI has a very better clarity (no blurred pixels in most cases)
The dimensions (size in our case) defined by width and height of the picture is not defining the resolution
5. Suggested image types
For top main image always use the best images with high clarity and bigger in size.
In our templates we use 1000 pixels width per 500 pixels height.
Percentage values are added to the image in order to make it shrink or expand (resize) based on viewer browser size.
We use inline style to make the image responsive or additional class for templates who support additional style sheet
Based on design needs the image type (extension) can be JPEG (used for best clarity).
JPEG image type don’t support transparency (transparent portions inside the image).
PNG – depending on the size this type of image is used for its property to allow transparency
GIF – animated or static. GIF images support transparency and mate sections.
Our suggestion is to take advantage of GIF animated images to spice-up your project only when necessary.
As you may already know, some browser extensions like AdBlocker might block animated graphics detecting them as advertising banners.
6. How to optimize the page load
Background images. If the design is flexible and doesn’t require huge images, don’t use them.
Instead of using a 4000×2000 pixels image as a background to a 300 pixels width box element try the smart version.
Use a smaller image and set it as background using the repeat css attribute
background-repeat:repeat | repeat-x | repeat-y
If required, for bigger elements like main background image, you should bigger images with high clarity and good resolution
7. Using css attributes to style-up images
Most common css attributes which can be used to display/render background images
- background-size
- 100% – width fluid value
- cover – stretched to covers all the element
- auto – respects the image original size
- background-repeat
- repeat-x – background image is repeated on horizontal direction only
- repeat-y – background image is repeated on vertical direction only
- repeat – background image is repeated on both directions horizontally and vertically (pattern)
- no-repeat – background image is not repeating itself
- background-position
- 0 0 – background image is rendered by the browser as default state from left 0 top 0
- 14px 33px – background image is rendered by the browser away from left margin with 14px and away from top with 33px
- top – background image is rendered and positioned at the very top of the element
- bottom – background image is rendered and positioned at the very bottom of the element
- center – background image is rendered and positioned on the center of the element
- left – background image is rendered and positioned at the left margin of the element
- right – background image is rendered and positioned at the left margin of the element
- background-attachment
- scroll – background image scrolls with the main view, but stays fixed inside the local view
- fixed – background image is moving around the element rendering as a static
- local – pretty much similar with scroll
Other combinations can be used for background-position
background-position: right 45px bottom 20px;
background-position: top 10% right 7%;
Other combinations can be used for background-size
background-size: 900px auto;
background-size: 100% auto;
background-size: 400px 120px;
Other combinations can be used for background-repeat with multiple images
background-position: 0 0, 0 300px, 0 bottom;
Using 3 images. The priority of the CSS is to render first image on top of the others positioned 0 left and 0 top. Second image is positioned 0 left and away with 300px from the top margin.
Third image is positioned at the very bottom of the element and 0 left.
If the background images are overlapping one above the other the visibility order is from left to right on attributes.
For example, image-1 with 0 0 position is rendered on top of the image-2 positioned 0 300px.
Third image is below image-1 and image-2 and positioned at the very bottom of the element from the left corner – 0 bottom.
It might look complex but it is not
Note: this article is related to our activity and reflects the development process in our works. Some methods or techniques might seem incomplete.
We’ve posted only what is relevant for you to know in order to make the editing process easier for you and not the full “Image in online Environment – eBook”
Recommended resources provided by Camgirl Live Editor:
Feel free to post your thoughts, ideas, suggestions on support forum