Font size
WorksheetsQuiz- Web-Optimization
Total questions: 32
Worksheet time: 16mins
What is the primary goal of image optimization?
Increase file size
Improve image resolution only
Reduce file size while maintaining acceptable quality
Convert images to grayscale
Which of the following image formats supports lossless compression?
JPEG
PNG
GIF
Both b and c
Which compression technique removes unnecessary image data permanently?
Lossless compression
Lossy compression
Vector compression
Pixel interpolation
Which image format is best suited for photographs on the web?
PNG
JPEG
BMP
TIFF
What does WebP format offer compared to JPEG and PNG?
Larger file sizes
No transparency support
Better compression with quality retention
Only works in Internet Explorer
Which tool is commonly used for image optimization?
Photoshop
TinyPNG
ImageOptim
All of the above
What is a major drawback of using unoptimized images on a website?
Slower page loading speed
Increased SEO ranking
Better website performance
Improved user experience
Which technique helps to improve image loading time on websites?
Lazy loading
Increasing image resolution
Storing images in database
Using only GIFs
What is the recommended resolution for web images to balance quality and performance?
300 DPI
72 DPI
1200 DPI
50 DPI
Which CSS property can be used to serve different images for different screen sizes?
display: flex;
background-size: contain;
max-width: 100%;
srcset in tag
Which of the following is NOT a common image optimization technique?
Resizing images
Reducing image quality
Increasing image resolution
Using modern image formats
What is the main advantage of using an optimized image over an unoptimized one?
Higher resolution
Faster website loading speed
Increased image complexity
Better database performance
Which modern image format provides both lossless and lossy compression and supports transparency?
JPEG
GIF
WebP
BMP
Which technique is used to serve different image sizes for different devices?
Responsive images
Pixelation
Watermarking
Blurring
Which of the following is NOT a tool for image optimization?
TinyPNG
ImageOptim
Adobe Illustrator
Kraken.io
What is an image sprite?
A collection of multiple images stored separately
A technique where multiple images are combined into one
A high-resolution image used in web design
A special format used for animations
Which of the following is an advantage of using image sprites?
Reduces the number of HTTP requests
Increases page load time
Uses more server bandwidth
Makes individual images easier to manage
Which CSS property is used to display only a specific portion of a sprite image?
background-size
background-position
object-fit
display-mode
What is a downside of using image sprites?
Slower rendering on mobile devices
Requires extra CSS for positioning
Uses more memory than separate images
Causes increased server load
In which scenario is an image sprite MOST beneficial?
When using multiple small icons on a website
When displaying high-quality photographs
When using only one image on a webpage
When embedding videos
Which of the following is a common vector image format?
PNG
JPEG
SVG
BMP
What is the key advantage of vector images over raster images?
They support millions of colors
They do not pixelate when resized
They require more storage space
They are best for photographs
Which software is commonly used to create vector graphics?
Adobe Photoshop
Microsoft Paint
Adobe Illustrator
TinyPNG
Which type of images are best suited for logos and icons?
Raster images
Vector images
GIFs
BMP files
Which of the following is NOT a characteristic of vector graphics?
Defined by mathematical equations
Scalable without losing quality
Uses pixels to define the image
Commonly saved as SVG or EPS
Which image format is known for its ability to support animations?
JPEG
SVG
GIF
PNG
What is the primary purpose of using a CDN for image delivery?
To reduce loading times by caching images closer to users
To convert images to different formats
To increase image quality
To enhance image editing capabilities
Which of the following is a benefit of using SVG images over raster images?
They are easier to edit in image editing software
They can be animated and styled with CSS
They have a larger file size
They are not scalable
Minifying CSS helps in reducing (a) and improving page load speed.
Which image format is specifically designed for high-quality graphics on the web?
JPEG
PNG
GIF
TIFF
What is the purpose of the 'alt' attribute in an tag?
To provide alternative text for accessibility
To specify the image source
To define the image size
To link to a different webpage
Which of the following techniques can help reduce image file size without significant quality loss?
Using higher resolution images
Applying lossy compression
Increasing color depth
Using uncompressed formats
