Now that the important browsers support loading="lazy" for images, does that now redefine best practices about page length and total number of images?
Is it now OK to make long HTML pages with 20 or more images on one page? If not 20 what about 10?
You can use a color image placeholder. Instead of using a fixed color for the image placeholder, you can find the dominant color from the original image and use that as a placeholder. This technique has been used for quite some time by Google in its image search results and by Pinterest in its grid design.
This might look complex to achieve, but you can accomplish this by scaling down the image down to a 1×1 pixel and then scaling it up to the placeholder's size—a very rough approximation but a simple, no-fuss way to get a single dominant color. Using ImageKit, the dominant color placeholder can be obtained using a chained transform in ImageKit, and then you can use any number of images on your page.
Related
I have the following images/slides on the home page of my website;
Home page: https://www.atlasestateagents.co.uk/
Images:
https://www.atlasestateagents.co.uk/img/Liverpool-Slide.png
https://www.atlasestateagents.co.uk/img/Landlord-Slide.png
https://www.atlasestateagents.co.uk/img/Vendor-Slide.png
Having used some online SEO tools I can see they are considerably adding to the page load time which apparently can have a negative affect on SEO performance.
The images have to be large in size as the site uses the Bootstrap framework and scales up/down depending on screen size.
Is there anything I can do to reduce the file size and/or load time?
File Types
The first and simplest thing to consider when optimizing images is file type. Certain image file types are better suited for specific images. For example, JPGs are best suited for photographic images. PNGs, on the other hand, are best suited for simple images with few colors or for images using transparency. 24-bit PNGs are best suited for images containing both photographic elements and simple graphics. 8-bit PNGs can further reduce file size in images with fewer than 256 colors.
Sprites and Preloaders
A helpful practice for reducing load time is the use of CSS sprites, which are CSS codes that display a piece of a larger image. This technique is often employed for mouse-over states on buttons. For example, with a sprite you can display a piece of an image as a button on your site and display a different piece of that image as the button whenever a user mouses over it.
Though sprites are frequently used for interactive menus and buttons, they can also be used to display multiple site images from a single image file. This would require the browser to only download one image instead of, say, three or four.
In addition to sprites, images can be preloaded using JavaScript, jQuery, Ajax, or CSS. When an image is preloaded, the browser downloads or “preloads” the image and then instantly displays it when the user goes to access it. Preloading can greatly decrease load times with image heavy websites, especially sites with photo galleries.
Using CSS Instead of Images
Sometimes the best way to decrease image load time is not to use an image at all. Improvements to CSS have made it possible for the browser to render certain “images” using pure CSS. It is now possible to generate rounded rectangles, gradients, drop shadows, and transparent images using CSS. Be warned, every browser won’t always support these techniques and browser compatibility should be carefully considered before replacing an image with CSS.
Suggesting some good reads on image optimization and reducing load time if using images.
http://www.getsnappy.com/web-optimization/improving-page-load-times.html
http://www.monitis.com/blog/2011/05/29/30-tips-to-optimize-htmlcssimages-for-smooth-web-experience
http://www.practicalecommerce.com/articles/3354-Optimizing-Images-to-Reduce-Load-Times
Do Images Load Faster in HTML or CSS?
I want to use a highly responsive logo text with a custom font. I realised that almost every browser is not supporting SVG fonts, which means that it's not an option: http://caniuse.com/#feat=svg-fonts.
What options are there and what is the right way of solving the problem?
I could add an image with high resolution and scale it down?
Just use Header-tag? But how could you scale it based on the width of the screen?
Is there a vector based option other than SVG?
The fact that your logo is only letters doesn't mean that it has to be letters. In reality, they are just shapes that resemble letters.
Make an svg shape, or a large enough .png and you can scale it as you like.
People don't care if it is pure text, svg, png or jpg, they will read it anyways. And I believe nobody will try to select it or copy-paste it, and if you want it to be readable by screen readers, just add it's texts in the alt attribute.
Hello I have a client who's logo is RP but the 'R' is facing the other way. I have been asked if it is possible to display 'RP' every time it is mentioned on the website to appear the same as her logo, instead of 'RP'.
My initial thoughts this was not possible but I have used font-awesome icons in a similar way in titles, but never using an image. This is an example of what I mean using photoshop.
Image Link: http://imageshack.com/a/img537/4474/guj5uS.jpg
I am very wary using this method at all as it must be made responsive etc and I honestly think it is more hassle than it's worth but maybe I'm missing an easy css trick...
Your help would be much appreciated.
Many Thanks
If you can contact with a graphic designer then the designer can make a svg image for you with "RP". That svg you can easily turn to a font using online font converter if you dont have professional software.
And insert the costum font you have created on your website just like inserting font awesome and/or all other icon fonts.
Is as easy as this ... nothing else that needs to be done, but always if the "RP" is in svg format (if you have a graphic designer at your disposal, or if your client can give you the RP logo in svg format).
The simplest approach is to use an image and scale it with CSS to suitable size. For best quality in scaled size, you would create the image in SVG format (there are online tools for converting other image formats to SVG, though ideally you should use an SVG file created by the artist who designed the logo). If you need to worry about old browsers (IE 8 and older) that do not support SVG, you can perhaps set content negotiation in the server so that its sends SVG to modern browsers that announce SVG support and PNG to others. But using just SVG:
<p style="font-family: Times New Roman">This is example text that
contains the logo
<img src="http://www.cs.tut.fi/~jkorpela/upload/RP.svg"
alt=RP style="height: 0.7em">
as an embedded SVG image. The height of the image is set to
0.7em without setting width. This means that browsers will scale
the image <img src="http://www.cs.tut.fi/~jkorpela/upload/RP.svg"
alt=RP style="height: 0.7em"> so
that is roughly of the same height as uppercase letters
and does not disturb line spacing.</p>
I merged a set of icons into one .png file and use css background-position to show these icons on a page, because img tags make a lot more http requests.
However, I need to show every icon in 2 different sizes: 20x20, 60x60. How can I do this without creating 2 separate .png files (20x400 and 60x1200)?
I am aware of the background-size property to scale the background image, but it is introduced in css3 and IE doesn't support it before 9.0.
Is it possible without using background-size?
The best way to do this is using "font icon technology" - you can read all about this in the web. Also it is helps when you need your markup retina compatible
Since you cannot use background-size for compatibility reasons you could try having both small and large versions of the icons in the same image. How you group them is up to you, but you should do some testing whether the increased size of the image still results in an acceptable load time for your pages.
+1 for icon fonts. You can do some pretty fancy things with them e.g. http://forecastfont.iconvau.lt/
I think that you could use "background:size" property. With it, you can "visually re-scale" background image.
Please look here
See this:
http://real-sense.com/index.php?option=com_content&view=article&id=106
The set of vertical images on the right are being resized using CSS
.thumbnail-product-resize
{
width:144px;
height : auto;
}
Does anyone know how to do this in a cleaner way so I don't lose quality on the image?
I mean that if I had resized the image using photoshop, the text won't appear as blurry as it does here.
Tested in FF
Thanks
The quality of your images will depend on the original size of the image you use. If have a large image with good quality, say of size 400x500, and it is then resized in the HTML to 80x100, it will still be a 400x500 image. However you can only fit a certain number of pixels on a smaller image of 80x100, so this bigger image has to be sampled. This means that an average is taken of pixels and then made to represent a 80x100 size image.
If you want a more definite result you can change to original size of the image to 80x100. This will probably give you better results.
Once upon a time browser image resizing gave truly heinous results due to the unsophisticated nearest neighbor technique they used to scale images. Now they usually perform filtering when scaling and there isn't that much difference between in-browser resizing and resizing in Photoshop.
The real advantage to scaling an image before serving it to the client is that you aren't forcing the download of large images when they aren't necessary. Depending on the size of your images, this can significantly reduce your page load times.
One final thing to consider is that more and more people have devices with "retina" displays. For those users scaling the image before serving it will result in much less crisp images.
Here's an in-depth comparison of the image scaling methods used by various browsers: http://entropymine.com/resamplescope/notes/browsers/
Even if you had done this in photoshop those images you have would still appear pretty much the way do just now.
FYI you don't need to include height:auto in your CSS above.
Best bet would be to create a seperate set of thumbnails (using photoshop) which maybe just show a portion of the image.
Loading the thumbnails and resizing them with css the way you are doing is bad practice as you are still having the user download the large images first.
It is impossible to shrink an image without loosing quality unless it is an vector-image. That would mean that you'd have to use SVG. And considering the images displayed I don't think you wan't to do that.
Also you mentioned the cleaner way to do it, use photoshop or something similar.