Some websites, such as Google Docs, employ a single image file divided into sprites in order to show all the icons on the UI.
Here's an example: https://ssl.gstatic.com/docs/documents/share/images/sprite-24.svg
The image is used as background and translated to only show the wanted icon.
I'm looking to gain some knowledge on why this pattern is used. Are there any advantages, for example from a performance standpoint?
Just by looking at it, I can see how it'd make it more tedious for example to change an icon, requiring a change of the whole image. Also, positioning the icons correctly across devices looks like a pain.
Why would an app developer choose to use this pattern to display icons on a UI?
Related
This is mainly a question about the quality of logos/icons used in Websites. I create logos/icons using Illustrator but when I see icons on professional websites (see image and links), they look crisp like a text, with no blurriness. The edges are very clear. For example, please see this image, especially the search icon and the menu list icon:
This is my own Blog that has bad icons, the Logo and the Menu icon. Both of them are PNG images.
This is Entrepreneur website with awesome menu icon and search icon. If you check the Inspect Element for mobile site, you'll see that the search icon and menu icon are not images (I don't know actually the reality). It is using a pseudo element. How does it work? Maybe this has something to do with quality.
Same is true with TimeofIndia website. Here the menu icon is made using hr tag, so it's obviously great, but still the search icon is beyond understanding as it is using a pseudo element.
And another scenario is related to this Business Insider website's technique. I've seen it at most of the websites, especially Facebook like sites. They use a single image for all icons. How's it possible? If you don't understand please visit this website and check the URL of the menu and search icon's image. How's it done?
So first I would like to know how these things work? How these icons render?
Secondly why I'm not getting the quality like them? Should I stop using images like them? I'm asking this because I've tried exporting in many ways using Illustrator, with same dimensions as required, but still quality sucks. If you can see, in my own blog's (Blog) mobile site, the middle horizontal bar is blurred despite the original image looks awesome before upload. Why is that?
I think these are too many questions. I would appreciate if you can provide suitable links to understand these things fully, if explaining them here is not easy.
Thank you.
If I could, I'd give #marc-b five upvotes :) The first step, before coming to SO, should always be trying to solve the problem yourself. Then you can come to us with an on-topic question. Here, that first step is to right click on one of the icons you're interested in, and choose "inspect".
There are a couple questions here: what are some ways of making crisp images?, and what's the deal with having multiple images in one file? Both of those are very Googlable, but I'll give you a head start:
Two common ways to make images crisp are:
SVG (vector graphics - as an Illustrator user you already know about the difference between those and raster graphics, and why they're crisp. If not, google "vector raster difference")
2x images - the technique here is to make an image twice the final display size, and then use CSS to shrink it down. The in-browser scaling will have a crisper result that just displaying a 1x image.
Having more than one image in one is called a "sprite." You can have a raster sprite or an svg sprite.
Here's an intro to svg https://css-tricks.com/using-svg/, here's an intro to sprites https://css-tricks.com/css-sprites/, here's an intro to svg sprites https://css-tricks.com/svg-sprites-use-better-icon-fonts/, and here's an intro to the latest thing, srcset https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/
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'm wondering how to replace my social media icons with my own custom images. For example instead of using the typical Facebook Like button or Twitter follow button I would replace it with my own image, while keeping the same functionality.
Websites like BuzzFeed and SuperCompressor are good examples that it can be done. Each has replaced the Facebook Like button with a custom image but the functionality remains the same.
I'm having a hard time finding any information one the web. Can anyone guide me in the right direction?
As the place you will find this image may depend on the plugins and themes you use, you have to find out where the actual image comes from.
To do so, I would suggest that you install a browser such as Chrome that allows you to inspect an element on your page (will open the portion of code displaying the selected item). Once you see where the image comes from, you can either replace the actual image with a custom one if it's on your website's server, or search your website files for this image's URL and replace it with a link to the image of your choice.
I think something like
this http://www.inboundnow.com/apps/facebook-like-button-generator/
might work but the google search for
custom facebook like button for website
has a lot of results
EDIT: Well if you already know how to make a custom image you can follow
https://stackoverflow.com/questions/9493988/how-to-trigger-facebook-like-button-from-custom-button
to make your custom image into a facebook like button
`http://jsfiddle.net/masondesu/haxvL/`
This site also has some info
I'm looking into creating a website that allows people to create their own designs for a certain product. This product can have straight lines, curves, squares, and various shapes. I would not only like these people to be able to free hand draw their own artwork, but also be able to drag and drop (or just click in an area) certain stock images onto the template. I started this project using HTML/Canvas, and have implemented the drawing of freehand/shapes/lines, but I've read a few places that say I should be using SVG for the images.
Reading that I should use SVG for images made me think that since I'm a novice on HTML and website design in general, that I should possibly be doing this differently. So I was wondering how some people would implement this. For a good concept, think of a web site that people can design their own T-Shirts. You just draw on a square canvas, circles/squares/lines/free hand, but can also stick stock photos on there. Thanks, and I'm not looking for code, just to know if I should be using a mix of HTML/SVG/Canvas, or something completely different that I don't know about.
to summarize....
svg, or canvas.......or both, or something else completely.
Okay this is how i imagine you want it to work:
Your customers select a tshirt size and style.
An embedded application within your website allows the users to draw
a nice design they want or import an image
A price is calculated based on the size of the tshirt and the size
of the print
Upon succesful payment, you receive on your backend an image of the
print, the order details and you feed that image into your T-shirt
printing thingy, you print it and you post it.
If this is right you should consider this: http://svg-edit.googlecode.com/svn/branches/2.6/editor/svg-editor.html
You will probably want to remove some unnecessary tools from it and fire it up with different configurations based on what kind of tshirt the customer selected. One example is the t-shirt size. If a customer selects a small t-shirt you fire up a smaller drawing size. The list goes on.
You need to have some good JS skills however to be able to play around with SVG-edit because it is massive but from what i feel it fits perfectly to your purposes.
If you want to see the differences between SVG and Canvas read this: http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/. Its pretty straightforward.
Now why did i suggest using SVG-edit? I don't know if there is any other application implemented using canvas that has so many tools and works so nice as SVG-edit.
It has everything you need, including a '''SAVE as PNG'' function which will serve your purposes in case your t-shirt printer doesn't print SVG images.
The discussion on this answer to the question "How can I use Google's new imageless button?" Has prompted this question.
Google seems to think that going imageless is good for some reason, but from the comments cited, I fail to see the advantage. Is it worth it to send dozens of lines of HTML and who knows how much CSS to render these imageless buttons, rather than simply load another image, especially when techniques like CSS sprites are available?
When would this technique be preferred? The other question asks how it can be done, but I want to know why it should be done.
Localization (it's easier to translate text than images)
Skinning/themeing (it's easier to change the look and feel with single CSS than recreate multiple images)
Accessibility (screen readers can read properly, text scaling works properly)
Performance (the CSS is shared and so is loaded once from the server)
Functionality (it's easier to expand the button with new UX elements like dropdown arrow when you don't have to change the whole picture)
Btw, the "imageless" button might as well contain an image inside the visual template. This approach is quite similar to XAML's approach to templating and styling the visual tree.
I think in this specific case I can only see the advantage that the buttons can be programatically generated. If you don't know what your button will say it's probably easy to make this way than generating it using somekind of image library generator.
Also changing one CSS can make you change the look-and-feel of all buttons at once. Using image buttons you'll need to update everyone and each of images.
Isn't this done because the height of the button may vary (for example the text size)?
The page load is smoother as no images have to be loaded and will appear later than the rest
The button text is also readable in the case somebody cannot read/view images, yet you have the graphical look. (building a graphical button with images in the traditional way around real text is as complicated HTML as this method)
As they mentioned in their blog, these buttons are skinnable without creating and storing custom images.
Basically, you get all the advantages of plain text buttons over custom imaging, while still having a nice, skinnable graphical look.