I know that there are many devices that uses the favicon from the website in different ways...
On these favicon generator websites you can easy put an image there and the website will do the rest (generating several scaled images for certain devices)
If i want to cover ALL devices (Apple, Android, Windows Metro Tiles, and more) i would have to store 26 images (that are ALL the same picture just with different sizes)
And i would have to add 19 lines of HTML code to refer the certain devices to the certain images.
Is there a way to use just 1 file for all sizes?
I know that an ICO-File can contain multiple dimensions of an image.
I also know that a SVG-File doesn't depend on pixel resolution at all because it's vector based. (So a SVG can support EVERY imaginable size)
I could imagine to implement all sizes of an image to just a ICO or a SVG file where every device can pick it's optimal size.
Is that possible?
Its not exactly possible to serve different sized PNGs' in a single file.
SVG file would be the best hope here but.. Browsers today don't like them
Alternate option would be to use a tool that manages this process automatically.
I had the same frustration as you, so I simply came up with this tool called MakeFavicon
It helps create multiple favicons with predefined sizes and filenames at a desired folder, and also creates config files such as browserconfig.xml,manifest.json, partial view of HEAD to be included with relevant info.
I'm using it as a part of my Visual Studio build process and it works seamlessly to update all these files on every build.
Here's link to its example usage.
Related
When running Chrome Lighthouse I get warning on my images sizes. It says I could adapt image sizes according to the user device. At the moment my images are the largest possible and resized according to any bootstrap grid change ...
It works pretty well but needs the larger file format being downloaded whatever the user device.
I can of course add an image replacement tag in a media query... But my question is: would all the pictures not be loaded instead of a single image ?
I think I have found the solution of adding different CSS files depending of the media size, but this thread Media Queries to load resource? suggests that I would lose responsiveness ...
I am a bit lost in understanding how images or other assets are loaded by the browser in case they belong to the same CSS file ...
Can anyone help me understand why my images are coming out rotated? The images themselves are vertically oriented, but they appear sideways in the web page.
sorry, here is the link
If you're on MacOS or iOS then photos that were taken with incorrect orientation data (because your phone had rotation lock enabled for example) then Finder, Lightroom, Apples Photos app and others can automatically detect this and rotate the photos without changing the original file. But a (non Apple) web server or even Windows, won't recognise these properties out of the box, as these non-destructive edits are stored separately.
If your going to run into this a lot I would recommend installing either a bootstrap compatable extension to batch edit photos server side, or run a batch conversion on your computer or mobile device that "physically" rotates your photos and re-saves the change to the file itself.
This last option is somewhat destructive if you overwrite jpg files as jpg with a compression less than 100% (which is usually the case.)
If you resize photos before uploading to your server anyway the rotation data should already be applied and I advice you to do all edits in one go so the photos only get re-saved once, and not deteriate each time you resave.
One small power tip: you can give very large photos a much higher jpg compression than small photos, but get photos that are, sharper, bigger and with smaller file sizes than if you had prepared a medium downscaled copy that requires a low compression (aka high detail level) setting to still look good. This neat method also makes sure your photo galleries are retina compatable and future proof.
I'm developing an WP8.1 application and now when I'm almost done with it, I tried to run the Windows App Certification Kit to test if everything is ok. I got this error:
I know that this is not a big thing (it should be really easy to fix it) but I would like to make the images to be as great a possible. I have found the default sampled in the Assets folder, but I don't really know how they should look like at the end.
Could someone provide me with some samples (perhaps some samples he used) for the following images:
ApplicationIcon.png
BadgeLogo.png
Logo.png
SplashScreen.png
SquareTile71x71.png
SquareTile150x150.png
StoreLogo.png
WideLogo.png
And the ones in the Tiles folder that is also inside the Assets folder:
FlipCycleTileLarge.png
FlipCycleTileMedium.png
FlipCycleTileSmall.png
IconicTileMediumLarge.png
IconicTileSmall.png
PS
I'll make my own pictures (I can post them later if you would like that) But I would just like to see some examples to know how that should look like.
The image requirements are relatively simple;
There are 7 images that you can specify in the appxmanifest, and can refer to any image within the project (so the exact filenames aren't strictly required, although I would stick with them). Each image can be supplied at three scales, and if you only supply one scale, make it the 240% scale for the best impression on higher resolution devices.
The Square 71x71 Logo, Square 150x150 Logo, Wide 310 x 150 Logo are all used for tile images, when your app is pinned, and would normally contain some kind of logo to represent your app, on a transparent background where it makes sense.
The Square 44x44 Logo is used in the app list, and is generally a scaled version of the tile image, also on a transparent background.
The Store Logo is as used in the store, and again is generally a scaled version of the tile image.
The Badge Logo is used for lockscreen notifications, and only need be specified if your app supports lockscreen notifications. It also must only be white on transparent.
The Splash Screen is shown as your app is loading. Some apps choose to just show a larger version of the logo on a brand colour (e.g. Internet Explorer), others show some form of branding, along with a "loading" type of message.
Microsoft do also publish some guidelines for design, available from the dev centre
I am putting some photos on my website and I do not know which syntax will load them quicker. My photos are usually 4300x3000 or 3000x4300 (which is from 7-10 MB per photo). I am using
#image {
max-height:500px;
max-width:750px;
}
When I viewed my website on a low-end PC, it took a lot of time to load. I do not want to use fixed height and width because I could have photos as big as 2500x2500 and that would cause a mess. What should I do to reduce the load time? Is there something like an “autoresize” that will keep the height to width ratio?
Compression
You should compress the images using some external software (if you are not using any other language apart from HTML and CSS). I would recommend Photoshop or GIMP.
That's the only way to improve the load: reducing the image weight. The forced resize is just loading the same amount of data from the server.
Improving quality of resized images:
If you are interested on improve the quality of the resized images, you can take a look at this article:
http://articles.tutorboy.com/2010/09/13/resize-images-in-same-quality/
Auto-resizable background
Loading image of 4.000 pixels is not a very common practice even in the websites with a full background. What it is usually done is loading a picture of about 1800-2000 pixels width and then adapt the image to bigger or smaller monitors using CSS preferable.
Here an article about that:
http://css-tricks.com/perfect-full-page-background-image/
Responsive images:
You can also load a different image depending on the predefined resolutions of your chose.
You will need to have multiple versions of each image though.
More information about it use.
My photos are usually 4300x3000 or 3000x4300 ( which is from 7-10
mb/photo ).
It has little or nothing to do with max-height versus height. The performance hit is coming from the original size of the image which causes the browser to:
download a large file
exercise a scaling algorithm against an enormous number of pixels
What should I do to reduce the load time? Is there something like an
autoresize that will keep the height to width ratio?
Create a smaller version(s) of the file when you upload it, and serve the small version. You can optionally open the original version when the user clicks on the small image.
You can create one or more copies of the file manually and upload them with different filenames.
A more elegant solution is to create one or more copies of the file programmatically (you didn't indicate server technology, but there are many options available). For example, Facebook creates six copies of each image you upload so that they can rapidly serve them in different places with the correct size.
Whether or not you do it automatically or manually, you may choose to adjust/crop the image to achieve the desired aspect ratio.
You should be resizing your images and loading those resized images instead if you want quicker loading. You could keep both large and small on disk and only load the large images when user clicks the link.
To resolve loading time
You have to compress your photos before uploading them to the server. Use export to web in photoshop, make sure the image size is reasonable (I would say never more than 1mb); You can also use image optimisation software (In Mac I would recommend JPEGmini).
You can, if you wish keep your large images in a folder in your site and link to them (so that one can download them if you allow this).
To resolve the ratio issue (square vs rectangle)
You can just use one of the properties and css will calculate the other. For example, if you put only
#image{
width:750px;
}
This will resolve the matter of things "getting messed up" if you mix rectangle images with square images.. Good luck!
I'm using several PNG images (via CSS) into a site's template, xhtml and CSS,.
I've kept the pngs as small as possible, and optimised as possible, but when testing it in any browser (Safari, Firefox, IEs) it takes at least 2 seconds to render.
Unfortunately I can't share the code here, but I can say that I've removed all javascript and my html code is fairly small (about 250 lines and no tables) and validates correctly.
I would like to know if the PNGs are the "guilty" part as this is my first site done almost exclusively with pngs (instead of gifs + jpegs) (I won't support IE6 so no need for hacks).
No, they do not take time to render (unless you have a really slow computer). What does take time, is the retrieving of a lot of small files. When you query a web-server for a small file, the time retrieving the file itself does not take long. But to setup the connection etc. etc. adds up.
So, what you should do, is to make what is called a "sprite". Combine all the small images to one large and "cut" them with CSS. How it is done and what it is exactly is explained here:
http://css-tricks.com/css-sprites/
and here
http://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/
If you have many images (doesn't have to be PNGs), then download times will be impacted. By default browsers have a limited number of threads to download content with (IIRC FF has 4), so the more images you have, the longer things will take.
Additionally, if you don't specify dimensions on your images, the browser can only correctly layout the page when an image arrives. It will need to reflow the layout for every such image, which is both expensive and time consuming.
In short, ensure you don't have too many images to download and that the HTML markup has the right dimensions for them.
One workaround for having many images is to use CSS sprites.
Check this link. Read under the "Optimize Images" tab.
Best Practices for Speeding Up Your Web Site
Speed up Images Load Time
I hope this was the thing you needed.